Meklējot “favicon izmērs”, joprojām atrodami piecpadsmit failu saraksti no 2014. gada. Praksē tagad pietiek ar sešiem izmēriem, lai aptvertu pārlūka cilnes, meklēšanas rezultātus, iOS, Android un PWA. Apskatīsim tos un to nozīmi.
Izmēri, kas patiešām nepieciešami
Katra rinda atbilst dokumentētam lietojumam piedāvātajā komplektā. Tabulā priekšroka dota nelielam, savstarpēji saderīgam komplektam, nevis vēsturisku variantu kolekcijai.
| Fails | Izmēri | Lietojums |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Cilnes, grāmatzīmes, vecāki pārlūki, rāpuļprogrammas |
| favicon.svg | vektoru, kvadrātveida | Moderni pārlūki; ass jebkurā izmērā, atbalsta tumšo režīmu |
| favicon-96x96.png | 96×96 | Google meklēšanas rezultāti mobilajās ierīcēs |
| apple-touch-icon.png | 180×180 | iOS un iPadOS sākuma ekrāns, bez caurspīdīguma |
| web-app-manifest-192x192.png | 192×192 | Android sākuma ekrāns, norādīts tīmekļa manifestā |
| web-app-manifest-512x512.png | 512×512 | PWA palaišanas ekrāns, “maskable” variants |
Kāpēc 16, 32 un 48 ir vienā .ico failā
ICO ir konteinera formāts: viens fails var saturēt vairākus attēlus, un pārlūks izvēlas attēlojumam atbilstošo. Tieši tas ir vajadzīgs, jo pieprasītais izmērs mainās atkarībā no lietojuma vietas.
16×16 ir piemērots cilnei parastā ekrānā. 32×32 nodrošina variantu augsta blīvuma displejiem un citām pārlūka saskarnēm. 48×48 papildina konteineru un atbilst arī Google dokumentētajam 48 daudzkārtņa noteikumam meklēšanas rezultātu ikonām.
Visbiežākā kļūda ir piegādāt .ico, kurā ir tikai 16×16 attēls: Retina ekrānā ikona tiek palielināta un vienmēr izskatās izplūdusi.
180×180 iOS, 192 un 512 Android vajadzībām
iOS sākuma ekrāna ikonu nemeklē tīmekļa manifestā: tas meklē tagu apple-touch-icon. Pietiek ar vienu izmēru, 180×180, kas aptver visus jaunākos iPhone un iPad. Vecākām ierīcēm sistēma attēlu samazina pati.
Android savukārt izmanto tīmekļa manifestu. Pietiek ar diviem ierakstiem: 192×192 sākuma ekrāna ikonai un 512×512 palaišanas ekrānam, kad vietne uzstādīta kā lietotne. 512 variants jānorāda ar purpose “maskable”, proti, jāveido tā, lai tas saglabātu izskatu, apgriežot aplī vai noapaļotā kvadrātā.
Maskējamai ikonai būtiskās detaļas jāsaglabā centrālajos 80%. Viss ārpus šīs zonas var tikt apgriezts atkarībā no tālruņa ražotāja.
Ar kādu sākotnējo attēlu sākt
Labākais sākumpunkts ir SVG: tas bez kvalitātes zuduma pielāgojas visiem iepriekš minētajiem izmēriem. Ja tā nav, izmantojiet kvadrātveida PNG ar vismaz 512×512 pikseļiem, lai pat Android palaišanas ikona tiktu samazināta, nevis palielināta.
Horizontāls logotips ar tekstu 16×16 izmērā nedarbojas: vārds pārvēršas dažos neskaidros pikseļos. Izdaliet simbolu vai sāciet ar vienu vai diviem burtiem uz kontrastējoša fona.
Visbeidzot pārbaudiet kontrastu uz gaiša un tumša fona: melns logotips pazūd tumšas cilnes fonā. Tieši tam paredzēts SVG favicon tumšais variants.
Izmēri, kas vairs nav nepieciešami
Vecāki ģeneratori joprojām izveido failus vēsturiskām integrācijām, piemēram, Windows elementiem ar mstile-150x150.png un browserconfig.xml. Pievienojiet tos tikai tad, ja jūsu atbalsta prasībās šīs saskarnes ir skaidri iekļautas.
Garā apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 un 152x152 virkne ir no laikiem, kad iOS neprata mainīt izmērus. Viens 180×180 attēls aizstāj tos visus.
Neizmantotu deklarāciju noņemšana vienkāršo repozitoriju un HTML. Pirms esošas integrācijas noņemšanas pārbaudiet savas vietnes mērķa pārlūkus un platformas.
Pirmavoti
Bieži uzdotie jautājumi
Vai favicon.ico joprojām nepieciešams?
Jā, bet tikai vietnes saknē. Moderni pārlūki dod priekšroku SVG, taču daudzas rāpuļprogrammas, agregatori un e-pasta klienti pieprasa /favicon.ico, nelasot HTML. Fails sver dažus kilobaitus: paturiet to.
Kādu favicon izmēru Google izmanto meklēšanas rezultātos?
Google prasa ikonu, kuras mala ir 48 pikseļu daudzkārtnis, un parasti rāda to 48×48 izmērā. 96×96 PNG vai SVG ir pilnīgi pietiekams. Ikonai jābūt pieejamai rāpuļprogrammai, un robots.txt nedrīkst to bloķēt.
Vai favicon var būt taisnstūrveida?
Tehniski jā, vizuāli nē. Visās attēlošanas vietās rezervēts kvadrāts: taisnstūrveida attēls tiek izkropļots vai centrēts ar tukšām joslām. Vienmēr sāciet ar kvadrātu, vajadzības gadījumā pievienojot atstarpes ap simbolu.