Kui oled kunagi avanud brauseris mitu veebilehte korraga, oled kindlasti märganud väikeseid ikoone lehe nime kõrval. Facebookil on sinine „f“, YouTube’il punane mängimisnupp ning paljudel ettevõtetel oma logo või selle lihtsustatud versioon. Seda väikest, kuid väga olulist elementi nimetatakse faviconiks.
Esmapilgul võib favicon tunduda veebilehe kujunduses üsna tühise detailina. Tegelikult aitab see parandada kasutajakogemust, muuta ettevõtte visuaalse identiteedi tugevamaks ning eristada sinu veebilehte kümnete teiste avatud veebilehtede seast.
Fotol Google-i, Claude-i ning Facebooki faviconid.
Aga mis on favicon täpsemalt, miks seda vaja on ja kuidas favicon WordPressi veebilehele lisada?
Favicon lihtsalt selgitatuna
Sõna “favicon” tuleb ingliskeelsest väljendist favorite icon. Tegu on väikese ruudukujulise pildifailiga, mida brauser kuvab.
Kõige sagedamini näed faviconi:
-brauseri vahekaardil veebilehe pealkirja kõrval;
-brauseri järjehoidjate ehk bookmark’ide hulgas;
-veebibrauseri ajaloos;
-mobiilseadmes, kui veebileht lisatakse avakuvale;
-otsingutulemustes veebilehe nime kõrval.
Kuigi favicon on visuaalselt tilluke, on see üks esimesi asju, mida kasutaja sinu brändist märkab. Sageli isegi enne, kui ta jõuab lehe sisu lugeda.
Favicon on tavaliselt ettevõtte logo, logo sümbol, ettevõtte nime esitäht või mõni muu lihtsalt äratuntav kujund.
Oluline on arvestada, et favicon kuvatakse väga väikesena. Seetõttu ei sobi tavaliselt faviconiks detailirohke logo koos pika ettevõtte nime või sloganiga.
Miks favicon üldse vajalik on?
Tehniliselt töötab veebileht ka ilma faviconita. Külastaja saab lehel ringi liikuda, teenuseid vaadata ja kontaktivormi täita ka siis, kui favicon puudub.
See ei tähenda aga, et favicon oleks ebavajalikum. Toon siin välja mõned punktid, miks võiks igal veebilehel olla favicon olemas.
1. Favicon muudab veebilehe professionaalsemaks
Veebilehe puhul kujundavad usaldusväärsuse sageli just väikesed detailid.
Kui ettevõtte veebilehel on korralik disain, läbimõeldud värvid ja professionaalne logo, kuid brauseri vahekaardil kuvatakse vaikimisi WordPressi või veebimajutuse ikoon, võib tulemus tunduda lõpetamata.
Korrektselt lisatud favicon annab märku, et veebilehe detailidele on tähelepanu pööratud.
2. Favicon aitab sinu brändi ära tunda
Veebikasutajal võib olla korraga avatud kümme või isegi kakskümmend brauseri vahekaarti.
Sellises olukorras muutuvad lehtede pealkirjad kiiresti liiga kitsaks ja neid pole enam võimalik täielikult lugeda. Väike ikoon jääb aga nähtavaks.
Kui sinu favicon kasutab sama sümbolit või värve nagu ettevõtte logo, tunneb külastaja sinu veebilehe teiste vahekaartide seast kiiremini ära.
Seega on favicon osa sinu ettevõtte visuaalsest identiteedist.
3. Favicon parandab kasutajakogemust
Favicon aitab kasutajal eristada sinu veebilehte konkurentide seast, leida kodulehte kiiremini salvestatud järjehoidjate seast või brauseri vahekaardilt.
Milline peaks hea favicon olema?
Faviconi puhul töötab põhimõte „vähem on rohkem“.
Kui sinu logo koosneb mitmest sõnast, sümbolist ja väikesest tekstist, ei ole mõistlik kogu logo faviconiks suruda. Väikeses formaadis muutub see lihtsalt arusaamatuks.
Hea favicon võiks olla:
1. Lihtne.
Kasuta ühte selgelt eristatavat sümbolit või tähte.
2. Kontrastne.
Ikoon peaks olema nähtav nii heledal kui võimalusel ka tumedal taustal.
3. Brändiga kooskõlas.
Kasuta samu värve, kujundeid või visuaalset stiili, mida kasutatakse sinu veebilehel ja logos.
4. Äratuntav ka väikesena.
Vaata faviconi kindlasti päriselt brauseri vahekaardil, mitte ainult suure kujundusfailina.
Näiteks kui sinu ettevõtte nimi on „Roheline Stuudio“ ja logo sisaldab nime kõrval lehekujulist sümbolit, võib faviconiks sobida ainult seesama lehesümbol.
Millises suuruses favicon teha?
Tänapäeval kasutatakse faviconi erinevates seadmetes ja keskkondades, mistõttu tasub algfail luua piisavalt kvaliteetsena. WordPress soovitab veebilehe ikooni puhul tavaliselt kasutada ruudukujulist pilti mõõtmetega vähemalt 512 × 512 pikslit.
See ei tähenda, et brauser näitaks faviconi nii suurelt. Brauseris kuvatakse see märksa väiksemas mõõdus, kuid suurem algfail võimaldab erinevatel seadmetel luua vajaliku suurusega versioone.
Kui faviconil peab olema läbipaistev taust, on PNG eriti mugav valik.
Fotol faviconid järjehoidjaribal.
Kuidas lisada favicon WordPressi veebilehele?
WordPressis on faviconi lisamine üldjuhul lihtne ning selleks ei ole vaja koodi kirjutada.
Sõltuvalt kasutatavast WordPressi teemast ja versioonist võib seadistuse täpne asukoht veidi erineda, kuid tavaliselt leiad selle veebilehe identiteedi või üldiste kujundusseadete alt.
- logi sisse WordPressi haldusesse;
- ava saidi seaded/sätted;
- otsi valikut Site Icon, Website Icon või Veebisaidi ikoon;
- laadi üles ruudukujuline favicon;
- salvesta muudatused;
- kontrolli tulemust veebibrauseris.
Kui kasutad Elementoriga loodud WordPressi veebilehte või mõnda eraldi WordPressi teemat, võib faviconi seadistus asuda ka teema või saidi üldseadetes.
Pärast faviconi muutmist ei pruugi uus ikoon kohe nähtavale ilmuda. Brauserid salvestavad faviconi tihti vahemällu. Sellisel juhul tasub tühjendada brauseri ja veebilehe cache või kontrollida lehte inkognito aknas.
Edukat faviconi seadistamist! – Katrin Aas
Jälgi mind Instagramis.
Kui leidsid, et lugu oli kasulik, jaga seda ka sõbraga.👇