Kaip sukurti favicon: dydžiai, formatai ir HTML kodas

Kas yra favicon ir kur jis rodomas

Favicon (angl. favorite icon) yra kvadratinė piktograma, kurią naršyklė parodo šalia puslapio pavadinimo kortelėje, žymių sąraše ir istorijoje. Google paieškos rezultatuose mobiliuosiuose įrenginiuose šalia svetainės adreso taip pat rodoma jos ikona, todėl gerai paruoštas favicon padeda atpažinti svetainę.

Kai svetainė ikonos nenurodo, naršyklė dažniausiai bando atsisiųsti failą /favicon.ico iš svetainės šaknies. Jei jo nėra, rodoma bendra pasaulio ar tuščio lapo piktograma.

Kokių dydžių reikia

Vieno universalaus dydžio nėra, nes skirtingos vietos naudoja skirtingus failus. Praktiškai pakanka nedidelio rinkinio, kurį galima paruošti iš vieno kvadratinio PNG paveikslėlio, kurio šoninė bent 512 px.

ICO, PNG ar SVG

ICO yra senas formatas, kurio viduje gali būti keli dydžiai (pavyzdžiui, 16, 32 ir 48 px) viename faile. Jį palaiko visos naršyklės, todėl /favicon.ico vis dar naudinga kaip atsarginis variantas.

PNG yra paprastas ir patikimas: tinka 32x32, 180x180, 192x192 ir 512x512 dydžiams, palaiko skaidrumą. SVG yra vektorinis formatas, tinkantis šiuolaikinėms naršyklėms: vienas failas išlieka ryškus bet kokiame dydyje, o piešinį galima net pritaikyti prie tamsios temos. Tačiau Safari ir kai kurios senesnės programos SVG favicon palaiko ribotai, todėl saugiausia derinti: ICO kaip atsarginį, PNG Apple ir manifest ikonoms, o SVG kaip papildomą variantą.

Kaip sukurti favicon iš PNG

Pradėkite nuo kvadratinio paveikslėlio, geriausia 512x512 px ar didesnio, su aiškiu, paprastu piešiniu. Jei turite JPG, pirmiausia galite jį konvertuoti į PNG, kad išliktų skaidrus fonas, kai jį pašalinsite grafikos programoje.

• Paruoškite kvadratinį PNG su paprastu logotipu ar viena raide.
• Konvertuokite jį į ICO naudodami PNG į ICO įrankį ir išsaugokite kaip favicon.ico.
• Atskirai išsaugokite PNG kopijas: 180x180 (apple-touch-icon.png), 192x192 ir 512x512 (web manifest).
• Įkelkite failus į svetainės šaknį ir įdėkite HTML žymes į <head>.

HTML žymės, kurias reikia įdėti

Į puslapio <head> dalį įrašykite šias eilutes (kelius pakeiskite pagal savo failų vietą):

<link rel="icon" href="/favicon.ico" sizes="48x48">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Faile site.webmanifest, skiltyje icons, nurodykite 192x192 ir 512x512 PNG failus. Jei SVG neturite, eilutę su juo tiesiog praleiskite.

Dažniausios klaidos

• Nekvadratinis paveikslėlis: naršyklė jį sutraukia arba apkarpo, ikona atrodo iškreipta. Visada pradėkite nuo kvadrato.
• Per daug detalių: 16x16 px plote smulkus tekstas ir šešėliai virsta netvarkinga dėme. Naudokite vieną paprastą formą, ryškias spalvas ir aiškų kontrastą.
• Per mažas šaltinis: didinant mažą paveikslėlį jis išsilieja. Geriau mažinti didelį.
• Skaidrus fonas ant tamsios kortelės: tamsus logotipas gali tapti nematomas. Patikrinkite abiejose temose arba pridėkite fono spalvą.
• Kešas: naršyklės favicon išsaugo labai atkakliai, todėl po pakeitimo senoji ikona gali likti rodoma. Išbandykite privačiame lange, perkraukite puslapį su Ctrl+F5 arba prie adreso pridėkite versiją, pavyzdžiui, /favicon.ico?v=2.

Darbo eiga praktikoje: pavyzdys nuo pradžios iki galo

Tarkime, turite logotipą PNG formatu, 1024x1024 px dydžio, ir norite, kad svetainė turėtų pilną ikonų rinkinį. Pirmiausia pažiūrėkite į logotipą sumažintą iki 16x16 px: ar dar atpažįstate formą? Jei ne, sukurkite supaprastintą versiją, pavyzdžiui, tik pirmąją raidę ant vienspalvio fono. Tik tada eksportuokite dydžius.

Po to paruoškite failus: favicon.ico (16, 32 ir 48 px viename faile), apple-touch-icon.png (180x180), icon-192.png ir icon-512.png. Iš viso tai keturi failai, kurių užtenka beveik visoms situacijoms. Įkelkite juos į svetainės šaknį, įdėkite žymes į <head> ir atidarykite puslapį privačiame lange, kad patikrintumėte rezultatą.

Dar vienas patarimas: jei svetainės pavadinimas prasideda raide, o ne simboliu, vienos raidės favicon dažniausiai išeina ryškiausias. Kontrastą patikrinkite mintyse: ar ikoną atskirtumėte, jei ekranas būtų nespalvotas? Jei taip, vadinasi, forma pakankamai stipri, ir spalvos jos neišgelbės, o tik papildys.

Kaip patikrinti, ar viskas veikia

Jei ikona vis tiek neatsinaujina, patikrinkite, ar HTML žymėje nenurodytas senas kelias arba ar serveris negrąžina seno failo dėl savo kešo. Svetainėse su turinio pristatymo tinklu (CDN) gali tekti ir ten išvalyti kešą. Nepamirškite, kad puslapiai, kuriuose žymės neįdėtos, naudos numatytąjį /favicon.ico, todėl bendras šablonas yra patikimiausia vieta jas laikyti.

• Atidarykite https://jūsų-svetainė/favicon.ico tiesiogiai naršyklėje: turėtumėte pamatyti ikoną, o ne klaidą 404.
• Kūrėjų įrankiuose (F12, skirtukas Network) perkraukite puslapį ir pažiūrėkite, ar ikonų užklausos grąžina būseną 200.
• Patikrinkite kortelę šviesioje ir tamsioje naršyklės temoje: logotipas turi likti įskaitomas abiejose.
• Telefone pridėkite svetainę į pradžios ekraną ir pažiūrėkite, ar rodoma 180 px ikona, o ne puslapio momentinė nuotrauka.
• Patikrinkite, ar site.webmanifest yra galiojantis JSON ir ar jame nurodyti keliai atitinka tikrus failus.