Sisältö Markkinointi

Parhaat käytännöt faviconin käyttöönottamiseksi verkkosivustollesi

Kun ne alun perin esiteltiin, favicon määrittänyt kuvan, joka näytetään, kun käyttäjät tallensivat a URL pikakuvake työpöydälle. Nykyään verkkosivustosi suosikkikuvake voidaan näyttää selaimen välilehdissä, sähköpostiohjelmissa, sosiaalisen median jaoissa ja hakutuloksissa.

Favicon on nyt välttämätön brändäyselementti jokaisessa verkkosivustossa, mutta se jätetään usein huomiotta… sen ei pitäisi olla. Faviconit näytetään tyypillisesti eri paikoissa verkkoselaimissa, jotta käyttäjät voivat tunnistaa ja merkitä verkkosivustot kirjanmerkkeihin. Tässä on joitain avainkohtia faviconeista:

  • Selaimen välilehdet: Kun käyttäjät avaavat verkkosivuston verkkoselaimella, favicon näkyy selaimen välilehdellä sivun otsikon vieressä. Tämä tarjoaa visuaalisen tunnisteen avoimelle välilehdelle, jolloin käyttäjien on helpompi löytää useita välilehtiä ja vaihtaa niiden välillä.
  • Kirjanmerkit ja suosikit: Kun käyttäjät lisäävät verkkosivuston kirjanmerkkeihin tai tallentavat sen suosikiksi, favicon näkyy usein verkkosivuston nimen vieressä kirjanmerkki- tai suosikkivalikossa. Se auttaa käyttäjiä nopeasti tunnistamaan ja käyttämään tallennettuja verkkosivustoja.
  • Selaimen osoiterivi: Joissakin selaimissa, kun käyttäjät vierailevat verkkosivustolla, favicon näkyy selaimen osoitepalkissa tai omniboxissa. Tämä lisää visuaalisen elementin verkkosivuston URL-osoitteeseen.
  • Hakutulokset: Jotkin hakukoneet saattavat näyttää suosikkikuvakkeita hakutulosten vieressä, mikä auttaa käyttäjiä tunnistamaan verkkosivustot helposti hakutuloksista.

Favicon on pieni, ikoninen esitys verkkosivustosta, joka parantaa käyttökokemusta tarjoamalla visuaalisia vihjeitä verkkosivuston tunnistamiseen, kirjanmerkkeihin ja välilehtien hallintaan verkkoselaimissa. Se on tärkeä osa web-suunnittelua ja brändäystä.

Kuvaketiedostotyypit

Alun perin he vaativat ICO tiedostoa, mutta ne ovat kehittyneet niin, että monet alustat voivat näyttää PNG ja SVG tiedostot. ICO-tiedostoja voidaan pitää useiden kuvakekuvien kokoelmana yhdeksi tiedostoksi. Kun luot ICO-tiedoston, kokoat eri kokoisia ja erivärisiä kuvakekuvia yhdeksi tiedostoksi, jolla on tietty rakenne. Näin ICO-tiedosto toimii:

  1. Useita ikonikuvia: ICO-tiedosto sisältää yleensä useita kuvakekuvia, joilla on eri mitat ja värisyvyys. Nämä kuvat edustavat samaa kuvaketta, mutta ne on suunniteltu näytettäväksi eri kokoisina laadun heikkenemättä.
  2. Ikonihakemisto: ICO-tiedostossa on kuvakehakemisto, joka määrittää kunkin kuvakekuvan attribuutit, mukaan lukien sen koon, värisyvyyden ja sijainnin tiedostossa.
  3. Otsikkotiedot: ICO-tiedosto sisältää myös otsikkotiedot, jotka sisältävät tärkeitä tietoja tiedostosta, kuten tiedostoon tallennettujen kuvakekuvien lukumäärän.
  4. Kuvatiedot: Jokainen ICO-tiedoston kuvakekuva tallennetaan raakakuvatietona ilman pakkausta. Tämä mahdollistaa yksittäisten kuvakekuvien nopean käytön ja näyttämisen ohjelmistolla.
  5. Kuvakkeen haku: Kun sovelluksen tai käyttöjärjestelmän on näytettävä tiedostoon, kansioon, pikakuvakkeeseen tai sovellukseen liittyvä kuvake, se voi noutaa sopivan kuvakkeen kuvan ICO-tiedostosta halutun koon ja värisyvyyden perusteella.

ICO

edut:

  • Laaja tuki: ICO on perinteinen favicon-muoto, jota useat selaimet tukevat laajasti, mukaan lukien vanhemmat versiot. Se on turvallinen valinta yhteensopivuuden varmistamiseksi.
  • Useita kokoja ja värejä: ICO-tiedostot voivat sisältää useita erikokoisia ja erivärisiä kuvakekuvia, mikä mahdollistaa faviconin näyttämisen hyvin erilaisissa yhteyksissä.

Haitat:

  • Rajoitettu skaalautuvuus: ICO-kuvakkeet eivät skaalaudu yhtä hyvin kuin vektorimuodot, kuten SVG. Kun ICO-kuvakkeet näytetään ei-standardin kokoisina, ne voivat näkyä pikselöityinä.

PNG

edut:

  • Häviötön pakkaus: PNG-faviconit tarjoavat häviötöntä pakkausta, mikä takaa korkean kuvanlaadun pienillä tiedostokooilla. Tämä on erityisen hyödyllistä teräville ja yksityiskohtaisille kuvakkeille.
  • Läpinäkyvyys: PNG tukee alfaläpinäkyvyyttä, mikä mahdollistaa monimutkaiset ja puoliläpinäkyvät kuviot, jotka sulautuvat saumattomasti taustaan.
  • Tuki nykyaikaisissa selaimissa: Nykyaikaiset verkkoselaimet tukevat hyvin PNG:tä, ja se tarjoaa hyvän yhteensopivuuden.

Haitat:

  • Useita tiedostoja: Jotta voit kattaa eri kokoja ja resoluutioita, saatat joutua toimittamaan useita PNG-tiedostoja eri kokoisina, mikä voi lisätä HTTP-pyyntöjen määrää.
  • Vector-tuen puute: PNG on rasterimuoto, joten se ei skaalaudu niin sulavasti kuin vektorimuodot, kuten SVG.

SVG

edut:

  • Vektoripohjainen: SVG on vektorimuoto, mikä tarkoittaa, että se voi skaalata laadun heikkenemättä. Se on ihanteellinen luomaan teräviä, korkealaatuisia kuvakkeita missä tahansa koossa.
  • Pieni tiedostokoko: SVG-tiedostot ovat usein pienempiä kuin rasterivastineet, mikä tekee niistä tehokkaita verkkokäyttöön.
  • Monipuolisuus: SVG mahdollistaa monimutkaisen ja taiteellisen suunnittelun, mukaan lukien moniväriset kuvakkeet, liukuvärit ja monimutkaiset muodot.
  • CSS-tyyli: SVG-faviconit voidaan helposti muotoilla CSS:n avulla, mikä tarjoaa enemmän suunnittelun joustavuutta.

Haitat:

  • Selaimen yhteensopivuus: Vaikka nykyaikaiset selaimet tukevat SVG-faviconeja, vanhemmissa selaimissa tuki voi olla rajoitettu tai ei ollenkaan. Laajemman yhteensopivuuden takaamiseksi on välttämätöntä tarjota varamuotoja, kuten ICO tai PNG.
  • Monimutkaisuus: SVG-kuvakkeiden suunnittelu voi olla monimutkaisempaa, etenkin niille, jotka eivät tunne vektorigrafiikkaohjelmistoja.

Favicon-muodon valinta riippuu suunnitteluvaatimuksistasi ja yhteensopivuuden tasosta, jonka haluat saavuttaa. ICO on turvallinen valinta laajempaan yhteensopivuuteen, PNG tarjoaa häviötöntä laatua ja läpinäkyvyyttä, ja SVG on ihanteellinen skaalautumiseen ja monimutkaisiin malleihin, mutta vaatii huolellista harkintaa selaimen tuesta ja varavaihtoehdoista. Käyttämällä muotojen yhdistelmää, kuten seuraavissa esimerkeissä näytetään, voit varmistaa verkkosivustosi suosikkikuvakkeen maksimaalisen yhteensopivuuden ja laadun.

Kuinka luoda ICO-tiedosto

Minusta on aika outoa, että Adobe Illustrator ja Photoshop eivät rakenna oletusarvoisesti .ICO-tiedostoja (laajennuksia on saatavilla). Voit kuitenkin tulostaa kunkin eri kuvakoon käyttämällä niitä… ja sitten rakentaa ne jollakin seuraavista tavoista:

  • GIMP tukee alkuperäisesti ICO-tiedostoja. Se on ilmainen avoimen lähdekoodin alusta, joka on saatavilla kaikille käyttöjärjestelmille.
  • ImageMagick on ilmainen avoimen lähdekoodin palvelu, jonka voit ladata PC- tai Mac-tietokoneellesi ja jonka avulla voit yhdistää useita tiedostoja ICO-tiedostoksi. Esimerkkikomento:
convert image1.png image2.png image3.png favicon.ico
  • On myös online-työkaluja, joiden avulla voit luoda .ICO-tiedoston, mutta sinun kannattaa valita huolella. Monet muuttavat yhden ladatun kuvatiedoston kokoa ja pakkaavat ne huonosti. Favicon.io on ilmainen online-sivusto, jonka avulla voit ladata ja rakentaa ICO-tiedostosi. Käytä aina suurinta tiedostokokoa ja resoluutiota käyttäessäsi alustaa, sillä se luo automaattisesti pienemmät kuvakoot.

Haluat kokeilla ICO-tiedostoasi. Yksinkertaisesti logon pienentäminen 16 pikselin neliön kuvakkeeseen voi tehdä siitä erottumattoman. Huomaat jopa, että meidän logomme ei ole koko logomme, vaan vain M logostamme.

Tarkista Web-sivustosi Favicon

Favicon HTML:n parhaat käytännöt

Selaimet priorisoivat suosikkikuvakkeiden valinnan useiden tekijöiden perusteella, mukaan lukien muoto, koko ja tiettyjen ilmoitusten olemassaolo. Näin selaimet yleensä priorisoivat ja valitsevat suosikkikuvakkeet:

  1. Tiedostomuodon prioriteetti: Selaimet yleensä priorisoivat .ico-tiedostoja, kun ne ovat olemassa, koska tämä on perinteinen favicon-muoto. Jos annat .ico-faviconin käyttämällä <link rel="icon" type="image/x-icon" href="favicon.ico">, se on usein etusijalla muihin muotoihin nähden.
  2. Koko Prioriteetti: Selaimet huomioivat myös koko-attribuutin valitakseen kontekstiin sopivimman faviconin. Jos määrität eri koot .png- tai .svg-faviconeille, selain valitsee sen, joka parhaiten vastaa laitteen näyttövaatimuksia.
  3. SVG "mikä tahansa" koko: Kun käytät "mitä tahansa" arvoa sizes attribuutti SVG-favicon-ilmoituksessa (sizes="any"), se osoittaa, että SVG voi mukautua mihin tahansa kokoon. Selaimet voivat priorisoida "mitä tahansa" kokoista SVG:tä varmistaakseen, että se skaalautuu hyvin eri näyttötarkkuuksiin.
  4. Viimeinen julistus on etusijalla: Jos toimitat useita favicon-määrityksiä, joissa on sama muoto ja koko, selain valitsee yleensä viimeisen määrityksen, jonka se kohtaa HTML-koodissa. Siksi sinun <link> elementeillä on väliä. Viimeinen löydetty asetetaan etusijalle.
  5. Palaa oletuskuvakkeeseen: Jos mikään määritetyistä faviconeista ei vastaa selaimen ehtoja tai favicon-määrityksiä ei ole, selain voi käyttää oletuskuvaketta (esim. selaimen kuvaketta) tai ei kuvaketta.
  6. Käyttäjäasetukset: Jotkut selaimet antavat käyttäjien määrittää suosikkikuvakkeita koskevat asetukset. Tällaisissa tapauksissa käyttäjän valinta voi ohittaa verkkosivuston määrittämän faviconin.

Jos luet ensin ICO-favicon-ilmoituksen, mutta haluat, että SVG:tä käytetään ensisijaisena faviconina, se ei välttämättä aina toimi tarkoitetulla tavalla, koska jotkin selaimet priorisoivat ensimmäisen kelvollisen favicon-ilmoituksen. Voit kuitenkin varmistaa, että SVG on ensisijainen favicon määrittämällä sen viimeisenä ja käyttämällä Kaikki koko-attribuutti.

Näin voit tehdä sen:

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

Tässä esimerkissä .ico-muoto on edelleen mukana parhaan mahdollisen yhteensopivuuden varmistamiseksi, mutta SVG-muoto määritetään viimeisenä Kaikki koko-attribuutti. Tämä asetus antaa paremman etusijalle SVG-muodon, mutta tarjoaa silti .ico-muodon varavaihtoehtona sitä priorisoiville selaimille. Määrittämällä SVG:n viimeinen Kaikki size-attribuutti, lisäät todennäköisyyttä, että nykyaikaiset selaimet valitsevat SVG:n ensisijaiseksi favicon-muodoksi, koska se voi mukautua eri kokoihin.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

Aiheeseen liittyvät artikkelit

Takaisin alkuun -painiketta
lähellä

Adblock havaittu

Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.