Utilia
Kategorije ▾
Jezik: sl ▾

Generator favicon

Ustvari favicon.ico, ikone PNG, apple-touch-icon in site.webmanifest iz ene slike ali emojija, z značkami HTML za lepljenje. Prenos ZIP, brez nalaganja.

Vir

Prilagoditev
site.webmanifest

Kako ustvariti favicon

  1. Pod Vir izberi Slika ali Besedilo ali emoji. - Slika: spusti PNG, JPG, WebP ali SVG. Najbolje deluje kvadraten logotip velikosti vsaj 512 × 512 px. Izberi Cela slika, da jo vstaviš v ikono, ali Zapolni in obreži, da pokrije kvadrat. - Besedilo ali emoji: vpiši črko, začetnici ali emoji, nato izberi Pisava, Krepko in Barva besedila.
  2. Nastavi Barva ozadja ali obkljukaj Prosojno ozadje. Izberi Oblika (Kvadrat, Zaobljena ali Krog) in Odmik (%), da okoli vsebine pustiš prostor.
  3. Po želji odpri site.webmanifest in vnesi Ime aplikacije (spletni manifest), Kratko ime, Barva teme in URL mape z ikonami (ohrani /, če datoteke gredo v koren tvoje strani).
  4. Klikni Ustvari favicon. Ikone se prikažejo v pravi velikosti ob posnetku zavihka brskalnika. Potem vsaka sprememba ikone posodobi takoj.
  5. Klikni Prenesi ZIP, datoteke naloži na svojo spletno stran, nato Kopiraj značke in jih prilepi znotraj <head> svojih strani.

Kaj je v arhivu ZIP

Datoteka Velikost Uporablja
favicon.ico 16, 32 in 48 px Zavihki brskalnika, zaznamki, starejši brskalniki, Windows
favicon-16x16.png 16 × 16 Zavihki brskalnika
favicon-32x32.png 32 × 32 Zavihki na zaslonih z visoko gostoto, bližnjice v opravilni vrstici
apple-touch-icon.png 180 × 180 Domači zaslon iPhona in iPada
android-chrome-192x192.png 192 × 192 Domači zaslon Androida (spletni manifest)
android-chrome-512x512.png 512 × 512 Začetni zasloni ob namestitvi (spletni manifest)
site.webmanifest — Ime, barve in ikone namestljive strani
favicon-tags.html — Značke HTML, za pregled

Datoteka ICO vsebuje tri slike PNG, obliko, ki jo berejo Windows (od različice Vista) in vsi sodobni brskalniki. Ikona apple-touch-icon je vedno shranjena na polnem ozadju, ker iOS prosojne slikovne pike prikaže črno; pri prosojnem ozadju se uporabi belo.

Značke HTML

Ustvarjene značke so videti takole (z URL-jem tvoje mape):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Brskalniki samodejno zahtevajo tudi /favicon.ico v korenu tvoje domene, zato pomaga, če ga tam obdržiš, tudi na straneh brez značk.

Nasveti za oblikovanje

  • Naj bo preprosto. Pri 16 × 16 px detajli izginejo. Najbolje se bere ena sama črka, krepek simbol ali najpreprostejša različica tvojega logotipa.
  • Preveri predogled v pravi velikosti. Ikona 16 px v posnetku zavihka je tisto, kar obiskovalci res vidijo.
  • Pomisli na temni način. Temen logotip na prosojnem ozadju lahko v temnih temah brskalnika izgine; pomaga barvno ozadje ali majhen odmik.
  • Emoji so na vsakem sistemu videti drugače, ker vsaka platforma nariše emoji v svojem slogu. Datoteke PNG ohranijo videz tvoje naprave.

Pogosta vprašanja

Katere velikosti potrebuje favicon?

V praksi: favicon.ico s 16, 32 in 48 px, apple-touch-icon velikosti 180 px ter PNG-ja velikosti 192 in 512 px za spletni manifest. To orodje vse to ustvari iz enega vira.

Ali lahko uporabim logotip SVG?

Da. Datoteke SVG se narišejo v visoki ločljivosti, preden nastanejo ikone. SVG se prikaže kot navadna slika, zato se njegovi skripti nikoli ne izvedejo.

Kako naredim favicon z emojijem?

Izberi Besedilo ali emoji, vpiši ali prilepi emoji, izberi ozadje ali ga pusti prosojnega in ustvari. Rezultat sta pravi PNG in ICO, zato deluje v vsakem brskalniku.

Zakaj se moj novi favicon ne prikaže?

Brskalniki favicone agresivno hranijo v predpomnilniku. Znova naloži stran z izpraznjenim predpomnilnikom, odpri stran v zasebnem oknu ali URL-ju dodaj različico, na primer /favicon.ico?v=2.

Ali se moja slika naloži na strežnik?

Ne. Ikone, arhiv ZIP in manifest nastanejo v tvojem brskalniku; nič ne zapusti tvoje naprave.

Sorodna orodja