Edukia Marketing

Zure webgunerako favicon bat ezartzeko praktika onak

Hasiera batean aurkeztu zirenean, favicon erabiltzaileek gordetakoan bistaratzeko irudi bat izendatu zuten URL beren mahaigaineko lasterbidea. Gaur egun, zure webgunearen fabicon arakatzailearen fitxetan, posta elektronikoko bezeroetan, sare sozialen parteketan eta bilaketa-emaitzetan ager daiteke.

Favicon bat webgune guztietan beharrezkoa den marka elementua da, baina askotan ahaztu egiten da... ez lukete izan behar. Favicons normalean web-arakatzaileetan hainbat lekutan bistaratzen dira erabiltzaileei webguneak identifikatzen eta laster-markak laguntzeko. Hona hemen faviconei buruzko gako batzuk:

  • Arakatzailearen fitxak: Erabiltzaileek webgune bat web arakatzaile batean irekitzen dutenean, fabikonoa bistaratzen da orriaren izenburuaren ondoan dagoen arakatzailearen fitxan. Honek irekitako fitxarako identifikatzaile bisual bat eskaintzen du, erabiltzaileek fitxa anitz aurkitzea eta aldatzea erraztuz.
  • Laster-markak eta gogokoak: Erabiltzaileek webgune bat gogoko gisa markatzen dutenean edo gogoko gisa gordetzen dutenean, gogokoen edo gogokoen menuan webgunearen izenaren alboan bistaratuko da fabicon. Erabiltzaileek gordetako webguneak azkar identifikatzen eta sartzen laguntzen die.
  • Arakatzailearen helbide barra: Arakatzaile batzuetan, erabiltzaileek webgune bat bisitatzen dutenean, favicon-a bistaratzen da arakatzailearen helbide-barran edo omnibox. Honek elementu bisual bat gehitzen dio webgunearen URLari.
  • Bilaketa emaitzak: Bilatzaile batzuek bilaketa-emaitzen ondoan fabicons bistaratu ditzakete, erabiltzaileei bilaketa-zerrendetan webguneak erraz identifikatzen laguntzeko.

Favicon bat webgune baten irudikapen txiki eta ikoniko bat da, erabiltzailearen esperientzia hobetzen duena, webgunea identifikatzeko, laster-markak eta fitxak kudeatzeko web-arakatzaileen bidezko seinale bisualak eskainiz. Web diseinuaren eta markaren elementu garrantzitsu bat da.

Ikono Fitxategi motak

Hasieran, bat eskatzen zuten ICO fitxategia, baina bistaratzeko gai diren plataforma askorekin eboluzionatu dute PNG SVG fitxategiak. ICO fitxategiak fitxategi bakarrean hainbat ikono irudi biltzen direla har daiteke. ICO fitxategi bat sortzen duzunean, hainbat tamaina eta kolore-sakoneratako ikono-irudi desberdinak konpilatzen dituzu egitura zehatz batekin fitxategi bakar batean. Hona hemen ICO fitxategi batek nola funtzionatzen duen:

  1. Hainbat ikono irudi: ICO fitxategi batek normalean hainbat ikono-irudi ditu dimentsio eta kolore-sakonera ezberdinekin. Irudi hauek ikono bera adierazten dute baina kalitatea galdu gabe tamaina ezberdinetan bistaratzeko diseinatuta daude.
  2. Ikonoen direktorioa: ICO fitxategiaren barruan, ikonoen direktorio bat dago ikono-irudi bakoitzaren atributuak zehazten dituena, fitxategiaren tamaina, kolore-sakonera eta kokapena barne.
  3. Goiburuko informazioa: ICO fitxategiak fitxategiari buruzko funtsezko xehetasunak ematen dituen goiburuko informazioa ere biltzen du, hala nola fitxategian gordetako ikono-irudi kopurua.
  4. Irudi Datuak: ICO fitxategiko ikono-irudi bakoitza irudi gordinaren datu gisa gordetzen da konpresiorik gabe. Honi esker, banakako ikonoen irudiak azkar atzitu eta bistaratu daitezke softwarearen bidez.
  5. Ikonoa berreskuratzea: Aplikazio batek edo sistema eragileak fitxategi, karpeta, lasterbide edo aplikazio batekin lotutako ikono bat erakutsi behar duenean, ICO fitxategitik ikono-irudi egokia berreskura dezake nahi den tamaina eta kolore-sakoneraren arabera.

ICO

Abantailak:

  • Laguntza zabala: ICO favicon formatu tradizionala da hainbat web arakatzaileek onartzen dutena, bertsio zaharragoak barne. Aukera segurua da bateragarritasuna bermatzeko.
  • Hainbat tamaina eta kolore-sakonera: ICO fitxategiek tamaina eta kolore-sakonera ezberdinetako ikono-irudi ugari izan ditzakete, favicon-a hainbat testuingurutan ondo bistaratzeko aukera emanez.

Desabantailak:

  • Eskalagarritasun mugatua: ICO ikonoak ez dira SVG bezalako formatu bektorialak bezain ondo eskalatzen. Tamaina ez estandarretan bistaratzen direnean, ICO ikonoak pixelatuta ager daitezke.

PNG

Abantailak:

  • Galerarik gabeko konpresioa: PNG fabiconek galerarik gabeko konpresioa eskaintzen dute, irudiaren kalitate handia bermatuz fitxategi tamaina txikiekin. Hau bereziki erabilgarria da ikono zorrotz eta zehatzetarako.
  • Transparency: PNG-k alfa gardentasuna onartzen du, diseinu konplexu eta erdi gardenak ahalbidetuz, atzeko planoarekin ezin hobeto nahasten direnak.
  • Arakatzaile modernoetan laguntza: PNG ondo onartzen dute web arakatzaile modernoek eta bateragarritasun ona eskaintzen du.

Desabantailak:

  • Fitxategi Anitz: hainbat tamaina eta bereizmen estaltzeko, baliteke PNG fitxategi anitz eman behar izatea dimentsio ezberdinetan, eta horrek HTTP eskaera kopurua handitu dezake.
  • Bektore-laguntza falta: PNG raster formatua da, beraz, ez da SVG bezalako formatu bektorialak bezain dotore eskalatzen.

SVG

Abantailak:

  • Bektoreetan oinarrituta: SVG formatu bektoriala da, hau da, kalitatea galdu gabe eskala daiteke. Ezin hobea da kalitate handiko ikono kurruskariak sortzeko edozein tamainatan.
  • Fitxategi Tamaina Txikia: SVG fitxategiak sarritan tamaina txikiagoak dira beren raster parekoekin alderatuta, eta eraginkorrak dira web erabilerarako.
  • Aldakortasuna: SVG-k diseinu konplexuak eta artistikoak egiteko aukera ematen du, kolore anitzeko ikonoak, gradienteak eta forma korapilatsuak barne.
  • CSS estiloa: SVG fabicons erraz molda daitezke CSS erabiliz, diseinu malgutasun handiagoa eskainiz.

Desabantailak:

  • Arakatzailearen bateragarritasuna: arakatzaile modernoek SVG fabicons onartzen duten arren, arakatzaile zaharrenek laguntza mugatua edo ez dute. Ezinbestekoa da ICO edo PNG bezalako ordezko formatuak eskaintzea bateragarritasun zabalagoa izateko.
  • konplexutasuna: SVG ikonoak diseinatzea konplexuagoa izan daiteke, batez ere grafiko bektorialen softwarea ezagutzen ez dutenentzat.

Favicon formatuaren aukeraketa zure diseinu eskakizunen eta lortu nahi duzun bateragarritasun mailaren araberakoa da. ICO bateragarritasun zabalagorako aukera segurua da, PNG galerarik gabeko kalitatea eta gardentasuna eskaintzen du, eta SVG aproposa da eskalagarritasunerako eta diseinu korapilatsuetarako, baina arakatzailearen laguntza eta atzerapenak arretaz kontuan hartu behar ditu. Formatu konbinazio bat erabiltzeak, hurrengo adibideetan erakusten den bezala, zure webguneko fabiconaren bateragarritasun eta kalitate handiena bermatu dezake.

Nola sortu ICO fitxategi bat

Nahiko arraroa da, nire ustez, Adobe Illustrator eta Photoshop-ek ez izatea .ICO fitxategiak lehenespenez (pluginak eskuragarri daude). Irudi-tamaina desberdinetako bakoitza atera dezakezu haiek erabiliz, baina… eta gero eraiki itzazu metodo hauetakoren bat erabiliz:

  • GIMP natiboki onartzen ditu ICO fitxategiak. Sistema eragile guztietarako eskuragarri dagoen kode irekiko plataforma doakoa da.
  • ImageMagick Zure ordenagailuan edo Mac-en kargatu dezakezun doako eta kode irekiko zerbitzu bat da, hainbat fitxategi ICO fitxategi batean konbinatzeko aukera ematen dizu. Agindu adibidea:
convert image1.png image2.png image3.png favicon.ico
  • .ICO fitxategi bat sortzen lagun zaitzaketen sareko tresnak ere badaude, baina kontu handiz aukeratu nahi duzu. Askok igotako irudi-fitxategi bakar baten tamaina aldatu eta bakoitza gaizki konprimitzen dute. Favicon.io doako lineako gune bat da, zure ICO fitxategia igo eta eraikitzeko aukera ematen duena. Erabili beti fitxategi-tamaina eta bereizmen handiena plataforma erabiltzean, irudi-tamaina txikiagoak automatikoki sortuko baititu.

Zure ICO fitxategiarekin esperimentatu nahi duzu. Logotipoa 16 px karratua duen ikono batera murriztuz gero, ezin da bereizten. Ikusiko duzu gurea ez dela gure logo osoa, baizik M gure logotik.

Irudi 3
Iturria: Favicon Checker

Egiaztatu zure webguneko favicon

Favicon HTML praktika onak

Arakatzaileek fabiconen aukeraketa lehenesten dute hainbat faktoreren arabera, formatua, tamaina eta adierazpen zehatzen presentzia barne. Hona hemen arakatzaileek fabicon-ak lehenesten eta hautatzen dituzten modu normalean:

  1. Fitxategiaren formatuaren lehentasuna: Arakatzaileek normalean .ico fitxategiak lehenesten dituzte daudenean, hauxe baita favicon formatu tradizionala. .ico favicon bat erabiltzen baduzu <link rel="icon" type="image/x-icon" href="favicon.ico">, sarritan lehentasuna izango du beste formatuen aurrean.
  2. Tamainaren lehentasuna: arakatzaileek tamaina atributua ere kontuan hartzen dute testuingururako fabicon egokiena hautatzeko. .png edo .svg gogokoen tamaina desberdinak zehazten badituzu, arakatzaileak aukeratuko du gailuaren bistaratze-baldintzei hobekien egokitzen dena.
  3. SVG "edozein" tamaina: "edozein" balioa erabiltzen duzunean sizes atributua SVG favicon deklarazio batean (sizes="any"), SVG edozein tamainatara egokitu daitekeela adierazten du. Arakatzaileek "edozein" tamaina duen SVG bat lehenesten dute pantailaren bereizmen ezberdinetara egokitzeko ondo eskalatzen dela ziurtatzeko.
  4. Azken Adierazpenak lehentasuna du: formatu eta tamaina bereko faviconen deklarazio anitz ematen badituzu, arakatzaileak normalean HTMLn aurkitzen duen azken deklarazioa aukeratzen du. Beraz, zure ordena <link> elementuek garrantzia dute. Aurkitutako azkena izango da lehentasuna.
  5. Ikono lehenetsira erortzea: Zehaztutako fabicon bat ez bada bat nabigatzailearen irizpideekin edo fabicon deklaraziorik ez badago, arakatzaileak ikono lehenetsi bat erabil dezake (adibidez, arakatzailearen ikonoa) edo ikonorik ez.
  6. Erabiltzailearen hobespenak: Arakatzaile batzuek erabiltzaileek fabiconen hobespenak ezar ditzakete. Erabiltzaileak aukeratzeak webgunearen zehaztutako fabicon baliogabetu dezake kasu horietan.

Lehenik eta behin ICO favicon deklarazio bat zerrendatzen baduzu, baina SVG gogokoen favicon gisa erabiltzea nahi baduzu, baliteke beti ez izatea nahi bezala funtzionatzea, arakatzaile batzuek aurkitzen duten baliozko lehen favicon deklarazioa lehenesten dutelako. Hala ere, oraindik ziurtatu dezakezu SVG gogokoena den fabicon dela azkena zehaztuz eta erabiliz edozein tamaina atributua.

Hona hemen nola egin dezakezun:

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

Adibide honetan, .ico formatua oraindik ere sartzen da gehienezko bateragarritasunerako, baina SVG formatua azkena zehazten da. edozein tamaina atributua. Konfigurazio honek hobespen handiagoa ematen dio SVG formatuari, .ico formatua lehenesten duten arakatzaileentzako ordezko gisa. SVG azkena zehaztuz edozein tamaina atributuan, arakatzaile modernoek SVG aukeratzeko aukera handitzen duzu favicon formatu hobetsi gisa, hainbat tamainatara molda baitaiteke.

Douglas Karr

Douglas Karr -ren CMO da OpenINSIGHTS eta ren sortzailea Martech Zone. Douglasek MarTech startup arrakastatsu batzuei lagundu die, Martech-en erosketetan eta inbertsioetan 5 milioi dolar baino gehiagoko diligentzian lagundu du eta enpresei laguntzen jarraitzen du salmenta eta marketin estrategiak ezartzen eta automatizatzen. Douglas nazioartean ezaguna den eraldaketa digitala eta MarTech aditua eta hizlaria da. Douglas Dummie's gidaren eta negozioen lidergoaren liburu baten egilea ere bada.

Gaiarekin lotutako artikuluak

Itzuli gora botoia
Itxi

Adblokea hauteman da

Martech Zone eduki hau kosturik gabe eskaintzeko gai da, gure webgunea iragarkien diru-sarreren, kideen esteken eta babesen bidez dirua irabazten dugulako. Eskertuko genuke gure gunea ikusten duzun bitartean iragarkien blokeatzailea kentzea.