Ieškant „svetainės piktogramos dydžio“ vis dar randami penkiolikos failų sąrašai, paveldėti iš 2014 m. Tačiau šiandien šeši matmenys apima naršyklės korteles, paieškos rezultatus, iOS, Android ir PWA. Štai kokie jie ir kodėl reikalingi.
Dydžiai, kurių iš tiesų reikia
Kiekviena eilutė atitinka dokumentuotą siūlomo rinkinio naudojimo atvejį. Lentelėje pirmenybė teikiama mažam tarpusavyje suderinamam rinkiniui, o ne istorinių versijų kolekcijai.
| Failas | Matmenys | Paskirtis |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Kortelės, žymelės, senesnės naršyklės, paieškos robotai |
| favicon.svg | vektorinis, kvadratinis | Šiuolaikinės naršyklės, ryškus bet kokio dydžio, palaiko tamsųjį režimą |
| favicon-96x96.png | 96×96 | Google paieškos rezultatai mobiliuosiuose įrenginiuose |
| apple-touch-icon.png | 180×180 | iOS ir iPadOS pradžios ekranas, be skaidrumo |
| web-app-manifest-192x192.png | 192×192 | Android pradžios ekranas, nurodytas žiniatinklio manifeste |
| web-app-manifest-512x512.png | 512×512 | PWA paleidimo ekranas, „maskable“ versija |
Kodėl 16, 32 ir 48 laikomi viename .ico
ICO yra konteinerio formatas: viename faile telpa keli vaizdai, o naršyklė pasirenka tinkamą rodymo aplinkai. To ir reikia, nes reikalaujamas dydis priklauso nuo konteksto.
16×16 tinka kortelei įprastame ekrane. 32×32 suteikia versiją didelio pikselių tankio ekranams ir kitoms naršyklės sąsajoms. 48×48 papildo konteinerį ir atitinka Google dokumentacijoje nurodytą paieškos piktogramų kraštinės dalumo iš 48 taisyklę.
Dažniausia klaida – pateikti .ico, kuriame yra tik 16×16 vaizdas: Retina ekrane piktograma padidinama ir nuolat atrodo neryški.
180×180 iOS, 192 ir 512 Android
iOS pradžios ekrano piktogramos neima iš žiniatinklio manifesto: ieško apple-touch-icon žymos. Pakanka vieno 180×180 dydžio visiems naujesniems iPhone ir iPad. Senesniems įrenginiams sistema vaizdą sumažina pati.
Android naudoja žiniatinklio manifestą. Pakanka dviejų įrašų: 192×192 pradžios ekrano piktogramai ir 512×512 paleidimo ekranui, kai svetainė įdiegiama kaip programa. 512 versijai reikia nurodyti purpose „maskable“: piešinys turi išlikti tinkamas apkirpus jį apskritimu ar užapvalintu kvadratu.
„maskable“ piktogramos svarbiausias dalis laikykite centriniuose 80 %. Tai, kas yra už šios srities, gali būti apkirpta pagal telefono gamintoją.
Nuo kokio pradinio vaizdo pradėti
Geriausias pradinis formatas yra SVG: jis be nuostolių keičiamas į visus minėtus dydžius. Kitu atveju naudokite kvadratinį bent 512×512 pikselių PNG, kad net Android paleidimo piktograma būtų kuriama mažinant, o ne didinant vaizdą.
Horizontalus logotipas su tekstu netinka 16×16: tokiu dydžiu žodis virsta vos kelių pikselių koše. Išskirkite simbolį arba pradėkite nuo vienos ar dviejų raidžių kontrastingame fone.
Galiausiai patikrinkite kontrastą šviesiame ir tamsiame fone: juodas logotipas tamsioje kortelėje pradingsta. Būtent tam skirta tamsioji SVG svetainės piktogramos versija.
Dydžiai, kurių nebereikia
Senesni generatoriai vis dar kuria istorinių integracijų failus, pavyzdžiui, Windows plytelių mstile-150x150.png ir browserconfig.xml. Pridėkite juos tik tada, kai jūsų palaikomų aplinkų sąraše aiškiai numatytos šios sąsajos.
Ilga apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 ir 152x152 seka atsirado tada, kai iOS negalėjo keisti dydžio. Vienas 180×180 vaizdas pakeičia visus šiuos failus.
Pašalinus nebenaudojamas deklaracijas, saugykla ir HTML tampa paprastesni. Prieš šalindami esamą integraciją, patikrinkite savo tikslines naršykles ir platformas.
Pirminiai šaltiniai
Dažniausi klausimai
Ar vis dar reikia favicon.ico?
Taip, bet tik svetainės šakniniame kataloge. Šiuolaikinės naršyklės renkasi SVG, tačiau daugelis paieškos robotų, agregatorių ir pašto programų vis dar užklausia /favicon.ico neskaitę HTML. Failas sveria vos kelis kilobaitus – palikite jį.
Kokį svetainės piktogramos dydį Google naudoja paieškoje?
Google prašo piktogramos, kurios kraštinė būtų 48 pikselių kartotinis, ir dažniausiai rodo ją 48×48. Tam lengvai pakanka 96×96 PNG arba SVG. Piktograma turi būti pasiekiama robotams ir neblokuojama robots.txt.
Ar svetainės piktograma gali būti stačiakampė?
Techniškai taip, vizualiai – neverta. Kiekvienoje rodymo aplinkoje numatytas kvadratas: stačiakampis iškraipomas arba centruojamas paliekant tuščias juostas. Visada pradėkite nuo kvadrato, prireikus pridėkite paraštes aplink simbolį.