Brezplačni pretvornik

Favicon Generator

Ustvarite favicon datoteke v več velikostih (16x16 do 512x512) iz katere koli slike. Brezplačno, takojšnje in v celoti deluje v vašem brskalniku.

Povleci in spusti sliko sem

Podpira PNG, JPG, SVG, WebP. Največ 10 MB.

oz

O tem orodju

Favicon je majhna ikona, ki se pojavi na zavihkih brskalnika, zaznamkih in seznamih zgodovine. Prvotni favicon – datoteka ICO 16 × 16 na /favicon.ico – se je razširil v kompleksen nabor ikon različnih velikosti za različne platforme: 16 × 16 in 32 × 32 za zavihke brskalnika, 180 × 180 za domače zaslone iOS, 192 × 192 in 512 × 512 za Android ter različne velikosti za ploščice Windows. Izdelava vsega tega iz ene same izvorne slike je tisto, kar počne sodobni generator faviconov.

To orodje vzame eno izvorno sliko visoke ločljivosti (običajno kvadratni logotip) in ustvari celoten nabor sredstev favicon ter oznake povezav HTML, potrebne za sklicevanje nanje. Izhod vključuje ICO, več PNG-jev in manifest.json za progresivne metapodatke spletne aplikacije. Spustite dobljene datoteke v koren vašega spletnega mesta in se nanje sklicujte prek ustvarjenega HTML-ja.

Vsa obdelava poteka v vašem brskalniku. Brez nalaganja, brez klica API-ja, brez omejitve stopnje. Izhod deluje v vseh sodobnih brskalnikih in operacijskih sistemih, ki prikazujejo priljubljene ikone.

Zakaj ustvariti Favicon

Spletna mesta brez favikon so videti nedokončana. Zavihki brskalnika prikazujejo splošno ikono; zaznamki nimajo vizualnega identifikatorja; spletno mesto je videti manj profesionalno. Dodajanje ustreznega nabora favicon je korak poliranja z majhnim naporom in močnim učinkom, ki nakazuje pozornost do podrobnosti.

Sodobne zahteve za favicon so presegle /favicon.ico. Ikone domačega zaslona iOS, ikone Android Chrome, ikone ploščic Windows in različice temnega načina uporabljajo različne datoteke. Ustvarjanje vseh iz enega vira zagotavlja dosledno blagovno znamko brez ročnega upravljanja vsake datoteke.

Kako uporabljati

Naložite izvorno sliko, pridobite celoten nabor favicon.

  1. Naloži izvorno sliko: Uporabite kvadratno sliko velikosti najmanj 512 × 512 slikovnih pik. Prednost ima PNG (podpora za preglednost); Sprejet je tudi SVG. Viri z višjo ločljivostjo ustvarjajo ostrejše manjše ikone.
  2. Konfigurirajte možnosti platforme: Po potrebi omogočite izhode iOS, Android, Windows in PWA. Privzete nastavitve ustvarijo standardni nabor, ki ga potrebuje večina spletnih mest.
  3. Prilagodite barve in temo: Izberite barve tem za ploščice Windows in pozdravne zaslone PWA. Ujemajte se z identiteto vaše blagovne znamke.
  4. Prenesite in uvedite: Shranite ustvarjeni zip. Postavite datoteke v koren vašega spletnega mesta in dodajte ustvarjene oznake povezav HTML v <head>. HTML se sklicuje na vsako ikono prave velikosti.

Pogosti primeri uporabe

Tehnične podrobnosti

Celoten sodoben nabor favicon: favicon.ico (16+32+48 več ločljivosti), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png. Plus site.webmanifest za PWA, browserconfig.xml za Windows.

Vsak PNG je ustvarjen z znižanjem vzorčenja na osnovi platna iz vira. ICO je sestavljen v JavaScriptu z združevanjem različic 16/32/48 v format ICO z več ločljivostmi z uporabo zapisa DataView.

Oznake povezav HTML se sklicujejo na vsako datoteko z ustreznimi atributi rel in sizes. Generator jih ustvari kot delček, pripravljen za kopiranje in lepljenje, za <head> vašega spletnega mesta.

Najboljše prakse

Pogosta vprašanja

Kakšno obliko slike naj naložim?
PNG s prozornim ozadjem deluje najbolje. Uporabite kvadratno sliko vsaj 512 x 512 slikovnih pik, da lahko orodje pomanjša brez izgube kakovosti. Tudi SVG deluje dobro, saj se spreminja v poljubno velikost.
Kakšne velikosti to ustvari?
16x16 (zavihek brskalnika), 32x32 (zavihek brskalnika @2x), 48x48 (opravilna vrstica Windows), 180x180 (ikona Apple Touch), 192x192 (začetni zaslon Android), 512x512 (zaslon PWA). Datoteka ICO vsebuje velikosti 16, 32 in 48 slikovnih pik.
Kam dam favicon datoteke?
Postavite favicon.ico v korenski imenik vašega spletnega mesta. Druge velikosti PNG so v vaši javni mapi ali kateri koli dostopni poti. Dodajte oznake povezav HTML v razdelek <head>, ki kaže na vsako lokacijo datoteke.
Zakaj se moja favicon ne posodobi v brskalniku?
Brskalniki agresivno predpomnijo priljubljene ikone. Počistite predpomnilnik brskalnika, poskusite odpreti v oknu brez beleženja zgodovine ali dodajte poizvedbeni niz različice (?v=2) URL-ju priljubljene ikone, da vsilite osvežitev.
Zakaj se moja favicon ne posodobi?
Brskalniki agresivno predpomnijo priljubljene ikone, včasih več dni. Prisilno osvežite tako, da počistite predpomnilnik, neposredno odprete URL ikone ali dodate poizvedbeni parameter različice oznaki povezave.
Ali je moja slika naložena na strežnik?
Ne. Generiranje poteka v vašem brskalniku.
Ali naj uporabim SVG ali PNG?
SVG za vir (neodvisno od ločljivosti). Generator ustvari PNG v določenih velikostih; sodobni brskalniki podpirajo tudi priljubljene ikone SVG prek povezave rel=icon type=image/svg+xml.
Kaj je site.webmanifest?
Manifest JSON za napredne spletne aplikacije, ki opisuje ikone, barve in druge metapodatke. Zahtevano za spletne aplikacije, ki jih je mogoče namestiti; neškodljivo vključiti tudi na standardna spletna mesta.