Kas yra favicon ir kodėl jis svarbus jūsų svetainei?

Favicon (sutrumpinta iš angl. „favorite icon“ – „mėgstamiausia piktograma“) – tai mažas kvadratinis vaizdas, atstovaujantis svetainei naršyklės skirtukuose, žymėse, istorijos sąrašuose, „Google“ paieškos rezultatuose, telefonų pagrindiniuose ekranuose ir įdiegtose žiniatinklio programėlėse. Jis svarbus, nes suteikia jūsų svetainei atpažįstamą veidą iš pirmo žvilgsnio, padeda ją rasti tarp daugybės atidarytų skirtukų, signalizuoja, kad svetainė profesionali ir patikima, o dabar dar rodomas šalia svetainės pavadinimo „Google“ rezultatuose. Be jo lankytojai mato bendrinę gaublio ar tuščio puslapio piktogramą, o jūsų serverio žurnaluose kaupiasi 404 klaidos. Visą favicon rinkinį galite nemokamai sukurti naudodami „MakeFav“ favicon generatorių.

Kas yra favicon?

Favicon – tai maža prekės ženklo grafika, paprastai supaprastinta logotipo versija arba viena raidė ar simbolis, kurią naršyklės ir kita programinė įranga atsisiunčia iš jūsų svetainės ir parodo visur, kur reikia kompaktiško vizualinio identifikatoriaus. Kompiuterio naršyklėje ji dažniausiai piešiama 16 × 16 CSS pikselių dydžio, nors pats failas turėtų būti didesnis, kad liktų ryškus didelio tankio ekranuose.

Techniškai favicon yra tiesiog vaizdo failas, nurodytas jūsų HTML (arba randamas numatytojoje vietoje), kurį naršyklės atsisiunčia atskirai nuo puslapio turinio. Šiandien „favicon“ retai būna vienas failas. Šiuolaikinė svetainė dažniausiai pateikia kelias tos pačios piktogramos versijas, kad naršyklės, paieškos sistemos, iOS ir „Android“ gautų joms tinkamą formatą ir dydį.

Trumpa favicon istorija

Favicon atsirado dar 1999 m. kovą, kai „Microsoft“ išleido „Internet Explorer 5“. Naršyklė leido išsaugoti puslapius „Mėgstamiausių“ sąraše, taip pat ieškojo mažo piktogramos failo, pavadinto favicon.ico, svetainės šaknyje, kad parodytų jį šalia kiekvieno išsaugoto įrašo. Idėja buvo paprasta: jei svetainė pateikdavo /favicon.ico, piktograma atsirasdavo šalia žymės.

Kitos naršyklės netrukus perėmė šią funkciją, o naršymas skirtukais padarė ją daug naudingesnę. Skirtukams tapus pagrindiniu naršymo būdu, favicon iš žymių papuošimo virto svarbia naršymo priemone. Bėgant metams požiūris keitėsi:

• 2000-ųjų pradžia: elementas <link rel="icon"> leido svetainėms nurodyti piktogramą bet kuriuo URL, o ne tik šaknyje, o PNG ir GIF failus ėmė priimti ne IE naršyklės.
• 2010-ieji: „Apple“ pristatė apple-touch-icon iOS pagrindiniams ekranams, o „Android“ ir „Windows“ įvedė savo susitarimus, pavyzdžiui, manifesto piktogramas ir plytelių vaizdus.
• Šiandien: SVG favicon, žiniatinklio programėlių manifestai, tamsųjį režimą atpažįstančios piktogramos ir „Google“ paieškos rezultatų favicon reikalavimai padarė favicon nedidele, bet tikra techninės svetainės sąrankos dalimi.

Kur šiandien rodomi favicon

Jūsų favicon rodomas daug daugiau vietų nei naršyklės skirtuke. Pagrindinės iš jų:

• Naršyklės skirtukai: labiausiai matoma vieta, kur atidarius daug skirtukų piktograma dažnai yra vienintelis dalykas, kurį matote.
• Žymės ir mėgstamiausi: piktograma rodoma šalia puslapio pavadinimo žymių juostose ir meniu.
• Istorija ir dažniausiai lankomi puslapiai: naršyklės rodo favicon istorijos sąrašuose ir naujų skirtukų puslapiuose.
• „Google“ paieškos rezultatai: tiek mobiliajame, tiek kompiuteryje „Google“ rodo svetainės favicon šalia svetainės pavadinimo ir URL.
• Pagrindiniai ekranai: kai lankytojas prideda jūsų svetainę prie pagrindinio ekrano iOS ar „Android“ įrenginyje, lietimo piktograma arba manifesto piktograma tampa programėlės stiliaus nuoroda.
• Įdiegtos PWA: progresyvioji žiniatinklio programėlė naudoja žiniatinklio programėlės manifeste nurodytas piktogramas paleidimo piktogramai, pradžios ekranui ir užduočių perjungikliui.
• „Windows“ plytelės ir prisegtos svetainės: senesnės „Windows“ ir „Edge“ versijos naudojo prisegtoms svetainėms apibrėžtus plytelių vaizdus; šiuolaikinės dažniausiai naudoja jūsų standartines piktogramas.
• Nuorodų peržiūros kai kuriose programose: tam tikros pokalbių ir produktyvumo priemonės (gerai žinomas pavyzdys – „Slack“) rodo svetainės favicon šalia išskleistos nuorodos. Dauguma peržiūrų daugiausia remiasi „Open Graph“ vaizdais, tačiau favicon dažnai pateikia mažą prekės ženklo ženklelį.

Kodėl favicon svarbus jūsų svetainei

Prekės ženklo atpažįstamumas

Žmonės spalvas ir formas atpažįsta greičiau, nei perskaito tekstą. Nuosekli piktograma, kartojama skirtukuose, žymėse ir paieškos rezultatuose, kuria pažįstamumą kiekvieną kartą, kai ją pamato, – tai nemokama prekės ženklo ekspozicija kiekvieno apsilankymo metu.

Pasitikėjimas ir patikimumas

Trūkstamas favicon daro svetainę nebaigtos įspūdžio. Švari, tinkamai atvaizduojama piktograma yra nedidelis ženklas, kad kažkam rūpi detalės, o tai stiprina nuomonę, kad svetainė patikima. Tai nėra saugumo funkcija, ir sukčiavimo svetainės gali nukopijuoti piktogramas, tačiau tuščia numatytoji piktograma retai padeda verslui atrodyti solidžiai.

Paspaudimų dažnis paieškos rezultatuose

Kadangi „Google“ rodo favicon šalia jūsų įrašo, jis tampa dalimi to, kaip jūsų rezultatas atrodo šalia konkurentų. „Google“ nėra paskelbusi, kad favicon veikia reitingavimą, todėl nereikėtų tikėtis pozicijų šuolio. Nauda susijusi su vizualiniu atpažinimu: vartotojai, pažįstantys jūsų piktogramą, labiau linkę pastebėti ir pasirinkti jūsų rezultatą, ypač mobiliajame, kur rezultatai kompaktiški.

Patogumas, kai atidaryta daug skirtukų

Kai naršyklėje atidaryta dvidešimt skirtukų, pavadinimai sutrumpėja iki nieko ir lieka tik favicon. Išskirtinė piktograma leidžia žmonėms akimirksniu rasti jūsų skirtuką ir į jį sugrįžti, užuot atidarius dublikatą ar apie jį pamiršus.

Profesionalus įspūdis

Gerai suprojektuotas favicon rodo tą patį dėmesį detalėms kaip ir likusi jūsų svetainė. Produktų puslapiams, dokumentacijai, tinklaraščiams ir žiniatinklio programėlėms – tai vienas pigiausių šlifavimo elementų, kuriuos galite pridėti.

Skirtukų radimo prieinamumas

Piktogramos padeda vartotojams, kurie žvelgia vizualiai, o ne skaito, įskaitant disleksiją ar pažinimo skirtumų turinčius žmones, ir visiems, kurie greitai perjungia užduotis. Didelio kontrasto piktogramą su paprasta forma lengviau išskirti. Vis dėlto atminkite, kad favicon yra papildinys: jis nepakeičia aiškaus puslapio pavadinimo, kuriuo remiasi ekrano skaitytuvai ir pagalbinės technologijos.

Kas nutinka, jei neturite favicon

Naršyklės automatiškai prašo /favicon.ico iš jūsų domeno šaknies, net jei jūsų HTML jo neminima. Jei failo nėra, nutinka keletas dalykų:

• Bendrinė piktograma: lankytojai skirtuke ir žymėse mato numatytąją gaublio, dokumento ar tuščią piktogramą, kuri atrodo anonimiškai.
• 404 klaidos žurnaluose: kiekviena naršyklė, prašanti failo, sukuria nepavykusią užklausą. Judriose svetainėse tai prideda triukšmo prieigos žurnaluose, klaidų stebėjime ir analitikoje ir gali paslėpti tikras problemas.
• Nėra piktogramos „Google“ rezultatuose: be tinkamo, nuskaitomo favicon „Google“ šalia jūsų įrašo rodo numatytąjį pakaitinį ženklą.
• Veltui eikvojamos užklausos: naršyklės gali kartoti užklausas, taip sukurdamos nedidelę, bet beprasmę apkrovą jūsų serveriui.

Net labai paprasta piktograma geriau nei jokia, nes pašalina 404 klaidas ir suteikia vartotojams ką nors atpažįstama.

Favicon formatai paaiškinti

Nė vienas formatas neapima visų platformų, todėl dauguma svetainių naudoja nedidelį failų rinkinį.

Senesni „Windows“ plytelių vaizdai (konfigūruojami per browserconfig.xml) buvo reikalingi „Internet Explorer 11“ ir senajam „Edge“. Dabar jų retai prireikia, nebent turite palaikyti tas aplinkas.

„Google“ favicon gairės paieškos rezultatams

Jei norite, kad jūsų piktograma atsirastų „Google“ paieškoje, laikykitės „Google“ paskelbtų reikalavimų:

• Dydis: vaizdas turi būti kvadratinis (1:1) ir 48 pikselių kartotinis, pavyzdžiui, 48x48, 96x96 arba 144x144. Tada „Google“ sumažina jį iki 16x16 rodymui. Mažiausias palaikomas dydis yra 8x8, tačiau rekomenduojama 48x48 arba didesnis.
• Formatai: tinka bet kuris naršyklių palaikomas formatas, įskaitant ICO, PNG ir SVG.
• Stabilus URL: nekeiskite favicon URL dažnai. Stabilus adresas padeda „Google“ išlaikyti jūsų piktogramą atnaujintą.
• Nuskaitomas: tiek favicon failas, tiek jūsų pagrindinis puslapis turi būti pasiekiami „Googlebot“. Neblokuokite jų faile robots.txt ir neslėpkite už prisijungimo.
• Viena deklaracija svetainei: piktograma susieta su svetainės pagrindiniu puslapiu, todėl žymą <link> įdėkite į pagrindinio puslapio head dalį.
• Reprezentatyvus ir tinkamas: piktograma turėtų atspindėti jūsų prekės ženklą, o įžeidžiančią ar klaidinančią „Google“ gali pakeisti numatytąja.

Kai paskelbiate ar pakeičiate favicon, „Google“ gali prireikti nuo kelių dienų iki kelių savaičių, kad jį iš naujo nuskaitytų ir atnaujintų, todėl nesitikėkite akimirksniu pasikeitimo.

Kaip greitai sukurti favicon su „MakeFav“

Jums nereikia dizaino programų ar komandinės eilutės. „MakeFav“ generatorius iš vieno šaltinio vaizdo sukuria aukščiau aprašytus failus.

1. Paruoškite grafiką. Naudokite kvadratinį logotipą ar simbolį, kurio dydis 512 x 512 px arba didesnis. Paprastos formos veikia geriausiai, nes piktograma bus matoma 16 px dydžio.
2. Įkelkite ją „MakeFav“ pagrindiniame puslapyje arba atidarykite redaktorių, kad prieš eksportuodami pakoreguotumėte vaizdą, foną ir paraštes.
3. Peržiūrėkite rezultatą mažais dydžiais ir šviesiame bei tamsiame fone, kad įsitikintumėte, jog jis lieka įskaitomas.
4. Atsisiųskite paketą. Jame yra ICO, PNG dydžiai, Apple touch piktograma, manifesto piktogramos ir HTML fragmentas, kurį reikia įklijuoti.
5. Įkelkite failus į svetainės šaknį, kad jie būtų pasiekiami tokiais keliais kaip /favicon.ico.
6. Pridėkite HTML į kiekvieno puslapio <head> arba į bendrą maketą ar šabloną.
7. Patikrinkite su favicon tikrintuvu, tada išvalykite naršyklės talpyklą ir perkraukite puslapį, kad pamatytumėte naują piktogramą.

HTML fragmento pavyzdys

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Atributas sizes="48x48" ICO nuorodoje padeda naršyklėms, palaikančioms SVG, pasirinkti būtent jį, o ICO lieka kaip atsarginis variantas. 96 px PNG atitinka „Google“ 48 kartotinio taisyklę.

Žiniatinklio programėlės manifesto pavyzdys

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Jei dirbate su kūrimo (build) procesais arba norite automatizuoti piktogramų kūrimą, žr. kūrėjų išteklius.

Dizaino patarimai, kad favicon veiktų

• Venkite sudėtingumo. Viena forma, viena raidė ar drąsi monograma yra geriau nei detalus logotipas, kuris 16 px dydžiu virsta košė.
• Naudokite stiprų kontrastą. Įsitikinkite, kad piktograma matoma tiek šviesiose, tiek tamsiose naršyklės temose. Padeda spalvota fono plytelė.
• Venkite teksto. Vienos inicialo užtenka; žodžiai tokio dydžio neįskaitomi.
• Palikite šiek tiek paraštės maskuojamoms ir suapvalintų kampų piktogramoms, kad nieko svarbaus neapkirptų.
• Išlikite nuoseklūs su logotipu ir prekės ženklo spalvomis, kad favicon stiprintų atpažįstamumą.
• Išbandykite tikruose įrenginiuose ir patikrinkite, kaip jis atrodo skirtuke, žymėje ir „Google“ rezultate.

Dažniausios favicon problemos

Jei jūsų piktograma nerodoma, dažniausios priežastys yra talpykla, neteisingi keliai ir užblokuoti failai. Naršyklės favicon talpina labai agresyviai, todėl dažnai pakanka priverstinio atnaujinimo arba naujo privataus lango, kad pamatytumėte pakeitimus. Patikrinkite, ar failo URL grąžina 200 būseną ir teisingą turinio tipą, ir ar žyma <link> yra <head> viduje. Dėl paieškos įsitikinkite, kad robots.txt neblokuoja piktogramos ar pagrindinio puslapio. „MakeFav“ tikrintuvas gali padėti greitai pastebėti šias problemas.

Dažnai užduodami klausimai

Ką reiškia favicon?

Favicon yra sutrumpinimas iš „favorite icon“ (mėgstamiausia piktograma). Pavadinimas kilo iš „Internet Explorer 5“, kuri 1999 m. pirmą kartą panaudojo mažą piktogramos failą naršyklės Mėgstamiausių sąrašo įrašams papuošti. Terminas prigijo, nors piktograma dabar rodoma daugybėje kitų vietų.

Ar favicon padeda SEO?

Favicon nėra tiesioginis reitingavimo veiksnys. Vis dėlto jis rodomas šalia jūsų svetainės pavadinimo „Google“ rezultatuose mobiliajame ir kompiuteryje, todėl gali pagerinti prekės ženklo atpažįstamumą ir įrašo vizualinį patrauklumą, o tai gali netiesiogiai padidinti paspaudimus. „Google“ gairių laikymasis padaro piktogramą tinkamą rodyti.

Kokio dydžio turėtų būti favicon?

„Google“ paieškai naudokite kvadratinį vaizdą, kurio dydis yra 48 pikselių kartotinis, pavyzdžiui, 48x48 arba 96x96. Platesnei aprėpčiai taip pat pateikite ICO failą, 180x180 Apple touch piktogramą ir 192x192 bei 512x512 manifesto piktogramas. SVG yra gera papildoma galimybė dėl keičiamo dydžio.

Ar vis dar reikia favicon.ico, jei naudoju PNG ar SVG?

Tai vis dar gera idėja. Naršyklės ir kai kurios priemonės pagal numatytuosius nustatymus prašo /favicon.ico, o senesnė programinė įranga jį naudoja. ICO failo laikymas svetainės šaknyje apsaugo nuo 404 klaidų ir suteikia saugų atsarginį variantą, kai SVG ar PNG nepalaikomi.

Kodėl mano favicon neatsinaujina?

Naršyklės ir paieškos sistemos favicon talpina ilgam. Pabandykite priverstinį atnaujinimą, privatų langą arba išvalykite talpyklą. Įsitikinkite, kad failo kelias teisingas ir pateikiamas naujas failas. „Google“ paieškoje pakeistą piktogramą iš naujo nuskaityti ir atnaujinti gali prireikti kelių dienų ar savaičių.