Mis on favicon ja miks see sinu veebisaidi jaoks oluline on?

Favicon (lühend sõnadest "favorite icon", ehk lemmikikoon) on väike ruudukujuline pilt, mis tähistab veebisaiti brauseri vahekaartidel, järjehoidjates, ajaloolistides, Google'i otsingutulemustes, telefoni avakuvadel ja installitud veebirakendustes. See on oluline, sest annab sinu saidile ühe pilguga äratuntava näo, aitab saiti leida paljude avatud vahekaartide hulgast, annab märku professionaalsusest ja usaldusväärsusest ning kuvatakse nüüd Google'i tulemustes saidi nime kõrval. Ilma selleta näevad külastajad üldist gloobuse- või tühja lehe ikooni ning sinu server täidab oma logid 404-vigadega. Terve favicon'ide komplekti saad luua tasuta MakeFavi favicon'i generaatoriga.

Mis on favicon?

Favicon on pisike brändigraafika, tavaliselt logo lihtsustatud versioon või üksik täht või sümbol, mille brauserid ja muu tarkvara sinu veebisaidilt tõmbavad ning kuvavad kõikjal, kus on vaja kompaktset visuaalset tunnust. Töölauabrauseris joonistatakse see tavaliselt 16 × 16 CSS-pikslina, kuigi fail ise peaks olema suurem, et see püsiks terav ka suure pikslitihedusega ekraanidel.

Tehniliselt on favicon lihtsalt pildifail, millele viidatakse sinu HTML-is (või mis asub vaikimisi asukohas) ja mida kasutajaagendid laadivad lehe sisust eraldi. Tänapäeval on "favicon" harva üksainus fail. Kaasaegne sait pakub tavaliselt sama ikooni mitut versiooni, et brauserid, otsingumootorid, iOS ja Android saaksid kõik endale sobiva vormingu ja suuruse.

Favicon'i lühiajalugu

Favicon pärineb 1999. aasta märtsist, kui Microsoft andis välja Internet Explorer 5. Brauser võimaldas kasutajatel salvestada lehti "Lemmikute" nimekirja ning otsis saidi juurkaustast ka väikest ikoonifaili nimega favicon.ico, et kuvada seda iga salvestatud kirje kõrval. Idee oli lihtne: kui sait pakkus faili /favicon.ico, ilmus ikoon järjehoidja kõrvale.

Teised brauserid võtsid funktsiooni peagi omaks ning vahekaartidega sirvimine muutis selle palju kasulikumaks. Kui vahekaartidest sai peamine navigeerimisviis, muutus favicon järjehoidjate kaunistusest oluliseks navigeerimisabiks. Aastate jooksul on lähenemine arenenud:

• 2000. aastate algus: element <link rel="icon"> võimaldas saitidel viidata ikoonile mis tahes URL-il, mitte ainult juurkaustas, ning mitte-IE brauserid hakkasid aktsepteerima PNG- ja GIF-faile.
• 2010. aastad: Apple tutvustas iOS-i avakuvade jaoks apple-touch-icon'i ning Android ja Windows lisasid oma kokkulepped, näiteks manifesti ikoonid ja paanipildid.
• Täna: SVG-favicon'id, veebirakenduse manifestid, tumeda režiimiga kohanduvad ikoonid ja Google'i otsingutulemuste favicon'i nõuded on teinud favicon'ist väikese, kuid tõelise osa saidi tehnilisest seadistusest.

Kus favicon'id täna ilmuvad

Sinu favicon'i kuvatakse palju rohkemates kohtades kui ainult brauseri vahekaardil. Peamised neist on:

• Brauseri vahekaardid: kõige nähtavam koht, kus ikoon on sageli ainus, mida näha saab, kui avatud on palju vahekaarte.
• Järjehoidjad ja lemmikud: ikoon asub lehe pealkirja kõrval järjehoidjaribadel ja menüüdes.
• Ajalugu ja enimkülastatud lehed: brauserid näitavad favicon'e ajalooloendites ja uute vahekaartide lehtedel.
• Google'i otsingutulemused: nii mobiilis kui ka töölaual kuvab Google saidi favicon'i saidi nime ja URL-i kõrval.
• Avakuvad: kui külastaja lisab sinu saidi iOS-i või Androidi avakuvale, muutub puuteikoon või manifesti ikoon rakenduselaadseks otseteeks.
• Installitud PWA-d: progressiivne veebirakendus kasutab oma veebirakenduse manifesti ikoone käivitusikoonina, käivituskuval ja rakenduste vahetajas.
• Windowsi paanid ja kinnitatud saidid: vanemad Windowsi ja Edge'i versioonid kasutasid kinnitatud saitide jaoks defineeritud paanipilte; kaasaegsed taaskasutavad enamasti sinu tavaikoone.
• Linkide eelvaated mõnes rakenduses: teatud vestlus- ja tootlikkusvahendid (tuntud näide on Slack) näitavad lahtivoldatud lingi kõrval saidi favicon'i. Enamik eelvaateid tugineb peamiselt Open Graphi piltidele, kuid favicon annab sageli väikese brändimärgi.

Miks favicon sinu veebisaidi jaoks oluline on

Brändi tuntus

Inimesed tunnevad värve ja kujundeid ära kiiremini, kui nad teksti loevad. Järjepidev ikoon, mis kordub vahekaartidel, järjehoidjates ja otsingutulemustes, loob tuttavlikkust iga kord, kui keegi seda näeb, ning see on tasuta brändi eksponeerimine igal külastusel.

Usaldus ja usaldusväärsus

Puuduv favicon muudab saidi pooleli jäänud näoga. Puhas ja õigesti kuvatud ikoon on väike märk sellest, et keegi hoolib detailidest, ning toetab muljet, et sait on legitiimne. See ei ole turvafunktsioon ja andmepüügisaidid võivad ikoone kopeerida, kuid tühi vaikeikoon aitab ettevõttel harva väljakujunenud mulje jätta.

Klikkimissagedus otsingutulemustes

Kuna Google näitab favicon'i sinu tulemuse kõrval, saab see osaks sellest, kuidas sinu tulemus konkurentide kõrval välja näeb. Google ei avalda favicon'ide mõju edetabelikohale ja sa ei peaks ootama positsioonide paranemist. Kasu seisneb visuaalses äratundmises: kasutajad, kes sinu ikooni tunnevad, märkavad ja valivad sinu tulemuse tõenäolisemalt, eriti mobiilis, kus tulemused on kompaktsed.

Kasutatavus paljude avatud vahekaartidega

Kui brauseris on avatud kakskümmend vahekaarti, lõigatakse pealkirjad olematuks ja alles jääb vaid favicon. Eristuv ikoon võimaldab inimestel sinu vahekaardi hetkega üles leida ja sinna naasta, selle asemel et avada duplikaat või see unustada.

Professionaalne mulje

Hästi kujundatud favicon näitab sama detailidele pööratud tähelepanu nagu ülejäänud sait. Nii tootelehtede, dokumentatsiooni, blogide kui ka veebirakenduste puhul on see üks odavamaid viimistluse elemente, mida lisada saad.

Vahekaartide leidmise juurdepääsetavus

Ikoonid aitavad kasutajaid, kes skaneerivad visuaalselt, mitte ei loe, sealhulgas düsleksia või kognitiivsete erinevustega inimesi ning kõiki, kes vahetavad kiiresti ülesannete vahel. Kõrge kontrastsusega lihtsa kujuga ikooni on kergem välja valida. Pea siiski meeles, et favicon on täiendus: see ei asenda selget lehe pealkirja, millele toetuvad ekraanilugejad ja abitehnoloogia.

Mis juhtub, kui sul favicon'i ei ole

Brauserid küsivad automaatselt faili /favicon.ico sinu domeeni juurkaustast, isegi kui sinu HTML seda ei maini. Kui faili ei eksisteeri, juhtub mitu asja:

• Üldine ikoon: külastajad näevad vahekaardil ja järjehoidjates vaikimisi gloobuse-, dokumendi- või tühja ikooni, mis näeb anonüümne välja.
• 404-vead sinu logides: iga brauser, mis faili küsib, tekitab ebaõnnestunud päringu. Tegusatel saitidel lisab see müra juurdepääsulogidesse, veajälgimisse ja analüütikasse ning võib päris probleemid ära peita.
• Google'i tulemustes ikooni pole: ilma kehtiva ja indekseeritava favicon'ita näitab Google sinu tulemuse kõrval oma vaikimisi kohahoidjat.
• Raisatud päringud: brauserid võivad proovida uuesti, tekitades sinu serverile väikese, kuid mõttetu koormuse.

Isegi väga lihtne ikoon on parem kui mitte ühtegi, sest see kaotab 404-vead ja annab kasutajatele midagi äratuntavat.

Favicon'i vormingud selgitatud

Ükski vorming ei kata kõiki platvorme, seega kasutab enamik saite väikest failide komplekti.

Vanu Windowsi paanipilte (seadistatakse faili browserconfig.xml kaudu) oli vaja Internet Explorer 11 ja vana Edge'i jaoks. Nüüd on neid harva vaja, välja arvatud juhul, kui pead neid keskkondi toetama.

Google'i favicon'i juhised otsingutulemuste jaoks

Kui soovid, et sinu ikoon ilmuks Google'i otsingus, järgi Google'i avaldatud nõudeid:

• Suurus: pilt peab olema ruudukujuline (1:1) ja 48 piksli kordne, näiteks 48x48, 96x96 või 144x144. Google vähendab selle kuvamiseks seejärel suuruseni 16x16. Minimaalne toetatud suurus on 8x8, kuid soovitatav on 48x48 või suurem.
• Vormingud: töötab iga brauserite toetatud vorming, sealhulgas ICO, PNG ja SVG.
• Stabiilne URL: ära muuda favicon'i URL-i sageli. Stabiilne aadress aitab Google'il sinu ikooni ajakohasena hoida.
• Indekseeritav: nii favicon'i fail kui ka sinu avaleht peavad olema Googlebotile juurdepääsetavad. Ära blokeeri neid failis robots.txt ega sisselogimise taha.
• Üks deklaratsioon saidi kohta: ikoon on seotud saidi avalehega, seega pane <link> silt oma avalehe peasse.
• Esindav ja sobiv: ikoon peaks peegeldama sinu brändi ning Google võib solvava või eksitava ikooni asendada oma vaikeikooniga.

Pärast favicon'i avaldamist või muutmist võib Google'il selle uuesti indekseerimine ja uuendamine võtta päevi kuni nädalaid, seega ära oota kohest muutust.

Kuidas MakeFaviga favicon'i kiiresti luua

Sul ei ole vaja kujundustarkvara ega käsurida. MakeFavi generaator muudab ühe lähtepildi ülalkirjeldatud failideks.

1. Valmista ette oma kujundus. Kasuta ruudukujulist logo või sümbolit suurusega 512 x 512 px või suuremat. Lihtsad kujundid töötavad kõige paremini, sest ikooni nähakse 16 px suuruses.
2. Laadi see üles MakeFavi avalehel või ava redaktor, et enne eksportimist pilti, tausta ja polsterdust kohandada.
3. Vaata eelvaadet väikestes suurustes ning heledal ja tumedal taustal, et veenduda, et see jääb loetavaks.
4. Laadi pakett alla. See sisaldab ICO-d, PNG-suurusi, Apple touch icon'it, manifesti ikoone ja kleepimiseks mõeldud HTML-lõiku.
5. Laadi failid üles oma veebisaidi juurkausta, et need oleksid kättesaadavad teedel nagu /favicon.ico.
6. Lisa HTML iga lehe elementi <head> või oma jagatud paigutusse või malli.
7. Kontrolli favicon'i kontrollijaga, seejärel tühjenda brauseri vahemälu ja laadi leht uuesti, et uut ikooni näha.

HTML-lõigu näide

<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">

Atribuut sizes="48x48" ICO-lingil aitab brauseritel eelistada SVG-d, kui nad seda toetavad, hoides ICO-d samal ajal varuvariandina. 96 px PNG vastab Google'i 48 kordsuse reeglile.

Veebirakenduse manifesti näide

{
  "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"
}

Kui töötad ehitusvoogudega või soovid ikoonide loomist automatiseerida, vaata arendajate ressursse.

Kujundusnõuanded töötava favicon'i jaoks

• Hoia see lihtne. Üks kujund, üks täht või jõuline monogramm on parem kui detailne logo, mis muutub 16 px suuruses püreeks.
• Kasuta tugevat kontrasti. Veendu, et ikoon on nähtav nii heledas kui ka tumedas brauseriteemas. Värviline taustaplaat aitab.
• Väldi teksti. Üks initsiaal sobib; sõnad on selles suuruses loetamatud.
• Jäta veidi polsterdust maskable- ja ümarate nurkadega ikoonide jaoks, et midagi olulist ära ei lõigataks.
• Püsi järjepidev oma logo ja brändivärvidega, et favicon tugevdaks äratundmist.
• Testi päris seadmetes ja vaata, kuidas see välja näeb vahekaardil, järjehoidjas ja Google'i tulemuses.

Levinumad favicon'i probleemid

Kui sinu ikoon ei ilmu, on tavalised põhjused vahemällu salvestamine, valed teed ja blokeeritud failid. Brauserid salvestavad favicon'e agressiivselt vahemällu, seega piisab värskenduste nägemiseks sageli kõvast värskendamisest või uuest privaatsest aknast. Kontrolli, et faili URL tagastab 200 staatuse ja õige sisutüübi ning et silt <link> asub elemendis <head>. Otsingu jaoks veendu, et robots.txt ei blokeeri ikooni ega avalehte. MakeFavi kontrollija aitab neid probleeme kiiresti avastada.

Korduma kippuvad küsimused

Mida favicon tähendab?

Favicon on lühend sõnadest "favorite icon" ehk lemmikikoon. Nimi pärineb Internet Explorer 5-st, mis kasutas 1999. aastal esimest korda väikest ikoonifaili brauseri Lemmikute nimekirja kirjete kaunistamiseks. Termin jäi kasutusse, kuigi ikoon ilmub nüüd paljudes teistes kohtades.

Kas favicon aitab SEO-d?

Favicon ei ole otsene edetabelitegur. Siiski ilmub see Google'i tulemustes nii mobiilis kui ka töölaual sinu saidi nime kõrvale, seega võib see parandada brändi tuntust ja sinu tulemuse visuaalset atraktiivsust, mis võib kaudselt klikke toetada. Google'i juhiste järgimine teebki ikooni kuvamiskõlblikuks.

Mis suurusega peaks favicon olema?

Google'i otsingu jaoks kasuta ruudukujulist pilti, mis on 48 piksli kordne, näiteks 48x48 või 96x96. Laiema katvuse jaoks paku ka ICO-faili, 180x180 Apple touch icon'it ning 192x192 ja 512x512 manifesti ikoone. SVG on skaleeritavuse jaoks hea täiendus.

Kas ma vajan favicon.ico-d, kui kasutan PNG-d või SVG-d?

See on endiselt hea mõte. Brauserid ja mõned tööriistad küsivad vaikimisi faili /favicon.ico ning vanem tarkvara toetub sellele. ICO-faili hoidmine saidi juurkaustas hoiab ära 404-vead ja annab turvalise varuvariandi, kui SVG-d või PNG-d ei toetata.

Miks minu favicon ei uuene?

Brauserid ja otsingumootorid salvestavad favicon'e pikaks ajaks vahemällu. Proovi kõva värskendamist, privaatset akent või vahemälu tühjendamist. Veendu, et faili tee on õige ja uus fail serveeritakse. Google'i otsingus võib muudetud ikooni uuesti indekseerimine ja uuendamine võtta päevi või nädalaid.