Sisu Marketing

Parimad tavad oma veebisaidil faviconi rakendamiseks

Kui need algselt kasutusele võeti, favicon määras pildi, mis kuvatakse, kui kasutajad salvestavad a URL otsetee nende töölaual. Täna võidakse teie veebisaidi lemmikikooni kuvada brauseri vahekaartidel, meiliklientides, sotsiaalmeedia jagamistes ja otsingutulemustes.

Favicon on nüüd iga veebisaidi vajalik kaubamärgielement, kuid sageli jäetakse see tähelepanuta… see ei tohiks olla. Favicoone kuvatakse tavaliselt veebibrauserite erinevates kohtades, et aidata kasutajatel veebisaite tuvastada ja järjehoidjatesse lisada. Siin on mõned põhipunktid faviconi kohta:

  • Brauseri vahekaardid: kui kasutajad avavad veebisaidi veebibrauseris, kuvatakse favicon brauseri vahekaardil lehe pealkirja kõrval. See annab avatud vahelehe visuaalse identifikaatori, mis muudab kasutajatel mitme vahekaardi leidmise ja vahetamise lihtsamaks.
  • Järjehoidjad ja lemmikud: kui kasutajad lisavad veebisaidi järjehoidjatesse või salvestavad selle lemmikuna, kuvatakse järjehoidjate või lemmikute menüüs sageli veebisaidi nime kõrval faviconi. See aitab kasutajatel salvestatud veebisaite kiiresti tuvastada ja neile juurde pääseda.
  • Brauseri aadressiriba: mõnes brauseris kuvatakse kasutajate veebisaiti külastades favicon brauseri aadressiribal või omnikastikeses. See lisab veebisaidi URL-ile visuaalse elemendi.
  • Otsingu tulemused: Mõned otsingumootorid võivad kuvada otsingutulemuste kõrval lemmikuid, mis aitavad kasutajatel hõlpsasti otsinguloendites veebisaite tuvastada.

Favicon on veebisaidi väike ikooniline kujutis, mis parandab kasutajakogemust, pakkudes visuaalseid vihjeid veebisaidi tuvastamiseks, järjehoidjate lisamiseks ja vahekaartide haldamiseks veebibrauserites. See on veebidisaini ja brändingu oluline element.

Ikoonide failitüübid

Algselt nõudsid nad an ICO faili, kuid on arenenud paljude kuvamisvõimalustega platvormidega PNG ja SVG failid. ICO-faile võib käsitleda mitme ikoonipildi kogumina ühte faili. ICO-faili loomisel koostate erineva suuruse ja värvisügavusega erinevad ikoonipildid ühte kindla struktuuriga faili. ICO-fail töötab järgmiselt.

  1. Mitu ikoonipilti: ICO-fail sisaldab tavaliselt mitut erineva mõõtme ja värvisügavusega ikoonipilti. Need pildid esindavad sama ikooni, kuid on mõeldud kuvamiseks erinevas suuruses ilma kvaliteeti kaotamata.
  2. Ikoonide kataloog: ICO-failis on ikoonikataloog, mis määrab iga ikoonipildi atribuudid, sealhulgas selle suuruse, värvisügavuse ja asukoha failis.
  3. Päise teave: ICO-fail sisaldab ka päiseteavet, mis annab faili kohta olulisi üksikasju, näiteks faili salvestatud ikoonipiltide arvu.
  4. Pildi andmed: Iga ICO-faili ikoonipilt salvestatakse toorpildiandmetena ilma tihendamiseta. See võimaldab üksikutele ikoonipiltidele kiiresti juurde pääseda ja tarkvara abil kuvada.
  5. Ikoonide otsimine: kui rakendus või operatsioonisüsteem peab kuvama faili, kausta, otsetee või rakendusega seotud ikooni, saab see soovitud suuruse ja värvisügavuse alusel ICO-failist otsida sobiva ikoonipildi.

ICO

Eelised:

  • Laialdane tugi: ICO on traditsiooniline faviconi vorming, mida laialdaselt toetavad erinevad veebibrauserid, sealhulgas vanemad versioonid. See on ühilduvuse tagamiseks turvaline valik.
  • Mitmed suurused ja värvisügavused: ICO-failid võivad sisaldada mitut erineva suuruse ja värvisügavusega ikoonipilti, mis võimaldab faviconil erinevates kontekstides hästi kuvada.

Puudused:

  • Piiratud mastaapsus: ICO ikoonid ei skaleeri nii hästi kui vektorvormingud nagu SVG. Ebastandardsete suurustega kuvamisel võivad ICO ikoonid paista pikslitatuna.

PNG

Eelised:

  • Kadudeta kokkusurumine: PNG faviconid pakuvad kadudeta pakkimist, tagades väikese failisuurusega kõrge pildikvaliteedi. See on eriti kasulik teravate ja üksikasjalike ikoonide puhul.
  • läbipaistvus: PNG toetab alfa-läbipaistvust, võimaldades keerukaid ja poolläbipaistvaid kujundusi, mis sulanduvad sujuvalt taustaga.
  • Tugi kaasaegsetes brauserites: PNG-d toetavad hästi kaasaegsed veebibrauserid ja see pakub head ühilduvust.

Puudused:

  • Mitu faili: erinevate suuruste ja eraldusvõimega katmiseks peate võib-olla esitama mitu erineva mõõtmega PNG-faili, mis võib suurendada HTTP-päringute arvu.
  • Vektori toe puudumine: PNG on rastervorming, seega ei skaleerita seda nii graatsiliselt kui vektorvormingud nagu SVG.

SVG

Eelised:

  • Vektoripõhine: SVG on vektorvorming, mis tähendab, et seda saab skaleerida ilma kvaliteeti kaotamata. See on ideaalne igas suuruses teravate ja kvaliteetsete ikoonide loomiseks.
  • Väike faili suurus: SVG-failid on sageli väiksema suurusega võrreldes nende rasterkaaslastega, mistõttu on need veebis kasutamiseks tõhusad.
  • Mitmekülgsus: SVG võimaldab luua keerulisi ja kunstilisi kujundusi, sealhulgas mitmevärvilisi ikoone, gradiente ja keerulisi kujundeid.
  • CSS-stiil: SVG favikone saab hõlpsasti kujundada CSS-i abil, pakkudes suuremat disaini paindlikkust.

Puudused:

  • Brauseri ühilduvus: Kuigi tänapäevased brauserid toetavad SVG-lemmikkoone, võib vanematel brauseritel olla tugi piiratud või üldse mitte. Laiema ühilduvuse tagamiseks on oluline pakkuda varuvorminguid, nagu ICO või PNG.
  • Keerukus: SVG-ikoonide kujundamine võib olla keerulisem, eriti neile, kes pole vektorgraafika tarkvaraga tuttavad.

Faviconi vormingu valik sõltub teie disaininõuetest ja ühilduvuse tasemest, mida soovite saavutada. ICO on laiema ühilduvuse jaoks turvaline valik, PNG pakub kadudeta kvaliteeti ja läbipaistvust ning SVG sobib ideaalselt mastaapsuse ja keeruka kujunduse jaoks, kuid nõuab brauseri toe ja varuvõimaluste hoolikat kaalumist. Vormingute kombinatsiooni kasutamine, nagu on näidatud järgmistes näidetes, võib tagada teie veebisaidi lemmiku ikooni maksimaalse ühilduvuse ja kvaliteedi.

Kuidas luua ICO-faili

Minu meelest on päris veider, et Adobe Illustrator ja Photoshop ei koosta vaikimisi .ICO faile (pluginad on saadaval). Saate neid kasutades väljastada kõik erineva pildisuurused... ja seejärel luua need, kasutades ühte järgmistest meetoditest.

  • GIMP toetab algselt ICO-faile. See on tasuta avatud lähtekoodiga platvorm, mis on saadaval kõikidele operatsioonisüsteemidele.
  • ImageMagick on tasuta avatud lähtekoodiga teenus, mille saate laadida oma arvutisse või Maci, võimaldades teil ühendada mitu faili ICO-failiks. Näidiskäsk:
convert image1.png image2.png image3.png favicon.ico
  • On olemas ka võrgutööriistad, mis aitavad teil ICO-faili luua, kuid peaksite valima hoolikalt. Paljud muudavad ühe üleslaaditud pildifaili suurust ja tihendavad neid halvasti. Favicon.io on tasuta veebisait, mis võimaldab teil oma ICO-faili üles laadida ja koostada. Platvormi kasutamisel kasutage alati suurimat failisuurust ja eraldusvõimet, kuna see loob automaatselt väiksemad pildisuurused.

Soovite katsetada oma ICO-failiga. Logo suuruse muutmine 16 piksli suuruse ruudu ikooniks muudab selle eristamatuks. Näete isegi, et meie oma pole kogu meie logo, vaid ainult see M meie logost.

Kontrollige oma veebisaidi faviconi

Faviconi HTML-i parimad tavad

Brauserid seavad lemmikute valiku prioriteediks mitme teguri, sealhulgas konkreetsete deklaratsioonide vormingu, suuruse ja olemasolu alusel. Brauserid eelistavad ja valivad lemmikkontosid tavaliselt järgmiselt.

  1. Failivormingu prioriteet: Brauserid eelistavad tavaliselt .ico-faile, kui need on olemas, kuna see on traditsiooniline faviconi vorming. Kui esitate .ico faviconi kasutades <link rel="icon" type="image/x-icon" href="favicon.ico">, on see sageli teiste vormingute suhtes ülimuslik.
  2. Suuruse prioriteet: Konteksti jaoks sobivaima faviconi valimiseks võtavad brauserid arvesse ka atribuuti size. Kui määrate .png või .svg lemmikutele erinevad suurused, valib brauser selle, mis vastab kõige paremini seadme kuvamisnõuetele.
  3. SVG "mis tahes" suurus: kui kasutate väärtust "ükskõik milline". sizes atribuut SVG faviconi deklaratsioonis (sizes="any"), näitab see, et SVG saab kohaneda mis tahes suurusega. Brauserid võivad eelistada mis tahes suurusega SVG-d, et tagada selle sobivus erinevatele ekraanieraldustele.
  4. Viimane deklaratsioon on ülimuslik: kui esitate mitu sama vormingu ja suurusega faviconi deklaratsiooni, valib brauser tavaliselt viimase deklaratsiooni, mida ta HTML-is kohtab. Seega, et teie <link> elemendid on olulised. Eelistatakse viimast leitud.
  5. Tagasi vaikeikooni juurde: kui ükski määratud lemmikikoonidest ei vasta brauseri kriteeriumidele või pole faviconi deklaratsioone, võib brauser kasutada vaikeikooni (nt brauseri ikoon) või mitte ühtegi ikooni.
  6. Kasutaja eelistused: mõned brauserid võimaldavad kasutajatel määrata oma eelistusi lemmikute jaoks. Kasutaja valik võib sellistel juhtudel tühistada veebisaidi määratud faviconi.

Kui loetlete esimesena ICO faviconi deklaratsiooni, kuid soovite, et eelistatud faviconina kasutataks SVG-d, ei pruugi see alati nii nagu ette nähtud, kuna mõned brauserid seavad prioriteediks esimese kehtiva faviconi deklaratsiooni, millega nad kokku puutuvad. Siiski saate siiski tagada, et SVG on eelistatud favicon, määrates selle viimasena ja kasutades mistahes suuruse atribuut.

Selle saate teha järgmiselt.

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

Selles näites on maksimaalse ühilduvuse tagamiseks endiselt kaasatud .ico-vorming, kuid SVG-vorming määratakse viimasena mistahes suuruse atribuut. See seadistus eelistab SVG-vormingut kõrgemalt, pakkudes samal ajal .ico-vormingut tagavaraks seda eelistavatele brauseritele. Määrates SVG viimase nupuga mistahes suuruse atribuudiga, suurendate tõenäosust, et kaasaegsed brauserid valivad eelistatud faviconi vorminguks SVG, kuna see võib kohaneda erinevate suurustega.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja selle asutaja Martech Zone. Douglas on aidanud kümneid edukaid MarTechi idufirmasid, on aidanud Martechi omandamisel ja investeeringutel üle 5 miljardi dollari ulatuses läbi viia ning jätkab ettevõtete abistamist nende müügi- ja turundusstrateegiate rakendamisel ja automatiseerimisel. Douglas on rahvusvaheliselt tunnustatud digitaalse transformatsiooni ja MarTechi ekspert ja esineja. Douglas on ka Dummie juhendi ja ärijuhtimise raamatu autor.

seotud artiklid

Tagasi üles nupule
lähedal

Adblock tuvastatud

Martech Zone suudab teile seda sisu tasuta pakkuda, kuna teenime oma saidi rahaks reklaamitulu, sidusettevõtete linkide ja sponsorluse kaudu. Oleksime tänulikud, kui eemaldaksite meie saidi vaatamise ajal oma reklaamiblokeerija.