Objašnjenje formata favicona: ICO, PNG, SVG i što preglednicima treba

Zašto su faviconi i dalje neobično komplicirani

Favicon izgleda kao jedna mala slika, ali nalazi se na sjecištu sučelja preglednika, knjižnih oznaka, kartica, prikvačenih prečaca, rezultata pretraživanja, mobilnih početnih zaslona i instalacija progresivnih web-aplikacija. Svaki kontekst ima malo drukčija očekivanja.

Zato savjeti o faviconima često djeluju neuredno. Neki timovi isporučuju samo jedan favicon.ico jer je to nekoć bilo dovoljno. Drugi generiraju desetak datoteka ne znajući koje se zapravo koriste. Razumna sredina je manja: razumjeti u čemu su ICO, PNG i SVG dobri, a zatim isporučiti kompaktan skup koji pokriva današnje preglednike i uobičajene kontekste uređaja.

Faviconi nisu mjesto za dokazivanje slikovnog pipelinea. Oni su mjesto na kojem treba biti dosadan, izričit i kompatibilan.

ICO: stari format koji odbija nestati

ICO je klasični spremnik za Windows ikone. Može sadržavati više bitmap slika različitih veličina, najčešće 16×16, 32×32 i 48×48 piksela. To je važno jer se favicon može prikazivati vrlo malen u kartici preglednika, veći na popisu knjižnih oznaka i opet drukčije u Windows prečacima.

Važan je detalj da je ICO spremnik, a ne samo jedna slika. Dobar favicon.ico obično sadrži više rasterskih veličina kako bi preglednik ili operacijski sustav mogao odabrati najbliže podudaranje umjesto skaliranja jedne sitne bitmap slike.

ICO je i dalje koristan iz tri razloga:

• Preglednici mogu automatski zatražiti /favicon.ico, čak i ako ga ne povežete u HTML-u.
• Neki stariji preglednici i integracije ga očekuju.
• Siguran je fallback kada se novije deklaracije ikona ignoriraju.

To ne znači da bi ICO trebao biti vaša jedina ikona. Nezgodan je za uređivanje, nije osobito prijateljski prema modernim radnim procesima i loš je kao izvor istine za brendovski znak. Tretirajte ga kao kompatibilnosni fallback.

U praksi, postavite stvarni /favicon.ico u korijen web-mjesta. Nemojte ondje posluživati 404 osim ako volite bučne logove i nepotrebne ponovne pokušaje preglednika.

PNG: pouzdani radni konj

PNG je i dalje najpredvidljiviji rasterski format za favicone i touch ikone. Podržava transparentnost, široko je podržan i ponaša se dosljedno u preglednicima i na platformama.

Za favicone, PNG je koristan kada želite izričite ikone u određenim pikselnim veličinama, poput 32×32 ili 48×48. Za ikone na mobilnom početnom zaslonu, PNG je u nekim okruženjima praktički obavezan. Apple touch ikone, primjerice, u uobičajenoj produkcijskoj upotrebi temelje se na PNG-u.

Pomaže nekoliko praktičnih pravila:

• Izvozite iz vektorskog izvora, ne iz već male bitmap slike.
• Pobrinite se da ikona bude čitljiva na 16×16 prije nego što se počnete baviti većim veličinama.
• Dodajte dovoljno odmaka kako znak ne bi djelovao odrezano u zaobljenim ili maskiranim kontekstima.
• Izbjegavajte sitan tekst, tanke linije i detaljne ilustracije.

PNG kompresijom se kod favicona obično ne vrijedi opsesivno baviti jer su datoteke malene. Ipak, nemojte isporučiti touch ikonu od 500 KB samo zato što je izašla ravno iz dizajnerskog izvoza. Ako već pregledavate šire odluke o slikama, isto disciplinirano razmišljanje iz odluka o formatima slika na modernom webu vrijedi i ovdje: odaberite format za zadatak, a ne zato što je moderan.

SVG: moderna, fleksibilna opcija

SVG faviconi privlačni su jer ne ovise o razlučivosti. Jedna mala datoteka može se čisto prikazivati u mnogim veličinama, a može se uređivati izravno u kodu ili izvesti iz dizajnerskog softvera.

Moderne verzije Chromiuma, Firefoxa i Safarija podržavaju SVG favicone. To SVG čini dobrim primarnim formatom favicona za mnoga web-mjesta, osobito kada je ikona jednostavan logotip, glif ili geometrijski znak.

Ali SVG faviconi dolaze s upozorenjima.

Prvo, SVG bi trebao biti samodostatan. Nemojte se oslanjati na vanjske fontove, udaljene slike ili skripte. Preglednici primjenjuju ograničenja na SVG koji se koristi kao slika, a čak i kada nešto radi u jednom pregledniku, može zakazati u drugom.

Drugo, neka vizualno bude jednostavan. SVG ne rješava čarobno problem od 16 piksela. Detaljna vektorska ilustracija i dalje je mrlja kada se stisne u karticu.

Treće, budite oprezni s dinamičkim stiliziranjem. Neki timovi koriste prefers-color-scheme unutar SVG favicona kako bi se ikona prilagodila tamnim i svijetlim temama preglednika. To može raditi, ali ponašanje preglednika i predmemoriranje mogu biti neujednačeni. Ako je prepoznatljivost brenda važna, jedna robusna ikona često nadmašuje domišljatu prilagodljivu.

SVG je dobar izvor i dobar moderni format isporuke. Nije razlog da preskočite fallback datoteke.

Što preglednici zapravo traže

Preglednici otkrivaju favicone na dva glavna načina: izričitim HTML poveznicama i implicitnim zahtjevima prema korijenu.

Implicitno ponašanje je staro: ako preglednik želi ikonu i nije je pronašao, može zatražiti /favicon.ico. Zato je korijenska ICO datoteka i dalje korisna čak i na modernim web-mjestima.

Izričito ponašanje koristi elemente <link> u zaglavlju dokumenta. Kompaktna moderna postavka izgleda ovako:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifest zatim može upućivati na veće PNG ikone koje se koriste za instalabilne web-aplikacije:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Ovo nije jedina valjana postavka, ali je dobra polazna osnova. Modernim preglednicima daje SVG, pruža uobičajeni ICO fallback, pokriva spremanja na iOS početni zaslon i podržava kontekste instalacije aplikacija.

Skup favicona koji bi većina web-mjesta trebala isporučivati

Za uobičajeno marketinško web-mjesto, dokumentacijsko web-mjesto, SaaS aplikaciju ili publikaciju, ovaj je skup dovoljan:

• /favicon.ico koji sadrži 16×16 i 32×32, opcionalno 48×48.
• /icon.svg kao moderni skalabilni favicon.
• /apple-touch-icon.png na 180×180.
• /icon-192.png i /icon-512.png ako imate manifest web-aplikacije.

Možete dodati više veličina ako platforma ima specifičan zahtjev, ali nemojte generirati deset datoteka iz navike. Svaka dodatna datoteka još je jedna stvar koju treba predmemorirati, zaboraviti, pogrešno imenovati ili ostaviti zastarjelom nakon rebrandinga.

Ako vaše web-mjesto nije instalabilno i nema manifest, možda vam ne trebaju ikone od 192 i 512 piksela. Ako se vaše web-mjesto ponaša kao aplikacija, vjerojatno trebaju.

Uobičajeni načini kvara

Najčešće pogreške s faviconima nisu umjetničke. To su problemi isporuke.

Jedan je agresivno predmemoriranje. Preglednici se tvrdoglavo drže favicona. Tijekom testiranja promijenjena ikona možda se neće pojaviti dok ne napravite prisilno osvježavanje, očistite podatke web-mjesta, upotrijebite novi naziv datoteke ili testirate u svježem profilu. Za produkcijske rebrandinge, promjena /icon.svg?v=2 može pomoći u HTML-u, ali korijenski /favicon.ico je teži jer ga preglednici traže izravno. Zamjena datoteke i čekanje isteka predmemorija često je dio posla.

Još jedan čest problem je pogrešan MIME tip. SVG se treba posluživati kao image/svg+xml, PNG kao image/png, a ICO najčešće kao image/x-icon ili image/vnd.microsoft.icon. Mnogi preglednici opraštaju pogreške, ali ne svi konteksti. Ako nešto ne radi samo u jednom pregledniku, pregledajte mrežni odgovor prije nego što ponovno crtate ikonu. Ovdje vrijede iste navike kao pri debugiranju preusmjeravanja i HTTP zaglavlja u produkciji: gledajte stvarni odgovor, a ne ono što CMS tvrdi da poslužuje.

Treći je problem gustoća dizajna. Logotipi koji izvrsno funkcioniraju u zaglavlju web-mjesta često zakažu kao faviconi. Ikona u kartici nemilosrdan je test. Uklonite riječi, pojednostavite oblike, povećajte kontrast i testirajte u stvarnim veličinama. Ako je ikona smisleni sadržaj unutar stranice, tada su pitanja pristupačnosti poput alternativnog teksta važna; za sam favicon ona je ukras sučelja preglednika, a ne sadržaj stranice. Za tu razliku pogledajte naš pragmatični vodič za alternativni tekst slika.

<!-- tool-cta:start -->

💡 Isprobajte ovo: Generirajte ICO, PNG i SVG varijante koje moderni preglednici očekuju u jednom potezu pomoću Ultimate Favicon Generator.

<!-- tool-cta:end -->

Jednostavan kontrolni popis za implementaciju

Upotrijebite ovaj kontrolni popis prije isporuke:

1. Krenite od čistog vektorskog mastera.
2. Testirajte znak na 16×16 i 32×32.
3. Izvezite samodostatan SVG favicon.
4. Generirajte višedimenzionalni ICO fallback.
5. Izvezite Apple touch ikonu od 180×180.
6. Dodajte PNG-ove od 192×192 i 512×512 ako koristite manifest.
7. Postavite /favicon.ico u korijen web-mjesta.
8. Provjerite statusne kodove, MIME tipove i zaglavlja predmemoriranja.
9. Testirajte barem u jednom Chromium pregledniku, Firefoxu i Safariju ako vaša publika uključuje Apple uređaje.

Faviconi su mali, ali su i vrlo vidljivi. Pokvaren favicon čini da web-mjesto djeluje nedovršeno. Dobro izrađen favicon nestaje u sučelju, što je upravo poanta.