Iskanje »velikost ikone strani« še vedno vrne sezname petnajstih datotek iz leta 2014. V praksi danes šest dimenzij pokrije zavihke brskalnika, rezultate iskanja, iOS, Android in PWA. Predstavljamo jih in pojasnjujemo, zakaj jih potrebujete.
Velikosti, ki jih dejansko potrebujete
Vsaka vrstica ustreza dokumentirani uporabi v predlaganem paketu. Preglednica daje prednost majhnemu, medsebojno združljivemu naboru pred zbirko zgodovinskih različic.
| Datoteka | Dimenzije | Namen |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Zavihki, zaznamki, starejši brskalniki, spletni pajki |
| favicon.svg | vektorsko, kvadratno | Sodobni brskalniki, ostrina pri vseh velikostih, temni način |
| favicon-96x96.png | 96×96 | Googlovi rezultati iskanja na mobilnih napravah |
| apple-touch-icon.png | 180×180 | Začetni zaslon iOS in iPadOS, brez prosojnosti |
| web-app-manifest-192x192.png | 192×192 | Začetni zaslon Android, navedeno v spletnem manifestu |
| web-app-manifest-512x512.png | 512×512 | Zagonski zaslon PWA, različica »maskable« |
Zakaj so 16, 32 in 48 v isti datoteki .ico
ICO je vsebniška oblika: ena datoteka lahko vsebuje več slik, brskalnik pa izbere tisto, ki ustreza prikazu. To je ravno tisto, kar potrebujete, saj se zahtevana velikost spreminja glede na okolje.
16×16 je namenjena zavihku na običajnem zaslonu. 32×32 zagotovi različico za zaslone z visoko gostoto in druge vmesnike brskalnika. 48×48 dopolni vsebnik in sledi tudi pravilu večkratnika 48, ki ga Google dokumentira za ikone v rezultatih iskanja.
Najpogostejša napaka je datoteka .ico, ki vsebuje le 16×16: na zaslonu Retina se ikona poveča in je zato vedno videti zamegljena.
180×180 za iOS, 192 in 512 za Android
iOS za ikono začetnega zaslona ne bere spletnega manifesta, temveč poišče oznako apple-touch-icon. Zadostuje ena velikost, 180×180, ki pokrije vse novejše naprave iPhone in iPad. Sistem jo za starejše naprave sam pomanjša.
Android namesto tega uporablja spletni manifest. Zadostujeta dva vnosa: 192×192 za začetni zaslon in 512×512 za zagonski zaslon, ko je stran nameščena kot aplikacija. Različica 512 naj bo navedena s purpose »maskable«, kar pomeni, da je oblikovana za obrezovanje v krog ali zaobljen kvadrat.
Pri ikoni maskable ohranite bistvene elemente v osrednjih 80 %. Vse zunaj tega območja se lahko odreže glede na proizvajalca telefona.
Katero izvorno sliko izbrati
Najboljše izhodišče je SVG, saj se brez izgube kakovosti prilagodi vsem zgornjim velikostim. Sicer uporabite kvadratni PNG velikosti vsaj 512×512 slikovnih pik, da tudi zagonska ikona za Android nastane s pomanjšavo in nikoli s povečavo.
Vodoravni logotip z besedilom pri 16×16 ne deluje: beseda se pri tej velikosti spremeni v nekaj nejasnih pik. Izločite simbol ali začnite z eno oziroma dvema črkama na kontrastnem ozadju.
Na koncu preverite kontrast na svetlem in temnem ozadju: črn logotip v temnem zavihku izgine. Temna različica ikone strani SVG je namenjena prav temu.
Velikosti, ki jih ne potrebujete več
Starejši generatorji še vedno ustvarjajo datoteke za zgodovinske integracije, denimo ploščice Windows z mstile-150x150.png in browserconfig.xml. Dodajte jih le, če vaša podpora izrecno zajema te vmesnike.
Dolga vrsta apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 in 152x152 izvira iz časa, ko iOS ni znal spreminjati velikosti. Ena slika 180×180 nadomesti vse.
Odstranjevanje neuporabljenih navedb poenostavi repozitorij in HTML. Pred odstranitvijo obstoječe integracije preverite svoje ciljne brskalnike in platforme.
Primarni viri
Pogosta vprašanja
Ali še potrebujete favicon.ico?
Da, vendar le v korenu strani. Sodobni brskalniki dajejo prednost SVG, številni pajki, zbiralniki in poštni odjemalci pa še vedno zahtevajo /favicon.ico brez branja HTML. Datoteka ima le nekaj kilobajtov: obdržite jo.
Katero velikost ikone uporablja Google v zadetkih?
Google zahteva ikono s stranico, ki je večkratnik 48 slikovnih pik, in jo običajno prikaže pri 48×48. PNG 96×96 ali SVG to zlahka pokrijeta. Ikona mora biti dostopna pajku in je robots.txt ne sme blokirati.
Ali je ikona strani lahko pravokotna?
Tehnično da, vizualno ne. Vsako okolje ji nameni kvadrat: pravokotna slika je popačena ali centrirana s praznimi pasovi. Vedno začnite s kvadratom in po potrebi dodajte odmik okoli simbola.