Näin luot faviconin ja lisäät sen verkkosivullesi

Valitse sivustollesi sopiva tapa: WordPressissä voit ladata neliönmuotoisen kuvan sivustokuvakkeen asetuksesta. Muissa sivueditoreissa on yleensä oma sivustokuvakkeen kenttä. Jos muokkaat sivun HTML:ää itse, luo kuvaketiedostot ja seuraa HTML-ohjetta. ZIP-pakettia ja manifestia ei tarvita, jos editorisi luo kuvakkeet puolestasi.

Mikä favicon on ja missä se näkyy?

Favicon on pieni sivustokuvake selaimen välilehdessä tai kirjanmerkissä. Suurempi versio voi edustaa sivustoa puhelimen kotinäytöllä. Samasta kuviosta tarvitaan siksi useita kokoja.

Kun lukijalla on kaksitoista välilehteä auki, yrityksen koko nimi ei välttämättä mahdu näkyviin. Erottuva symboli auttaa silti löytämään oikean välilehden. Suunnittele kuvake tätä pientä tilaa varten.

Favicon on eri asia kuin sivun yläreunan logo tai linkin jakokuva. Yhden vaihtaminen ei automaattisesti vaihda muita. Leveä logo voi näyttää sivulla hyvältä mutta olla pienessä neliössä lukukelvoton.

Valitse ensin asennustapa. Näin valmistelet juuri sivustosi tarvitsemat tiedostot etkä pidä koko latauspakettia pakollisena.

Jos sivustotyökalussa on oma kuvakeasetus, käytä sitä ensin. HTML-ohje sopii sivustolle, jonka yhteistä head-osaa voit muokata. Määritysten liittäminen näkyvään sisältölohkoon ei tee samaa asiaa.

Valitse kuvio, joka toimii 16 pikselin koossa

Käytä brändisi tunnistettavinta osaa koko logon sijaan. Selkeä alkukirjain, yksinkertainen symboli tai hahmon päämuoto toimii usein paremmin kuin nimi ja iskulause. Poista vain suuressa koossa erottuvat yksityiskohdat.

Kuvitellaan leipomon logo, jossa on leipä, tähkiä ja teksti ”Jokikadun leipomo”. Kuvakkeeseen voisi jättää leivän siluetin ja yhden tunnistettavan viillon. Kaikki tähkät ja koko nimi muuttuisivat pieneksi sekavaksi kuvioksi.

Katso esikatselua todellisessa koossa. Suuri 512 pikselin kuva ei kerro, erottuuko kapea väli 16 pikselin versiossa. Tunnistatko päämuodon sekunnissa tai kahdessa ilman suurentamista?

• Pidä yksi pääidea. Älä sijoita neliöön useita keskenään kilpailevia aiheita.
• Käytä selkeitä reunoja. Ohuet ääriviivat ja pienet aukot voivat kadota pienennettäessä.
• Huolehdi kontrastista. Vaalea kuvio läpinäkyvällä taustalla voi hävitä vaaleaan selainikkunaan.
• Harkitse tekstiä. Yksi vahva kirjain voi toimia, koko yrityksen nimi harvoin.
• Tarkista siluetti. Jos tunnistettavuus riippuu pienistä yksityiskohdista, yksinkertaista kuviota.

Pieniin kokoihin saa tehdä oman version. Sen ei tarvitse olla koko logon pienoiskopio. Jos haluat hienosäätää 16 pikselin muotoja, piirrä versio erikseen: generaattori muuttaa kokoa mutta ei päätä, mitä brändin yksityiskohtia poistetaan.

Valmistele lähtökuva yksityiskohtia kadottamatta

Vie kuva alkuperäisestä aineistosta mahdollisimman selkeänä. Vähintään 512 × 512 pikselin neliömäinen PNG on hyvä lähtökohta, sillä paketin suurin kuvake on 512 pikseliä. Selainvälilehti ei silti näytä kuvaa tässä koossa.

Jos logo on vektorimuodossa, vie siitä neliömäinen PNG suunnitteluohjelmassa. Pixilo hyväksyy JPG-, PNG- ja WebP-kuvat, ei SVG:tä. Säilytä alkuperäinen vektoritiedosto myöhempiä muutoksia varten.

Sumean 32 pikselin kuvan suurentaminen 512 pikseliin ei palauta yksityiskohtia. Käytä parasta alkuperäistä tai piirrä yksinkertaisempi kuvio. Generaattori varoittaa, jos kuvan jompikumpi sivu on alle 512 pikseliä ja suuret versiot vaativat suurentamista.

Valitse neliömäinen sommittelu ennen tiedostokoon miettimistä. Suorakulmion sovitus säilyttää mittasuhteet mutta voi jättää paljon tyhjää tilaa. Keskeltä rajaus leikkaa osan pois. Kumpikaan ei automaattisesti ratkaise leveän tekstilogon ongelmaa.

Jos aihe on sivussa, valitse sopiva rajaus ensin kuvanrajaustyökalulla. Favicon-generaattori rajaa neliön keskeltä eikä siirrä rajausta reunalla olevan kasvon tai symbolin kohdalle.

Kokeile PNG:tä läpinäkyviin kuviin ja teräviin graafisiin reunoihin. JPG-kuvasta kannattaa tarkistaa sumeat reunat ja kuvion ympärillä näkyvät häiriöt. Muodon vaihtaminen ei palauta menetettyä laatua. JPG- ja PNG-opas auttaa valitsemaan sopivan muodon.

Faviconin koot ja muodot: mitä tiedostoja tarvitset?

Jokaiselle mahdolliselle laitteelle ei tarvitse lisätä erillistä kuvaketiedostoa. HTML-sivusto voi käyttää muutamaa linkitettyä kuvaketta, kun taas julkaisujärjestelmä saattaa tehdä versiot yhdestä lähdekuvasta.

ICO voi sisältää useita kuvakkeita. Pixilon ICO:ssa on 16, 32 ja 48 pikselin kuvat. PNG-tiedoston nimeäminen uudelleen nimellä .ico ei luo tätä rakennetta. PNG sisältää yhden kuvan, jota on helppo tarkastella erikseen.

180 pikselin Apple-kuvakkeella on eri tehtävä kuin selainkuvakkeella. Applen verkkosovellusohje kertoo kotinäyttökuvan apple-touch-icon-määrityksestä. Pieni selainkuvake ei ole hyvä lähtökuva suurempaan käyttöön.

ZIP sisältää yhdeksän tiedostoa. Erilliset 32 ja 48 pikselin PNG:t sopivat niitä pyytäviin asetuksiin; kaikkia ei tarvitse linkittää ICO:n ja 96 pikselin PNG:n rinnalle. Asennusteksti on sinua varten, ei sivuston kävijöille julkaistava tiedosto.

Valitse läpinäkyvyys ja reunatila harkiten

Läpinäkyvä selainkuvake näkyy käyttöliittymän taustaa vasten. Testaa tumma symboli tummalla ja vaalea vaalealla. Jos kuvio häviää, käytä erottuvaa ääriviivaa tai yhtenäistä taustaväriä.

Pixilon läpinäkyvyysasetus koskee ICO:ta sekä 32, 48 ja 96 pikselin PNG:itä. Apple-kuvake sekä 192 ja 512 pikselin kuvat saavat aina valitun yhtenäisen taustan. Taustaväri vaikuttaa niihin myös selainkuvakkeiden ollessa läpinäkyviä.

Läpinäkyvyys ei poista kuvan valmista taustaa. Jos logon ympärillä on valkoisia pikseleitä, ne pysyvät valkoisina. Aloita aidosti läpinäkyvästä kuvasta, jos haluat läpinäkyvän ympäristön.

Reunatilan prosentti koskee jokaista sivua. 10 % jättää neliökuvalle 80 % leveydestä, 20 % vain 60 %. Jälkimmäisessä tapauksessa kuvio on 16 pikselin kuvakkeessa noin 10 pikseliä leveä. Sopiva tila selkeyttää, liiallinen pienentää kuviota liikaa.

Tarkista myös lähtökuvan omat marginaalit. Jos logo täyttää vain PNG:n keskimmäisen puolikkaan, lisätilan nollaaminen ei poista valmista tyhjää aluetta. Rajaa tarpeeton tila ensin pois ja säädä sitten generaattorin reunatilaa.

Vertaa oletusasetusta pienempään ja suurempaan arvoon. Katso ensin 16 pikselin kuvaa, sitten suurempaa. Prosentti koskee koko kuvapohjaa, ei vain sen sisällä olevaa värillistä muotoa.

Faviconin lisääminen WordPressiin

Käytä WordPressin Sivustokuvake-toimintoa. Favicon-ohje suosittelee neliömäistä PNG:tä, vähintään 512 × 512 pikseliä. Versiosta 6.5 alkaen valitse Asetukset → Yleinen, valitse kuva ja tallenna. Vanhemmissa versioissa asetus voi olla kohdassa Ulkoasu → Mukauta → Sivuston identiteetti.

Toimintoa tukevassa lohkoteemassa asetus voi löytyä myös kohdasta Ulkoasu → Muokkain → Identity. Valikkojen nimet riippuvat käyttöliittymän kielestä. Katso tarvittaessa Site Editor Identity -ohje.

Pixilon icon-512.png on sopiva generoitu PNG tähän käyttöön. Siinä on yhtenäinen tausta, joten tarkista väri. Voit käyttää myös sopivaa alkuperäistä neliö-PNG:tä läpinäkyvyyden säilyttämiseksi.

1. Valitse PNG Sivustokuvake-kenttään.
2. Tallenna asetus ja avaa julkinen etusivu sekä yksi alasivu.
3. Tarkista välilehti. Jos jokin muu osa tarjoaa vanhan kuvakkeen, seuraa vianmääritysohjeita.

WordPress tekee viittaukset puolestasi. ZIP ei ole teema tai lisäosa, eikä HTML-määrityksiä lisätä artikkelin sisältöön.

Sivuston logo ja sivustokuvake ovat eri asetuksia. Yläreunan leveän logon vaihtaminen ei välttämättä muuta välilehden kuvaketta. Tallenna nimenomaan kuvaketta ohjaava asetus.

Luo logosta favicon Pixilolla

1. Valitse yksi kuva. Avaa favicon-generaattori ja valitse enintään 25 Mt:n JPG, PNG tai WebP. Kuvan kumpikin sivu saa olla enintään 8000 pikseliä ja koko kuva enintään 32 miljoonaa pikseliä.
2. Valitse sovitus. Sovitus säilyttää koko kuvan ja mittasuhteet. Neliörajaus ottaa keskeltä neliön. Tarkista, ettei tärkeää sisältöä leikkaudu pois.
3. Säädä reunatila ja tausta. Vertaa pieniä selainkuvakkeita ja Apple-esikatselua. Valitse, haluatko selainkuvakkeet läpinäkyvinä.
4. Lataa tarvitsemasi tiedostot. ZIP-painike antaa koko paketin, yksittäinen lataus sopii tiettyyn kuvakekenttään.
5. Asenna ja testaa. Käytä sivustosi asetuksia tai alla olevia HTML-ohjeita. Tarkista julkaistu sivusto, älä vain esikatselua.

Säädä esikatselut sopiviksi ja lataa. Erillistä tallennusta ei tarvita: lataus käyttää uusimpia valintoja. Jo laitteelle tallennettu tiedosto ei muutu myöhemmin, joten lataa uusi versio muutosten jälkeen.

Lähtökuva ja tulokset pysyvät laitteellasi, eikä kuvaa lähetetä Pixilon palvelimelle. Kuva ja asetukset ovat avoimen sivun muistissa. Lataa tulos ennen sivun sulkemista tai päivittämistä.

”Valitse toinen kuva” palauttaa kuvan valitsimen. Nykyiset asetukset säilyvät, joten tarkista sovitus, reunatila ja tausta myös uudelle kuvalle.

Esimerkki: leveästä logosta toimivaksi kuvakkeeksi

Kuvitellaan leipomolle 1200 × 600 logo, jossa on leivän kuva ja pitkä nimi. Seuraava on esimerkkityönkulku, ei artikkelin kuvista tehty mittaus.

1. Erota symboli. Vie leivän kuva alkuperäisestä aineistosta neliömäisenä 512 × 512 PNG:nä. Älä ota logosta pientä kuvakaappausta.
2. Poista tarpeettomat marginaalit. Tarkista PNG:n tyhjät reunat. Säilytä leivän reunat mutta anna symbolille tarpeeksi tilaa neliössä.
3. Vertaa pieniä esikatseluja. Aloita sovituksesta ja oletusreunatilasta. Jos leivän viilto häviää 16 pikselissä, yksinkertaista alkuperäistä kuviota sumean kopion suurentamisen sijaan.
4. Testaa tausta. Jos tumma ääriviiva häviää tummalla pinnalla, kokeile erottuvaa yhtenäistä selainkuvakkeen taustaa. Tarkista myös Apple-kuva.
5. Lataa toteutustavan mukaan. HTML-sivuston selain- ja Apple-kuvakkeiksi sopivat ICO, 96 pikselin PNG ja Apple-kuva. WordPressiin käytä 512 pikselin PNG:tä.

Kuvakkeen pitäisi olla tunnistettava ennen asennusta. Jos vain suuri esikatselu näyttää hyvältä, muokkaa lähtökuvaa. Tiedostopääte ei korjaa ahdasta sommittelua.

Faviconin lisääminen HTML-sivustolle

Pura ZIP ja sijoita valitsemasi kuvat sivuston julkaistavaan kansioon. Alla olevilla juuripoluilla ICO:n pitää löytyä osoitteesta kuten https://example.com/favicon.ico. Säilytä kuvat lähdekansiossa, josta sivuston rakennusvaihe kopioi ne julkaisuun. Pelkkään automaattisesti luotuun julkaisukansioon lisätyt tiedostot voivat kadota seuraavan rakennusvaiheen aikana.

Lisää kaksi ensimmäistä määritystä sivun <head>-osaan selainkuvakkeita varten. Kolmas lisää Apple-kotinäyttökuvan. Yhteiseen pohjaan lisätyt määritykset pitävät etusivun ja alasivujen viittaukset samoina.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href kertoo tiedoston sijainnin ja sizes kuvan mitat. Selain valitsee kuvakkeen muun muassa muodon, koon ja muiden määritysten perusteella; ensimmäistä määritystä ei aina valita. Katso MDN:n rel="icon"-ohje.

Jos kuvat ovat kansiossa /icons/, päivitä kaikki kolme polkua: /icons/favicon.ico, /icons/favicon-96x96.png ja /icons/apple-touch-icon.png. Kuvan sijainnin ja viittauksen pitää vastata toisiaan.

Polun alussa oleva / tarkoittaa verkkotunnuksen juurta. Jos sivusto julkaistaan alikansioon kuten /portfolio/, käytä kyseisen julkaisun oikeita polkuja. Avaa osoitteet suoraan julkaisun jälkeen.

Etsi ensin head-osan nykyiset favicon- ja manifestimääritykset. Korvaa vanhentuneet viittaukset tarvittaessa. Vanhan teemakuvakkeen jättäminen uuden rinnalle vaikeuttaa valitun kuvan selvittämistä.

Valinnainen vaihe: lisää tai päivitä sovellusmanifesti

Ohita tämä osio, jos tarvitset vain selainkuvakkeet. Manifesti on erillinen määritys eikä sitä tarvita välilehtikuvakkeen näyttämiseen.

Sovellusmanifesti on JSON-tiedosto, joka kuvaa sovellusta ja sen kuvakkeita. Pixilon site.webmanifest sisältää vain kuvakeviittaukset. Yhdistä ne nykyiseen manifestiin korvaamatta nimeä, aloitusosoitetta tai näyttötilaa. web.devin manifestiopas selittää nämä kentät.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Jos käytät uutta kuvakemanifestia, lisää alla oleva viittaus yhteiseen head-osaan. Jos sivusto jo linkittää toiseen manifestiin, päivitä sitä uuden kilpailevan viittauksen sijaan.

<link rel="manifest" href="/site.webmanifest">

Kansiossa /icons/ olevan manifestin viittaus on href="/icons/site.webmanifest". Muuta myös JSON-kuvapolut muotoon /icons/icon-192.png ja /icons/icon-512.png: alkava vinoviiva osoittaa verkkotunnuksen juureen, ei manifestin kansioon.

Kuvakkeiden määritys on purpose: "any". Ne eivät ole maskable-kuvakkeita, joissa tärkeät osat pitää sijoittaa kestämään laitteen pyöreä tai muunmuotoinen rajaus. Pelkkä taustaväri ei riitä tähän. Älä muuta tarkoitusta ilman sopivaa suunnittelua ja testausta. MDN:n kuvakkeiden käyttötarkoitusohje selittää eron.

Tiedosto sisältää edelleen vain kuvakkeet. Se ei ole valmis sovellusmääritys eikä tee sivustosta yksinään asennettavaa.

Mitä favicon tekee Googlen haussa?

Tunnistettava kuvake auttaa tunnistamaan sivuston hakutuloksessa. Se tukee ilmettä ja käytettävyyttä, ei takaa parempaa sijoitusta tai enemmän napsautuksia.

Googlen favicon-ohje edellyttää vähintään 8 × 8 pikselin neliötä ja suosittelee yli 48 × 48 kokoa. Paketin 96 pikselin PNG sopii tähän. Linkitä se etusivulta, pidä osoite samana ja salli Googlebotin lukea etusivu sekä Googlebot-Imagen lukea kuvake.

Google käyttää yhtä kuvaketta palvelinnimeä kohti, esimerkiksi example.com; osio example.com/blog/ ei saa omaa hakukuvaketta. Näkyminen ei ole taattua. Uusi indeksointikierros ja käsittely voivat kestää päivistä viikkoihin. Etusivun indeksointipyyntö Search Consolessa ei takaa välitöntä päivitystä.

Jos selain näyttää uuden mutta Google vanhan kuvakkeen, tarkista julkiset tiedostot ja etusivun määritykset. Toimivan kuvan jatkuva vaihtaminen vaikeuttaa sen selvittämistä, mitä versiota on käsitelty.

Miksi favicon puuttuu tai näyttää vanhan kuvan?

Erota asennusvirhe välimuistin vanhasta kopiosta. Jos kuvan osoite ei toimi, sivun päivittäminen ei korjaa sitä. Jos osoite näyttää oikean kuvan mutta välilehti ei, tarkista määritykset ja välimuisti.

Avaa kuvan tarkka osoite uuteen välilehteen. Sen pitää näyttää kuva eikä etusivua, kirjautumista tai virhesivua. Tarkempaan selvitykseen avaa selaimen kehittäjätyökalujen Network-välilehti ja päivitä sivu. Tila 200 ei riitä, jos vastaus sisältää HTML:ää kuvan sijaan.

Tarkista julkaistu head-osa etusivulla ja alasivulla. Pohjan muutos ei ehkä ole päätynyt julkaisuun tai toinen komponentti lisää vanhan viittauksen. Jäljitä asentamiesi tiedostojen nimiä ja polkuja.

Kuvake voi olla selaimen välimuistissa erillään sivusta. Sulje ja avaa välilehti, kokeile uutta selainprofiilia tai toista selainta. Tavallinen päivitys ei aina vaihda kuvaketta heti, eivätkä nämä testit takaa kaikkien selainten tai hakutulosten välitöntä muutosta.

Jos sivusto käyttää CDN:ää tai service workeria, tarkista, tarjoaako se vanhaa sivua tai kuvaketta. Päivitä kyseinen välimuisti hostingin tai sovelluksen kautta. Tee yksi korjaus kerrallaan ja tarkista tulos ennen seuraavaa.

Tarkista ennen viimeistelyä

• Kuvio on tunnistettava 16 ja 32 pikselin koossa ilman suurentamista.
• Reunat ja värit erottuvat sekä vaalealla että tummalla taustalla.
• Ladatut kuvat vastaavat lopullista sovitusta, reunatilaa ja taustaa.
• Jokainen kuvakeosoite avaa oikean tiedoston julkaisun jälkeen.
• Yhteisen head-osan viittaukset ovat oikeat eikä vanhoja kaksoismäärityksiä jää.
• Apple-kuva ja manifesti osoittavat julkaistuihin tiedostoihin.
• Nykyisen sovellusmanifestin muut asetukset säilyvät.
• Google voi lukea etusivun ja kuvakkeen, jos tavoittelet hakutuloskuvaketta.

Säilytä alkuperäinen aineisto ja lopullinen paketti yhdessä. Kirjaa, ohjaako kuvaketta HTML-pohja, WordPressin asetus vai sivustotyökalu. Se helpottaa seuraavaa ilmeen muutosta.

Usein kysytyt kysymykset

Mikä faviconin koko on paras?

Valitse selkeä neliökuva, jonka koko riittää tarvittuihin versioihin. 512 × 512 kattaa paketin suurimman kuvan, mutta sitä ei tarvita pelkkää pientä välilehteä varten. Kokotaulukko kertoo käyttötarkoitukset.

Tarvitaanko sekä ICO että PNG?

Ei jokaisessa toteutuksessa. Pixilon HTML-esimerkissä on pieniä kuvia sisältävä ICO ja suurempi PNG. Julkaisujärjestelmä voi tehdä versiot yhdestä lähteestä. Noudata käyttämäsi asetuksen vaatimuksia.

Voiko faviconin tausta olla läpinäkyvä?

Kyllä, selainkuvakkeet voivat säilyttää läpinäkyvyyden. Tarkista erottuvuus eri taustoilla. Kotinäyttökuvakkeet saavat valitun yhtenäisen taustan, eikä asetus poista lähdekuvan valmista taustaa.

Miksi logo näyttää sumealta faviconina?

Lähtökuva voi olla sumea tai sisältää liikaa yksityiskohtia. Suurentaminen ei korjaa kumpaakaan. Käytä selkeää alkuperäistä, yksinkertaista pieniä osia ja katso todellisen koon esikatselut.

Ladataanko ZIP suoraan WordPressiin?

Ei. Pura paketti ja valitse sopiva neliö-PNG, esimerkiksi icon-512.png, Sivustokuvake-asetuksessa. Paketti ei ole teema tai lisäosa.

Parantaako favicon hakukoneoptimointia?

Se tukee yhtenäistä ja tunnistettavaa ilmettä. Se ei kuitenkaan takaa parempia hakusijoituksia. Noudata Googlen vaatimuksia ja anna aikaa käsittelyyn; kelpoisuus ei takaa näkymistä.

Tiivistä tekoälylläChatGPT (avautuu uuteen välilehteen)Grok (avautuu uuteen välilehteen)Google (avautuu uuteen välilehteen)Perplexity (avautuu uuteen välilehteen)Claude (avautuu uuteen välilehteen)