Vai ar vienu favicon.ico failu pietiek?

Parasti jā datoru pārlūkprogrammām, ja tajā ir 16, 32 un 48 px izmēri. Taču iPhone sākuma ekrānam un Android lietotņu palaišanai vajadzīgi atsevišķi PNG faili, tāpēc labāk sagatavot arī tos.

Kāpēc mana jaunā favikona neparādās?

Visbiežāk vainojama kešatmiņa. Atveriet lapu privātajā logā, notīriet pārlūkprogrammas datus vai pārdēvējiet failu, vai pievienojiet parametru ?v=2. Meklētājprogrammām ikonas kopijas atjaunināšana var aizņemt vairākas dienas vai ilgāk.

Vai favikona var būt JPG?

Dažas pārlūkprogrammas to pieņems, taču JPG nav caurspīdīguma un tā nav parastā izvēle. Izmantojiet PNG, ICO vai SVG.

Kā izveidot favikonu: izmēri, formāti un HTML kods

Favikona ir sīka vietnes ikona, ko redz pārlūkprogrammas cilnēs, grāmatzīmēs un meklēšanas rezultātos. Šķiet sīkums, taču vietne bez tās atstāj nepabeigtu iespaidu, bet nepareizs izmērs vai formāts var padarīt ikonu izplūdušu. Šajā rakstā paskaidrots, kādi izmēri ir vajadzīgi, kuru formātu izvēlēties un kādu kodu ievietot lapā.

Kas ir favikona un kur tā parādās

Favikona (no angļu favorite icon) ir neliels kvadrātveida attēls, ko pārlūkprogrammas rāda blakus lapas nosaukumam cilnē, grāmatzīmju sarakstā un vēsturē. Mobilajās ierīcēs arī Google meklēšanas rezultāti blakus adresei rāda vietnes ikonu, tāpēc skaidra favikona palīdz cilvēkiem atpazīt jūsu vietni.

Ja ikonu nenorādāt, pārlūkprogrammas parasti mēģina ielādēt /favicon.ico no vietnes saknes. Ja tās nav, tās rāda vispārīgu globusa vai tukšas lapas simbolu.

Kādi izmēri vajadzīgi

Nav viena universāla izmēra, jo dažādas vietas izmanto dažādus failus. Praksē pietiek ar nelielu komplektu, un visu to var sagatavot no viena kvadrātveida PNG, kura katra mala ir vismaz 512 px.

Izmērs	Izmantošana
16x16 px	Pārlūkprogrammas cilne (standarta blīvuma ekrāni)
32x32 px	Cilne augsta blīvuma ekrānos, uzdevumjosla
48x48 px	Dažas pārlūkprogrammas un meklētājprogrammas, Windows saīsnes
180x180 px	apple-touch-icon, kad vietne tiek pievienota iPhone vai iPad sākuma ekrānam
192x192 px	Tīmekļa manifests, Android sākuma ekrāns
512x512 px	Tīmekļa manifests, sākuma ekrāni un lielākas lietotņu ikonas

ICO, PNG vai SVG

ICO ir vecs konteinera formāts, kas vienā failā var saturēt vairākus izmērus (piemēram, 16, 32 un 48 px). To atbalsta visas pārlūkprogrammas, tāpēc /favicon.ico joprojām ir noderīgs kā rezerves variants.

PNG ir vienkāršs un drošs: tas der 32, 180, 192 un 512 px versijām un atbalsta caurspīdīgumu. SVG ir vektoru formāts, ko atbalsta modernās pārlūkprogrammas: viens fails paliek ass jebkurā izmērā un pat var pielāgoties tumšajam režīmam. Tomēr Safari un daži vecāki rīki SVG favikonas apstrādā tikai daļēji, tāpēc drošākā pieeja ir tos apvienot: ICO kā rezerves variants, PNG Apple un manifesta ikonām un SVG kā neobligāts papildinājums.

Kā izveidot favikonu no PNG

Sāciet ar kvadrātveida attēlu, vēlams 512x512 px vai lielāku, ar skaidru un vienkāršu dizainu. Ja jums ir tikai JPG, to var vispirms pārveidot par PNG, lai vēlāk attēlu redaktorā varētu pievienot caurspīdīgu fonu.

Sagatavojiet kvadrātveida PNG ar vienkāršu logotipu vai vienu burtu.
Pārveidojiet to par ICO ar rīku PNG uz ICO un saglabājiet kā favicon.ico.
Atsevišķi saglabājiet PNG kopijas izmērā 180x180 (apple-touch-icon.png), 192x192 un 512x512 tīmekļa manifestam.
Augšupielādējiet failus vietnes saknē un pievienojiet HTML birkas sadaļā <head>.

HTML birkas, kas jāpievieno

Ievietojiet šīs rindas savas lapas <head> iekšpusē (pielāgojiet ceļus atbilstoši tam, kur atrodas jūsu faili):

Failā site.webmanifest sadaļā icons norādiet 192x192 un 512x512 PNG failus. Ja SVG nav, vienkārši izlaidiet šo rindu.

Biežākās kļūdas

Attēls nav kvadrātveida: pārlūkprogramma to saspiež vai apcērt, un ikona izskatās deformēta. Vienmēr sāciet no kvadrāta.
Pārāk daudz detaļu: izmērā 16x16 px sīks teksts un ēnas pārvēršas plankumā. Izmantojiet vienu vienkāršu formu, spilgtas krāsas un spēcīgu kontrastu.
Pārāk mazs avota attēls: mazu attēlu palielinot, tas kļūst izplūdis. Lielu attēlu samazināt ir daudz drošāk.
Caurspīdīgs fons tumšā cilnē: tumšs logotips var pazust. Pārbaudiet to gan gaišajā, gan tumšajā motīvā vai pievienojiet fona krāsu.
Kešatmiņa: pārlūkprogrammas favikonas kešo stūrgalvīgi, tāpēc pēc nomaiņas var turpināt rādīties vecā ikona. Testējiet privātajā logā, veiciet pilnu atsvaidzināšanu (Ctrl+F5) vai pievienojiet versiju, piemēram, /favicon.ico?v=2.

Piemērs no sākuma līdz beigām

Pieņemsim, ka jums ir 1024x1024 px PNG logotips un vēlaties pilnu ikonu komplektu savai vietnei. Vispirms paskatieties uz logotipu, samazinātu līdz 16x16 px: vai formu joprojām var atpazīt? Ja nē, izveidojiet vienkāršotu versiju, piemēram, tikai pirmo burtu uz vienkrāsaina fona. Tikai tad eksportējiet izmērus.

Pēc tam sagatavojiet failus: favicon.ico (16, 32 un 48 px vienā failā), apple-touch-icon.png (180x180), icon-192.png un icon-512.png. Tie ir četri faili, kas der gandrīz jebkurai situācijai. Augšupielādējiet tos vietnes saknē, pievienojiet birkas sadaļā <head> un atveriet lapu privātajā logā, lai pārbaudītu rezultātu.

Kā pārbaudīt, vai viss darbojas

Atveriet https://your-site/favicon.ico tieši pārlūkprogrammā: jums jāredz ikona, nevis kļūda 404.
Izstrādātāju rīkos (F12, cilne Network) pārlādējiet lapu un pārliecinieties, ka ikonu pieprasījumi atgriež statusu 200.
Paskatieties uz cilni gan gaišajā, gan tumšajā pārlūkprogrammas motīvā: logotipam jāpaliek salasāmam abos.
Tālrunī pievienojiet vietni sākuma ekrānam un pārbaudiet, vai tiek rādīta 180 px ikona, nevis lapas ekrānuzņēmums.
Pārliecinieties, ka site.webmanifest ir derīgs JSON un ka tajā norādītie ceļi atbilst reāliem failiem.