Kaip sukurti favicon
Dydžiai, formatai ir kodas, kurių reikia favicon, matomam visur.
Favicon yra maža piktograma naršyklės kortelėje, žymėse ir šalia jūsų svetainės Google mobiliosios paieškos rezultatuose. Be favicon svetainė atrodo nebaigta, o neryškus favicon atrodo dar blogiau. Gerą sukurti užtrunka kelias minutes.
Pradėkite nuo tinkamo piešinio
Favicon rodomas net 16 × 16 pikselių dydžio, todėl visas logotipas su užrašu bus neįskaitomas. Naudokite paprastą ženklą: simbolį iš logotipo, vieną inicialą arba ryškią formą jūsų prekės ženklo spalva. Išbandykite sumažindami jį ekrane iki ketvirčio dydžio: jei vis dar galite atpažinti, kas tai, jis tiks.
Pradėkite nuo kvadratinio bent 512 × 512 pikselių vaizdo, geriausia PNG su skaidriu fonu. Jei jūsų logotipas nekvadratinis, apkarpykite jį iki kvadrato, užfiksavę santykį 1:1.
Failai, kurių jums reikia
| Failas | Dydis | Kas naudoja |
|---|---|---|
| favicon.ico | Turi 16, 32 ir 48 pikselių versijas | Naršyklės, senesnės sistemos, numatytoji /favicon.ico užklausa |
| PNG piktograma | 32 × 32 ir 192 × 192 | Šiuolaikinės naršyklės, Android pradžios ekranai |
| apple-touch-icon.png | 180 × 180 | iPhone ir iPad pradžios ekrano žymės |
Google Search jūsų favicon naudoja ir rezultatuose. Jis turi būti bent 48 × 48 pikselių kvadratas ir pasiekiamas paieškos robotams jūsų svetainėje.
ICO failo kūrimas
Įmeskite savo kvadratinį PNG į PNG į ICO konverterį. Jis sukuria tikrą .ico failą su mažais dydžiais, kurių prašo naršyklės. PNG versijoms pakeiskite to paties kvadratinio vaizdo dydį iki 180, 192 ir 32 pikselių.
Kaip jį pridėti prie svetainės
Įkelkite favicon.ico į svetainės šakninį aplanką, kad jis būtų pasiekiamas adresu jusu-svetaine.lt/favicon.ico, ir pridėkite šias eilutes į savo puslapių head dalį:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/lt/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/lt/apple-touch-icon.png">
WordPress sistemoje eikite į Appearance, Customize, Site Identity ir įkelkite kvadratinį vaizdą kaip Site Icon; WordPress sukurs dydžius už jus. Shopify, Wix ir Squarespace kiekviena turi favicon nustatymą svetainės ar temos nustatymuose.
Kai naujas favicon nerodomas
Naršyklės favicon talpykloje laiko itin atkakliai. Atidarykite svetainę privačiame lange arba tiesiogiai apsilankykite jusu-svetaine.lt/favicon.ico ir atnaujinkite puslapį. Google gali prireikti dienų ar savaičių, kad atnaujintų piktogramą paieškos rezultatuose, kai iš naujo nuskaitys jūsų pradžios puslapį.
Dažnos klaidos
- Viso logotipo su smulkiu tekstu naudojimas, kuris 16 pikselių dydžio virsta dėme.
- Balta piktograma ant skaidraus fono, kuri dingsta šviesiose naršyklės kortelėse.
- Tik mažyčio 16 pikselių failo pateikimas, kuris didelės raiškos ekranuose atrodo neryškus.
- Pamirštas failas adresu /favicon.ico, kurio kai kurios naršyklės ir paieškos robotai prašo nepriklausomai nuo to, ką nurodo puslapis.