Otsing „faviconi suurus” annab endiselt viieteistkümnest failist koosnevaid kontrollnimekirju, mis pärinevad 2014. aastast. Tegelikult katavad kuus mõõdet praegu brauseri vahekaardid, otsingutulemused, iOS-i, Androidi ja PWA-d. Siin on need mõõtmed koos põhjendustega.
Mõõtmed, mida tegelikult vajad
Iga rida vastab pakutud paketi dokumenteeritud kasutusjuhule. Tabel eelistab ajalooliste variantide kogumisele väikest ja omavahel ühilduvat komplekti.
| Fail | Mõõtmed | Otstarve |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Vahekaardid, järjehoidjad, vanemad brauserid ja roomajad |
| favicon.svg | vektorkujutis, ruudukujuline | Moodsad brauserid, terav igas suuruses, toetab tumedat režiimi |
| favicon-96x96.png | 96×96 | Google'i otsingutulemused mobiilis |
| apple-touch-icon.png | 180×180 | iOS-i ja iPadOS-i avakuva, läbipaistmatu |
| web-app-manifest-192x192.png | 192×192 | Androidi avakuva, deklareeritud veebimanifestis |
| web-app-manifest-512x512.png | 512×512 | PWA käivituskuva, „maskable”-variant |
Miks 16, 32 ja 48 asuvad samas .ico-failis
ICO on konteinerivorming: üks fail võib sisaldada mitut pilti ning brauser valib kuvamiseks sobiva. Just seda ongi vaja, sest küsitud suurus muutub kasutuskohast olenevalt.
16×16 sobib tavalise ekraani vahekaardile. 32×32 pakub variandi suure pikslitihedusega ekraanidele ja muudele brauseriliidestele. 48×48 täiendab konteinerit ning järgib ka Google'i dokumenteeritud nõuet, et otsingutulemuste faviconi külg oleks 48 kordne.
Ainult 16×16-pilti sisaldava .ico-faili pakkumine on kõige tavalisem viga: Retina-ekraanil suurendatakse ikooni ja see jääb püsivalt uduseks.
180×180 iOS-ile, 192 ja 512 Androidile
iOS ei loe avakuva ikooni veebimanifestist, vaid otsib apple-touch-icon-silti. Piisab ühest suurusest, 180×180, mis katab kõik uuemad iPhone'id ja iPadid. Vanemate seadmete jaoks vähendab süsteem pilti ise.
Android kasutab seevastu veebimanifesti. Piisab kahest kirjest: 192×192 avakuva ikooni ja 512×512 käivituskuva jaoks, kui sait paigaldatakse rakendusena. 512 versioon tuleks deklareerida väärtusega purpose „maskable”, mis tähendab, et kujundus talub ringiks või ümardatud ruuduks kärpimist.
Maskitava ikooni olulised osad hoia keskmise 80% sees. Kõike väljapoole jäävat võidakse telefoni tootjast olenevalt kärpida.
Millisest lähtepildist alustada
Parim lähtepunkt on SVG: see skaleerub kvaliteedikaota kõigisse ülaltoodud mõõtmetesse. Selle puudumisel kasuta vähemalt 512×512-pikslist ruudukujulist PNG-d, et ka Androidi käivitusikoon loodaks vähendamise, mitte suurendamise teel.
Horisontaalne tekstiga logo ei tööta mõõtmetes 16×16: selles suuruses muutub sõna mõneks eristamatuks piksliks. Eralda logost sümbol või alusta ühest-kahest tähest kontrastsel taustal.
Kontrolli ka kontrasti nii heledal kui tumedal taustal: must logo kaob tumeda kujundusega vahekaardil. Just selleks on SVG-faviconi tume variant.
Mõõtmed, mida enam vaja pole
Vanemad generaatorid väljastavad endiselt ajalooliste lahenduste faile, näiteks Windowsi paanide mstile-150x150.png ja browserconfig.xml. Lisa need ainult siis, kui sinu toetatavate keskkondade loend neid liideseid sõnaselgelt hõlmab.
Pikk sari apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 ja 152x152 pärineb ajast, mil iOS ei osanud mõõtmeid muuta. Üks 180×180 pilt asendab neid kõiki.
Kasutute deklaratsioonide eemaldamine lihtsustab hoidlat ja HTML-i. Enne olemasoleva lahenduse eemaldamist kontrolli oma sihtbrausereid ja -platvorme.
Algallikad
Korduma kippuvad küsimused
Kas favicon.ico on endiselt vajalik?
Jah, kuid ainult saidi juurkaustas. Moodsad brauserid eelistavad SVG-d, ent paljud roomajad, koondajad ja meilikliendid küsivad endiselt /favicon.ico-faili sinu HTML-i lugemata. Fail võtab paar kilobaiti: jäta see alles.
Millist faviconi suurust kasutab Google otsingutulemustes?
Google soovib ikooni, mille külg on 48 piksli kordne, ja kuvab seda tavaliselt mõõtmetes 48×48. 96×96 PNG või SVG sobib selleks hästi. Ikoon peab olema roomajale ligipääsetav ega tohi olla robots.txt-ga blokeeritud.
Kas favicon võib olla ristkülikukujuline?
Tehniliselt jah, visuaalselt mitte. Igas kasutuskohas on selle jaoks ruut: ristkülikukujuline pilt kas moonutatakse või tsentreeritakse tühjade ribadega. Alusta alati ruudust, lisades vajaduse korral sümboli ümber veerised.