Leit að „stærð táknmyndar“ skilar enn fimmtán skráa gátlistum frá 2014. Í raun duga nú sex stærðir fyrir vafraflipa, leitarniðurstöður, iOS, Android og PWA. Hér eru þær og ástæðurnar fyrir valinu.
Stærðirnar sem þú þarft í raun
Hver lína samsvarar skjalfestri notkun í tillögunni að pakkanum. Taflan leggur áherslu á lítið safn sem virkar saman í stað fjölda sögulegra afbrigða.
| Skrá | Stærðir | Hlutverk |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Flipar, bókamerki, eldri vafrar og leitarvélar |
| favicon.svg | vigurmynd, ferningur | Nýir vafrar, skýr í öllum stærðum, styður dökka stillingu |
| favicon-96x96.png | 96×96 | Google-leitarniðurstöður í síma |
| apple-touch-icon.png | 180×180 | Heimaskjár iOS og iPadOS, ekkert gegnsæi |
| web-app-manifest-192x192.png | 192×192 | Heimaskjár Android, tilgreint í vefbirtingarskránni |
| web-app-manifest-512x512.png | 512×512 | Upphafsskjár PWA, „maskable“-útgáfan |
Af hverju 16, 32 og 48 eru í sömu .ico-skrá
ICO er safnsnið: ein skrá getur geymt nokkrar myndir og vafrinn velur þá sem hentar birtingunni. Það er einmitt það sem þarf, því umbeðin stærð breytist eftir aðstæðum.
16×16 hentar flipa á venjulegum skjá. 32×32 gefur útgáfu fyrir skjái með miklum pixlaþéttleika og annað viðmót vafrans. 48×48 fullgerir safnið og fylgir einnig reglunni um margfeldi af 48 sem Google skjalfestir fyrir táknmyndir í leitarniðurstöðum.
Algengustu mistökin eru að afhenda .ico sem inniheldur aðeins 16×16: á Retina-skjá er táknið þá stækkað og virðist alltaf óskýrt.
180×180 fyrir iOS, 192 og 512 fyrir Android
iOS les ekki vefbirtingarskrána fyrir tákn heimaskjásins heldur leitar að apple-touch-icon-tagi. Ein stærð dugar, 180×180, sem nær yfir alla nýlega iPhone og iPad. Kerfið minnkar myndina sjálft fyrir eldri tæki.
Android notar hins vegar vefbirtingarskrána. Tvær færslur duga: 192×192 fyrir tákn heimaskjásins og 512×512 fyrir upphafsskjáinn þegar vefurinn er settur upp sem forrit. 512-útgáfan ætti að vera merkt með purpose „maskable“, sem þýðir að hún þolir að vera skorin í hring eða ferning með ávölum hornum.
Í maskable-tákni skaltu halda aðalatriðunum innan miðlægra 80%. Það sem er utan þess svæðis getur verið skorið af eftir framleiðanda símans.
Hvaða upprunamynd er best að nota?
Best er að byrja á SVG: það skalast án gæðataps í allar stærðirnar hér að ofan. Annars skaltu nota ferningslaga PNG sem er að minnsta kosti 512×512 pixlar, svo jafnvel tákn upphafsskjás Android verði minnkað úr stærri mynd og aldrei stækkað.
Lárétt lógó með texta virkar ekki í 16×16: í þeirri stærð verður orð að þriggja pixla graut. Taktu táknið út úr lógóinu eða byrjaðu á einum eða tveimur stöfum á bakgrunni með skýrum andstæðum.
Athugaðu að lokum andstæðurnar bæði á ljósum og dökkum bakgrunni: svart lógó hverfur á flipa með dökku þema. Dökka útgáfan af SVG-táknmyndinni leysir einmitt þann vanda.
Stærðirnar sem þú þarft ekki lengur
Eldri myndunarverkfæri búa enn til skrár fyrir sögulegar samþættingar, svo sem Windows-reiti sem nota mstile-150x150.png og browserconfig.xml. Bættu þeim aðeins við ef stuðningsáætlun þín beinist sérstaklega að því viðmóti.
Langa röðin apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 og 152x152 er frá þeim tíma þegar iOS gat ekki breytt stærð. Ein 180×180-mynd kemur í stað þeirra allra.
Að fjarlægja óþarfar tilvísanir einfaldar kóðasafnið og HTML. Athugaðu hvaða vafra og kerfi þú þarft að styðja áður en þú fjarlægir samþættingu sem þegar er til.
Frumheimildir
Algengar spurningar
Þarf enn favicon.ico?
Já, en aðeins í rót vefsins. Nýir vafrar kjósa SVG en margar leitarvélar, efnissafnarar og póstforrit biðja enn um /favicon.ico án þess að lesa HTML. Skráin er aðeins nokkur kílóbæti: haltu henni.
Hvaða táknmyndastærð notar Google í leitarniðurstöðum?
Google biður um tákn með hliðarlengd sem er margfeldi af 48 pixlum og birtir það yfirleitt í 48×48. 96×96 PNG eða SVG hentar auðveldlega. Leitarvélar verða að komast í táknið og robots.txt má ekki loka á það.
Má táknmyndin vera rétthyrnd?
Tæknilega já, sjónrænt nei. Allir birtingarstaðir taka frá ferning: rétthyrnd mynd aflagast eða er miðjuð með auðum röndum. Byrjaðu alltaf á ferningi og bættu svigrúmi utan um táknið ef þarf.