Pretraga „dimenzije favicona” još uvijek donosi popise od petnaest datoteka naslijeđene iz 2014. U praksi šest dimenzija danas pokriva kartice preglednika, rezultate pretraživanja, iOS, Android i PWA aplikacije. Evo koje su i zašto.
Dimenzije koje su vam doista potrebne
Svaki redak odgovara dokumentiranoj namjeni u predloženom paketu. Tablica daje prednost malom, međusobno kompatibilnom skupu pred zbirkom povijesnih inačica.
| Datoteka | Dimenzije | Namjena |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Kartice, oznake, stariji preglednici, roboti tražilica |
| favicon.svg | vektorski, kvadratan | Suvremeni preglednici, oštar u svakoj veličini, podržava tamni način |
| favicon-96x96.png | 96×96 | Rezultati Google pretraživanja na mobilnim uređajima |
| apple-touch-icon.png | 180×180 | Početni zaslon iOS-a i iPadOS-a, bez prozirnosti |
| web-app-manifest-192x192.png | 192×192 | Početni zaslon Androida, deklarirano u web manifestu |
| web-app-manifest-512x512.png | 512×512 | Zaslon pri pokretanju PWA aplikacije, inačica „maskable” |
Zašto su 16, 32 i 48 u istoj datoteci .ico
ICO je spremnički format: jedna datoteka može sadržavati više slika, a preglednik odabire onu koja odgovara prikazu. Upravo je to potrebno jer se tražena veličina mijenja ovisno o kontekstu.
16×16 služi kartici na standardnom zaslonu. 32×32 daje inačicu za zaslone visoke gustoće piksela i druga sučelja preglednika. 48×48 dopunjuje spremnik i slijedi pravilo višekratnika broja 48 koje Google navodi za favicone u rezultatima pretraživanja.
Isporuka datoteke .ico koja sadrži samo 16×16 najčešća je pogreška: na Retina zaslonu ikona se povećava i stalno izgleda mutno.
180×180 za iOS, 192 i 512 za Android
iOS ne čita web manifest za ikonu početnog zaslona: traži oznaku apple-touch-icon. Dovoljna je jedna dimenzija, 180×180, koja pokriva sve novije iPhone i iPad uređaje. Sustav je sam smanjuje za starije uređaje.
Android koristi web manifest. Dovoljna su dva unosa: 192×192 za ikonu početnog zaslona i 512×512 za zaslon pri pokretanju kada je stranica instalirana kao aplikacija. Inačicu od 512 treba deklarirati uz purpose „maskable”, što znači da je oblikovana tako da podnese obrezivanje u krug ili zaobljeni kvadrat.
Za ikonu prilagodljivu maski zadržite važne elemente unutar središnjih 80 %. Sve izvan toga može se odrezati ovisno o proizvođaču telefona.
Od koje izvorne slike krenuti
Najbolje je krenuti od SVG-a: bez gubitaka se skalira na sve navedene dimenzije. Ako ga nemate, upotrijebite kvadratni PNG od najmanje 512×512 piksela kako bi čak i ikona pokretanja za Android nastala smanjivanjem, a nikada povećavanjem.
Vodoravni logotip s tekstom ne funkcionira na 16×16: riječ se u toj veličini pretvara u nekoliko nejasnih piksela. Izdvojite simbol ili krenite od jednog ili dva slova na kontrastnoj pozadini.
Na kraju provjerite kontrast na svijetloj i tamnoj pozadini: crni logotip nestaje u kartici tamne teme. Upravo tome služi tamna inačica SVG favicona.
Dimenzije koje više nisu potrebne
Stariji generatori još izrađuju datoteke za povijesne integracije, poput Windows pločica s mstile-150x150.png i browserconfig.xml. Dodajte ih samo ako izričito podržavate ta sučelja.
Dugi niz apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 i 152x152 potječe iz vremena kada iOS nije mogao mijenjati dimenzije. Jedna slika od 180×180 zamjenjuje sve njih.
Uklanjanje nekorištenih deklaracija pojednostavnjuje repozitorij i HTML. Prije uklanjanja postojeće integracije provjerite koje preglednike i platforme podržavate.
Primarni izvori
Česta pitanja
Je li favicon.ico još potreban?
Da, ali samo u korijenu stranice. Suvremeni preglednici preferiraju SVG, no mnogi roboti, agregatori i klijenti e-pošte još traže /favicon.ico bez čitanja HTML-a. Datoteka zauzima nekoliko kilobajta: zadržite je.
Koju dimenziju favicona Google koristi u rezultatima pretraživanja?
Google traži ikonu čija je stranica višekratnik 48 piksela i obično je prikazuje na 48×48. PNG od 96×96 ili SVG to lako pokrivaju. Ikona mora biti dostupna robotima i ne smije biti blokirana u robots.txt.
Može li favicon biti pravokutan?
Tehnički da, vizualno ne. Svaki kontekst prikaza predviđa kvadrat: pravokutna se slika izobličuje ili centrira uz prazne trake. Uvijek krenite od kvadrata i po potrebi dodajte razmak oko simbola.