Hvað er favicon og hvers vegna skiptir það máli fyrir vefsíðuna þína?

Favicon (stytting á "favorite icon", eða uppáhaldstákn) er litla ferningslaga myndin sem stendur fyrir vefsvæði í vafraflipum, bókamerkjum, ferilslistum, leitarniðurstöðum Google, á upphafsskjám síma og í uppsettum vefforritum. Hún skiptir máli því hún gefur vefsvæðinu þínu auðþekkjanlegt andlit í fljótu bragði, gerir það auðveldara að finna það meðal margra opinna flipa, gefur til kynna að vefsvæðið sé fagmannlegt og áreiðanlegt og birtist nú við hlið heitis vefsvæðisins þíns í niðurstöðum Google. Án hennar sjá gestir almennt hnattartákn eða tóma síðumynd og þjónninn þinn fyllir annála sína af 404-villum. Þú getur búið til heilt favicon-sett ókeypis með favicon-smiðjunni MakeFav.

Hvað er favicon?

Favicon er lítil, merkt táknmynd, yfirleitt einfölduð útgáfa af merki, einum staf eða tákni, sem vafrar og annar hugbúnaður sækja af vefsvæðinu þínu og birta hvar sem þörf er á þéttu myndrænu auðkenni. Í vafra á tölvu er hún yfirleitt teiknuð í 16 sinnum 16 CSS-díflum, en skráin sjálf ætti að vera stærri svo hún haldist skýr á skjám með mikla punktaþéttni.

Tæknilega séð er favicon einfaldlega myndskrá sem vísað er í úr HTML-kóðanum þínum (eða er að finna á sjálfgefnum stað) og vafrar sækja sérstaklega, aðskilið frá efni síðunnar. Í dag er "favicon" sjaldan ein skrá. Nútímavefsvæði býður yfirleitt upp á nokkrar útgáfur af sömu táknmynd svo að vafrar, leitarvélar, iOS og Android fái öll snið og stærð sem hentar þeim.

Stutt saga favicon

Favicon á rætur sínar að rekja til mars 1999, þegar Microsoft gaf út Internet Explorer 5. Vafrinn leyfði notendum að vista síður á "Favorites"-lista og leitaði einnig að lítilli táknmyndaskrá sem hét favicon.ico í rót vefsvæðisins til að birta við hverja vistaða færslu. Hugmyndin var einföld: ef vefsvæði bauð upp á /favicon.ico birtist táknmyndin við hlið bókamerkisins.

Aðrir vafrar tóku eiginleikann fljótt upp og flipavafur gerði hann mun gagnlegri. Eftir því sem flipar urðu helsta leið fólks til að rata um vefinn breyttist favicon úr skreytingu á bókamerkjum í mikilvægt leiðsagnartæki. Með árunum þróaðist aðferðin:

• Snemma á 21. öld: með <link rel="icon"> gátu vefsvæði vísað á táknmynd á hvaða vefslóð sem var í stað þess að vera bundin við rótina, og vafrar aðrir en IE fóru að taka við PNG- og GIF-skrám.
• 2010–2019: Apple kynnti apple-touch-icon fyrir upphafsskjái í iOS og Android og Windows bættu við eigin venjum, svo sem táknmyndum í manifest-skrá og flísamyndum.
• Í dag: SVG-favicon, manifest-skrár vefforrita, táknmyndir sem laga sig að dökkri stillingu og kröfur Google um favicon í leitarniðurstöðum hafa gert favicon að litlum en raunverulegum hluta af tæknilegri uppsetningu vefsvæðis.

Hvar favicon birtast í dag

Favicon-táknið þitt birtist á mun fleiri stöðum en í vafraflipanum. Helstu staðirnir eru:

• Vafraflipar: sýnilegasti staðurinn, þar sem táknmyndin er oft það eina sem sést þegar margir flipar eru opnir.
• Bókamerki og uppáhöld: táknmyndin situr við hlið titils síðunnar í bókamerkjastikum og valmyndum.
• Ferill og mest heimsóttu síður: vafrar sýna favicon í ferilslistum og á nýjum flipasíðum.
• Leitarniðurstöður Google: bæði í snjalltækjum og tölvum birtir Google favicon vefsvæðis við hlið heitis og vefslóðar.
• Upphafsskjáir: þegar gestur bætir vefsvæðinu þínu á upphafsskjá í iOS eða Android verður snertitáknið eða manifest-táknið að flýtileið í stíl smáforrits.
• Uppsett PWA: framsækið vefforrit (PWA) notar táknmyndirnar í manifest-skrá sinni fyrir ræsitákn, ræsiskjá og verkefnaskiptingu.
• Windows-flísar og fest vefsvæði: eldri útgáfur af Windows og Edge notuðu flísamyndir sem skilgreindar voru fyrir fest vefsvæði; nýrri útgáfur nota að mestu venjulegu táknmyndirnar þínar.
• Forskoðun tengla í sumum forritum: ákveðin spjall- og framleiðniforrit (Slack er vel þekkt dæmi) sýna favicon vefsvæðis við hlið útbreidds tengils. Flestar forskoðanir byggjast aðallega á Open Graph-myndum, en favicon leggur oft til litla vörumerkið.

Hvers vegna favicon skiptir máli fyrir vefsvæðið þitt

Vörumerkjaþekking

Fólk þekkir liti og form hraðar en það les texta. Samræmd táknmynd sem endurtekur sig í flipum, bókamerkjum og leitarniðurstöðum byggir upp kunnugleika í hvert sinn sem einhver sér hana, sem er ókeypis vörumerkjakynning við hverja heimsókn.

Traust og trúverðugleiki

Vefsvæði án favicon lítur út fyrir að vera óklárað. Hrein og rétt birt táknmynd er lítið merki um að einhver hugsi um smáatriðin, sem styður þá upplifun að vefsvæðið sé áreiðanlegt. Hún er ekki öryggiseiginleiki og vefveiðasíður geta afritað táknmyndir, en auð sjálfgefin táknmynd hjálpar fyrirtæki sjaldan að líta út fyrir að vera rótgróið.

Smellihlutfall í leitarniðurstöðum

Þar sem Google sýnir favicon við hlið færslunnar þinnar verður það hluti af því hvernig niðurstaðan þín lítur út við hlið keppinauta. Google birtir ekki upplýsingar um áhrif favicon á röðun og þú ættir ekki að búast við hærri röðun. Ávinningurinn snýst um sjónræna þekkingu: notendur sem þekkja táknið þitt eru líklegri til að koma auga á niðurstöðuna þína og velja hana, sérstaklega í snjalltækjum þar sem niðurstöður eru þéttar.

Notagildi þegar margir flipar eru opnir

Þegar vafri hefur tuttugu flipa opna eru titlar styttir niður í ekkert og favicon er það eina sem eftir stendur. Auðþekkjanleg táknmynd gerir fólki kleift að finna flipann þinn samstundis og fara aftur í hann í stað þess að opna tvítekningu eða gleyma honum.

Fagmannlegt yfirbragð

Vel hannað favicon sýnir sömu vandvirkni og restin af vefsvæðinu. Hvort sem um er að ræða vörusíður, handbækur, blogg eða vefforrit er það eitt ódýrasta frágangsatriðið sem þú getur bætt við.

Aðgengi við að finna flipa

Táknmyndir hjálpa notendum sem skanna sjónrænt frekar en að lesa, þar á meðal fólki með lesblindu eða aðrar vitsmunalegar sérþarfir, og öllum sem skipta hratt á milli verkefna. Táknmynd með mikilli birtuskilum og einföldu formi er auðveldara að greina. Mundu þó að favicon er viðbót: það kemur ekki í stað skýrs síðutitils, sem skjálesarar og hjálpartækni reiða sig á.

Hvað gerist ef þú ert ekki með favicon

Vafrar biðja sjálfkrafa um /favicon.ico í rót lénsins þíns, jafnvel þótt HTML-kóðinn þinn nefni hana ekki. Ef skráin er ekki til gerist nokkuð af eftirfarandi:

• Almenn táknmynd: gestir sjá sjálfgefið hnattartákn, skjalatákn eða auða táknmynd í flipanum og bókamerkjum, sem virkar nafnlaust.
• 404-villur í annálum: hver vafri sem biður um skrána býr til misheppnaða beiðni. Á fjölförnum vefsvæðum bætir það hávaða í aðgangsannála, villuvöktun og greiningar og getur falið raunveruleg vandamál.
• Engin táknmynd í niðurstöðum Google: án gilds favicon sem hægt er að skríða birtir Google sjálfgefna staðgengilsmynd við hlið færslunnar þinnar.
• Óþarfa beiðnir: vafrar geta reynt aftur, sem bætir litlu en tilgangslausu álagi á þjóninn þinn.

Jafnvel mjög einföld táknmynd er betri en engin, því hún losar þig við 404-villurnar og gefur notendum eitthvað auðþekkjanlegt.

Favicon-snið útskýrð

Ekkert eitt snið nær yfir alla vettvanga, þannig að flest vefsvæði nota lítið safn skráa.

Eldri Windows-flísamyndir (stilltar með browserconfig.xml) þurfti fyrir Internet Explorer 11 og gamla Edge. Þeirra er sjaldan þörf lengur nema þú þurfir að styðja þau umhverfi.

Leiðbeiningar Google um favicon í leitarniðurstöðum

Ef þú vilt að táknmyndin þín birtist í Google-leit skaltu fylgja birtum kröfum Google:

• Stærð: myndin verður að vera ferningslaga (1:1) og margfeldi af 48 díflum, til dæmis 48x48, 96x96 eða 144x144. Google minnkar hana síðan í 16x16 til birtingar. Lágmarksstærð sem stutt er við er 8x8, en mælt er með 48x48 eða stærri.
• Snið: hvaða snið sem vafrar styðja virkar, þar á meðal ICO, PNG og SVG.
• Stöðug vefslóð: breyttu ekki vefslóð favicon oft. Stöðugt heimilisfang hjálpar Google að halda táknmyndinni þinni uppfærðri.
• Hægt að skríða: bæði favicon-skráin og forsíðan þín verða að vera aðgengilegar fyrir Googlebot. Ekki loka á þær í robots.txt eða bak við innskráningu.
• Ein skilgreining á hvert vefsvæði: táknmyndin er bundin við forsíðu vefsvæðisins, svo settu <link>-merkið í head-hluta forsíðunnar.
• Lýsandi og viðeigandi: táknmyndin ætti að endurspegla vörumerkið þitt og Google getur skipt út táknmynd sem er móðgandi eða villandi fyrir sína sjálfgefnu.

Eftir að þú birtir eða breytir favicon getur það tekið Google daga eða vikur að skríða það aftur og uppfæra, svo ekki búast við tafarlausri breytingu.

Hvernig þú býrð til favicon fljótt með MakeFav

Þú þarft hvorki hönnunarhugbúnað né skipanalínu. MakeFav-smiðjan breytir einni upprunamynd í skrárnar sem lýst er hér að ofan.

1. Undirbúðu myndefnið. Notaðu ferningslaga merki eða tákn í 512 x 512 px eða stærra. Einföld form virka best því táknmyndin sést í 16 px.
2. Hladdu henni upp á forsíðu MakeFav, eða opnaðu ritilinn til að stilla myndina, bakgrunninn og jaðarinn áður en þú flytur út.
3. Forskoðaðu niðurstöðuna í litlum stærðum og á ljósum og dökkum bakgrunni til að tryggja að hún haldist læsileg.
4. Sæktu pakkann. Hann inniheldur ICO, PNG-stærðir, Apple touch icon, manifest-táknmyndir og HTML-kóðabútinn til að líma inn.
5. Hladdu skránum upp í rót vefsvæðisins þíns svo þær séu aðgengilegar á slóðum eins og /favicon.ico.
6. Bættu HTML-kóðanum í <head> á hverri síðu, eða í sameiginlega útlitsskrá eða sniðmát.
7. Staðfestu með favicon-athuganum, hreinsaðu síðan skyndiminni vafrans og endurhlaðaðu til að sjá nýju táknmyndina.

Dæmi um HTML-kóðabút

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

Eigindið sizes="48x48" á ICO-tenglinum hjálpar vöfrum að kjósa SVG þegar þeir styðja það en halda ICO sem varaleið. 96 px PNG-myndin uppfyllir regluna um margfeldi af 48 hjá Google.

Dæmi um manifest-skrá vefforrits

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

Ef þú vinnur með smíðaferla eða vilt sjálfvirknivæða gerð táknmynda skaltu skoða forritaraúrræðin.

Hönnunarráð fyrir favicon sem virkar

• Hafðu það einfalt. Eitt form, einn stafur eða djarft einrit er betra en nákvæmt merki sem verður að mauki í 16 px.
• Notaðu sterk birtuskil. Gakktu úr skugga um að táknmyndin sjáist bæði í ljósum og dökkum vafraþemum. Litaður bakgrunnsreitur hjálpar.
• Forðastu texta. Einn upphafsstafur er í lagi; orð eru ólæsileg í þessari stærð.
• Skildu eftir smá jaðar fyrir maskable-táknmyndir og táknmyndir með ávölum hornum svo ekkert mikilvægt skerist af.
• Vertu samkvæmur merkinu þínu og vörumerkjalitum svo favicon styrki þekkingu.
• Prófaðu á raunverulegum tækjum og athugaðu hvernig það lítur út í flipa, bókamerki og Google-niðurstöðu.

Algeng vandamál með favicon

Ef táknmyndin þín birtist ekki eru venjulegar orsakir skyndiminni, rangar slóðir og lokaðar skrár. Vafrar geyma favicon fast í skyndiminni, svo oft nægir að endurhlaða með harðri endurnýjun eða opna nýjan huliðsglugga til að sjá uppfærslur. Athugaðu að vefslóð skrárinnar skili stöðunni 200 og réttri efnisgerð og að <link>-merkið sé í <head>. Fyrir leit skaltu ganga úr skugga um að robots.txt loki hvorki á táknmyndina né forsíðuna. MakeFav-athugunin getur hjálpað þér að finna slík vandamál fljótt.

Algengar spurningar

Fyrir hvað stendur favicon?

Favicon er stytting á "favorite icon", eða uppáhaldstákn. Nafnið kemur frá Internet Explorer 5, sem árið 1999 notaði fyrstur litla táknmyndaskrá til að skreyta færslur á Favorites-lista vafrans. Hugtakið festist í sessi þótt táknmyndin birtist nú á mörgum öðrum stöðum.

Hjálpar favicon leitarvélabestun (SEO)?

Favicon er ekki beinn röðunarþáttur. Það birtist hins vegar við hlið heitis vefsvæðisins þíns í niðurstöðum Google, bæði í snjalltækjum og tölvum, og getur því bætt vörumerkjaþekkingu og sjónræna aðdráttarafl færslunnar þinnar, sem getur óbeint stutt við smelli. Með því að fylgja leiðbeiningum Google verður táknmyndin gjaldgeng til birtingar.

Hvaða stærð ætti favicon að vera?

Fyrir Google-leit skaltu nota ferningslaga mynd sem er margfeldi af 48 díflum, til dæmis 48x48 eða 96x96. Til að ná yfir fleiri tilvik skaltu einnig bjóða upp á ICO-skrá, 180x180 Apple touch icon og 192x192 og 512x512 manifest-táknmyndir. SVG er góð viðbót fyrir kvarðanleika.

Þarf ég enn favicon.ico ef ég nota PNG eða SVG?

Það er enn góð hugmynd. Vafrar og sum verkfæri biðja sjálfgefið um /favicon.ico og eldri hugbúnaður reiðir sig á hana. Með því að hafa ICO-skrá í rót vefsvæðisins forðastu 404-villur og færð örugga varaleið þegar SVG eða PNG er ekki stutt.

Hvers vegna uppfærist favicon-ið mitt ekki?

Vafrar og leitarvélar geyma favicon í skyndiminni í langan tíma. Prófaðu harða endurnýjun, huliðsglugga eða að hreinsa skyndiminnið. Gakktu úr skugga um að slóð skrárinnar sé rétt og að nýja skráin sé afgreidd. Í Google-leit getur tekið daga eða vikur að skríða breytta táknmynd aftur og uppfæra hana.