Content Marketing

Bestu starfsvenjur til að útfæra favicon fyrir vefsíðuna þína

Þegar þeir voru upphaflega kynntir, var favicon tilnefnt mynd til að sýna þegar notendur vistuðu a URL flýtileið á skjáborðinu sínu. Í dag getur uppáhald vefsvæðis þíns birst í vafraflipa, tölvupóstforritum, deilingum á samfélagsmiðlum og leitarniðurstöðum.

Favicon er nú nauðsynlegur vörumerkisþáttur allra vefsíðna en gleymist oft… þeir ættu ekki að vera það. Uppástungur eru venjulega birtar á ýmsum stöðum í vafra til að hjálpa notendum að bera kennsl á og bókamerkja vefsíður. Hér eru nokkur lykilatriði varðandi favicons:

  • Vafraflipar: Þegar notendur opna vefsíðu í vafra birtist favicon í vafraflipanum við hlið síðuheitisins. Þetta veitir sjónrænt auðkenni fyrir opna flipann, sem gerir það auðveldara fyrir notendur að finna og skipta á milli margra flipa.
  • Bókamerki og eftirlæti: Þegar notendur bóka eða vista vefsíðu sem uppáhald birtist favicon oft við hlið nafns vefsíðunnar í bókamerkja- eða uppáhaldsvalmyndinni. Það hjálpar notendum að bera kennsl á og nálgast vistaðar vefsíður sínar fljótt.
  • Veffangastiku vafra: Í sumum vöfrum, þegar notendur heimsækja vefsíðu, birtist favicon í veffangastiku vafrans eða spjallboxi. Þetta bætir sjónrænum þætti við vefslóð vefsíðunnar.
  • leitarniðurstöður: Sumar leitarvélar kunna að birta leturmyndir við hlið leitarniðurstaðna, sem auðvelda notendum að bera kennsl á vefsíður í leitarskrám.

Favicon er lítil, táknræn framsetning á vefsíðu sem eykur upplifun notenda með því að veita sjónrænar vísbendingar um auðkenningu vefsíðu, bókamerki og flipastjórnun innan vafra. Það er mikilvægur þáttur í vefhönnun og vörumerki.

Táknskráargerðir

Upphaflega kröfðust þeir an ICO skrá, en hafa þróast með mörgum kerfum sem geta sýnt PNG og SVG skrár. ICO skrár geta talist samansafn af mörgum táknmyndum í eina skrá. Þegar þú býrð til ICO skrá, seturðu saman mismunandi táknmyndir af ýmsum stærðum og litadýpt í eina skrá með ákveðna uppbyggingu. Svona virkar ICO skrá:

  1. Margar táknmyndir: ICO skrá inniheldur venjulega margar táknmyndir með mismunandi stærðum og litadýpt. Þessar myndir tákna sama táknið en eru hannaðar til að birtast í mismunandi stærðum án þess að tapa gæðum.
  2. Táknskrá: Innan ICO skránnar er táknaskrá sem tilgreinir eiginleika hverrar táknmyndar, þar á meðal stærð hennar, litadýpt og staðsetningu innan skráarinnar.
  3. Upplýsingar fyrir haus: ICO skráin inniheldur einnig hausupplýsingar sem veita nauðsynlegar upplýsingar um skrána, svo sem fjölda táknmynda sem geymdar eru í skránni.
  4. Myndgögn: Hver táknmynd í ICO skránni er geymd sem hrá myndgögn án þjöppunar. Þetta gerir kleift að nálgast einstaka táknmyndir fljótt og birta með hugbúnaði.
  5. Sækja táknmynd: Þegar forrit eða stýrikerfi þarf að sýna tákn sem tengist skrá, möppu, flýtileið eða forriti getur það sótt viðeigandi táknmynd úr ICO skránni miðað við æskilega stærð og litadýpt.

ICO

Kostir:

  • Víðtækur stuðningur: ICO er hefðbundið favicon snið sem er víða stutt af ýmsum vöfrum, þar á meðal eldri útgáfum. Það er öruggt val til að tryggja eindrægni.
  • Margar stærðir og litadýpt: ICO skrár geta innihaldið margar táknmyndir af mismunandi stærðum og litadýpt, sem gerir favicon kleift að birtast vel í ýmsum samhengi.

Ókostir:

  • Takmarkaður stigstærð: ICO tákn stækka ekki eins vel og vektorsnið eins og SVG. Þegar þau eru sýnd í óstöðluðum stærðum geta ICO táknin birst pixluð.

PNG

Kostir:

  • Taplaus þjöppun: PNG favicons bjóða upp á tapslausa þjöppun, sem tryggir há myndgæði með litlum skráarstærðum. Þetta er sérstaklega gagnlegt fyrir skörp og nákvæm tákn.
  • Gagnsæi: PNG styður alfa gagnsæi, sem gerir kleift að flókna og hálfgagnsæra hönnun sem blandast óaðfinnanlega við bakgrunninn.
  • Stuðningur í nútíma vöfrum: PNG er vel studd af nútíma vöfrum og býður upp á góða eindrægni.

Ókostir:

  • Margar skrár: Til að ná yfir ýmsar stærðir og upplausnir gætirðu þurft að útvega margar PNG skrár í mismunandi stærðum, sem getur aukið fjölda HTTP beiðna.
  • Skortur á vektorstuðningi: PNG er rastersnið, þannig að það mælist ekki eins þokkafullt og vektorsnið eins og SVG.

SVG

Kostir:

  • Vektor-undirstaða: SVG er vektorsnið, sem þýðir að það getur skalast án þess að missa gæði. Það er tilvalið til að búa til skörp, hágæða tákn í hvaða stærð sem er.
  • Lítil skráarstærð: SVG skrár eru oft minni að stærð miðað við raster hliðstæða þeirra, sem gerir þær skilvirkar til notkunar á vefnum.
  • Fjölhæfni: SVG gerir ráð fyrir flókinni og listrænni hönnun, þar á meðal marglita táknum, halla og flóknum formum.
  • CSS stíll: Auðvelt er að stilla SVG uppáhaldsmyndir með CSS, sem býður upp á meiri sveigjanleika í hönnun.

Ókostir:

  • Samhæfni vafra: Þó að nútíma vafrar styðji SVG favicons, gætu eldri vafrar haft takmarkaðan eða engan stuðning. Það er nauðsynlegt að bjóða upp á varasnið eins og ICO eða PNG fyrir víðtækari eindrægni.
  • Flækjustig: Það getur verið flóknara að hanna SVG tákn, sérstaklega fyrir þá sem ekki þekkja vektorgrafíkhugbúnað.

Val á favicon sniði fer eftir hönnunarkröfum þínum og hversu samhæfni þú vilt ná. ICO er öruggt val fyrir víðtækari eindrægni, PNG býður upp á taplaus gæði og gagnsæi og SVG er tilvalið fyrir sveigjanleika og flókna hönnun en krefst vandlegrar skoðunar á vafrastuðningi og varahlutum. Með því að nota blöndu af sniðum, eins og sýnt er í eftirfarandi dæmum, getur þú tryggt hámarks eindrægni og gæði fyrir uppáhaldssíðu vefsíðunnar þinnar.

Hvernig á að búa til ICO skrá

Það er frekar skrítið að mínu mati að Adobe Illustrator og Photoshop búa ekki sjálfgefið til .ICO skrár (viðbætur eru til). Þú getur þó gefið út hverja mismunandi myndstærð með því að nota þær... og smíða þær síðan með einhverri af eftirfarandi aðferðum:

  • GIMP styður innbyggt ICO skrár. Það er ókeypis, opinn vettvangur sem er fáanlegur fyrir öll stýrikerfi.
  • ImageMagick er ókeypis, opinn uppspretta þjónusta sem þú getur hlaðið inn á tölvuna þína eða Mac, sem gerir þér kleift að sameina margar skrár þínar í ICO skrá. Dæmi skipun:
convert image1.png image2.png image3.png favicon.ico
  • Það eru líka verkfæri á netinu sem geta hjálpað þér að búa til .ICO skrá, en þú þarft að velja vandlega. Margir breyta stærð einni myndskrár sem hlaðið er upp og þjappa hverri illa saman. Favicon.io er ókeypis vefsíða sem gerir þér kleift að hlaða upp og byggja ICO skrána þína. Notaðu alltaf stærstu skráarstærðina og upplausnina þegar þú notar pallinn, þar sem það mun búa til smærri myndastærðir sjálfkrafa.

Þú vilt gera tilraunir með ICO skrána þína. Einfaldlega að minnka lógóið þitt í tákn sem er 16px ferningur getur gert það óaðgreinanlegt. Þú munt jafnvel sjá að okkar er ekki allt lógóið okkar, bara M frá lógóinu okkar.

mynd 3
Heimild: Favicon Checker

Athugaðu Favicon vefsíðunnar þinnar

Favicon HTML bestu starfsvenjur

Vafrar forgangsraða vali á favicons byggt á nokkrum þáttum, þar á meðal sniði, stærð og tilvist sérstakra yfirlýsinga. Svona forgangsraða vafrar venjulega og velja uppáhaldsmyndir:

  1. Forgangur skráarsniðs: Vafrar setja venjulega .ico skrár í forgang þegar þær eru til staðar, þar sem þetta er hefðbundið favicon snið. Ef þú gefur upp .ico favicon með því að nota <link rel="icon" type="image/x-icon" href="favicon.ico">, mun það oft hafa forgang fram yfir önnur snið.
  2. Forgangur stærðar: Vafrar íhuga einnig stærðareiginleikann til að velja viðeigandi favicon fyrir samhengið. Ef þú tilgreinir mismunandi stærðir fyrir .png eða .svg favicons, mun vafrinn velja þann sem passar best við skjákröfur tækisins.
  3. SVG „hvaða sem er“ stærð: Þegar þú notar „hvaða“ gildið fyrir sizes eigind í SVG favicon yfirlýsingu (sizes="any"), gefur það til kynna að SVG geti lagað sig að hvaða stærð sem er. Vafrar geta forgangsraðað SVG með „hvaða sem er“ stærð til að tryggja að það mælist vel til að passa við ýmsar skjáupplausnir.
  4. Síðasta yfirlýsing hefur forgang: Ef þú gefur upp margar favicon yfirlýsingar með sama sniði og stærð, velur vafrinn venjulega síðustu yfirlýsinguna sem hann lendir í í HTML. Því röð þín <link> þættir skipta máli. Sá síðasti sem fannst verður settur í forgang.
  5. Fallback í sjálfgefið tákn: Ef ekkert af tilgreindum favicons samsvarar viðmiðum vafrans eða það eru engar favicon yfirlýsingar, getur vafrinn notað sjálfgefið tákn (td vafratákn) eða ekkert tákn.
  6. Stillingar notenda: Sumir vafrar leyfa notendum að stilla óskir sínar fyrir favicons. Val notandans getur hnekkt tilgreindum favicon vefsíðunnar í slíkum tilvikum.

Ef þú skráir ICO favicon yfirlýsingu fyrst en vilt að SVG sé notað sem valinn favicon, gæti það ekki alltaf virkað eins og ætlað er vegna þess að sumir vafrar forgangsraða fyrstu gildu favicon yfirlýsingunni sem þeir hitta. Hins vegar geturðu samt tryggt að SVG sé ákjósanlegasta favicon með því að tilgreina það síðast og nota Allir stærð eiginleiki.

Hér er hvernig þú getur gert það:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

Í þessu dæmi er .ico sniðið enn innifalið fyrir hámarks eindrægni, en SVG sniðið er síðast tilgreint með Allir stærð eiginleiki. Þessi uppsetning gefur SVG sniðinu meiri forgang á sama tíma og .ico sniðið er enn til baka fyrir vafra sem forgangsraða því. Með því að tilgreina SVG síðast með Allir stærð eiginleiki, eykur þú líkurnar á því að nútíma vafrar velji SVG sem ákjósanlegt favicon snið, þar sem það getur lagað sig að ýmsum stærðum.

Douglas Karr

Douglas Karr er CMO af OpenINSIGHTS og stofnandi Martech Zone. Douglas hefur hjálpað tugum farsælra MarTech sprotafyrirtækja, hefur aðstoðað við áreiðanleikakönnun yfir $5 milljarða í kaupum og fjárfestingum Martech og heldur áfram að aðstoða fyrirtæki við að innleiða og gera sjálfvirkan sölu- og markaðsáætlanir sínar. Douglas er alþjóðlega viðurkenndur stafrænn umbreytingu og MarTech sérfræðingur og ræðumaður. Douglas er einnig útgefinn höfundur Dummie's guide og bók um leiðtogaviðskipti.

tengdar greinar

Til baka efst á hnappinn
Loka

Auglýsingablokk greind

Martech Zone er fær um að útvega þér þetta efni að kostnaðarlausu vegna þess að við afla tekna af síðunni okkar með auglýsingatekjum, tengdatenglum og kostun. Okkur þætti vænt um ef þú myndir fjarlægja auglýsingablokkann þinn þegar þú skoðar síðuna okkar.