📌 Kuinka lisätä favicon WordPressissä: 3 tapaa mille tahansa sivustolle

Sivusto ilman faviconia näyttää keskeneräiseltä. Vierailija avaa viisi välilehteä, etsii sinun sivustoasi niiden joukosta eikä löydä sitä, koska kuvakkeen paikalla on harmaa selaimen paikkamerkki. Pieni asia? Kyllä. Mutta juuri nämä pienet asiat muokkaavat vaikutelmaa: joku välitti sinusta tai kyhäsi sivuston kiireessä.

WordPress on yksinkertaistanut sivustokuvakkeen lisäämisen muutamaan klikkaukseen, mutta silti puolet sivuston omistajista joko ei tunne tätä ominaisuutta tai törmää siihen, ettei favicon näy lataamisen jälkeen. Syy on melkein aina selaimen välimuisti tai väärä tiedostokoko.

Alla kolme toimivaa tapaa lisätä favicon WordPressissä: Mukauttimen kautta (helpoin), manuaalisesti koodilla ja lisäosan avulla. Lisäksi erittely koko- ja muotovaatimuksista, jotta kuvake näkyy kaikkialla: välilehdillä, kirjanmerkeissä, iPhonella ja Androidilla.

💡 Pikakatsaus:

• Mikä favicon on ja miksi sivustosi tarvitsee sellaisen: brändin tunnistettavuus, luottamus, välilehtinavigointi
• Tiedostovaatimukset: neliönmuotoinen, vakiokokoinen kuva, PNG-, ICO- tai SVG-muoto
• Tapa 1: lataus "Sivusto" → Mukautin -kohdan kautta (2 minuuttia, ei lisäosia)
• Tapa 2: manuaalinen lisäys functions.php- tai header.php-tiedoston kautta (niille, jotka muokkaavat teemoja)
• Tapa 3: Site Favicon -lisäosan asennus (jos Mukautin ei ole käytettävissä)
• Mitä tehdä, jos favicon ei näy: selaimen välimuisti, vanha ICO, CDN

Miksi sivustosi tarvitsee faviconin ja mitkä ovat vaatimukset

Favicon (lyhenne sanoista favorite icon) on pieni kuvake, jonka selain näyttää sivun otsikon vasemmalla puolella välilehdessä, kirjanmerkeissä ja selaushistoriassa. Käyttäjä, jolla on tusina avointa välilehteä, löytää sivustosi silmäyksellä sekunnin murto-osassa, juuri faviconin, ei otsikon tekstin perusteella.

Toinen tehtävä on vähemmän ilmeinen: favicon edistää mikrobrändin rakentamista. Kun joku lisää sivun kirjanmerkkeihin tai sivuston älypuhelimensa aloitusnäytölle, siihen ilmestyy juuri sivustokuvake. Ilman sitä WordPress korvaa sen joko harmaalla paikkamerkillä tai sivun kuvakaappauksella, mikä näyttää huolimattomalta.

Koko- ja muotovaatimukset

Vuodesta 2014 lähtien WordPress on tukenut sivustokuvakkeen lataamista Mukauttimen kautta. Vaatimukset ovat vakiomuotoiset:

• Koko: 512×512 pikseliä. WordPress luo automaattisesti pienennetyt kopiot selaimia varten (32×32, 180×180 Apple touch -kuvakkeelle, 192×192 ja 512×512 Androidille). Sinun ei tarvitse ladata erillisiä tiedostoja jokaista resoluutiota varten; ydin hoitaa sen itse. Lisätietoja sivustokuvakkeen vaatimuksista virallisessa WordPress-dokumentaatiossa.
• Muoto: PNG (suositeltu), ICO tai SVG. PNG antaa parhaan laadun retina-näytöillä. ICO, vanhojen selainten perinnemuoto, on käytännössä tarpeeton vuonna 2026.
• Mitä käyttää faviconina: logoa, joka on tunnistettava neliössä ja luettava huomattavasti pienennettynä. Kolme tai neljä kirjainta tekstiä värillisellä taustalla toimii paremmin kuin monimutkainen kuvitus.

Pääsääntö tiedostoa valmisteltaessa: sen on oltava neliönmuotoinen. WordPress rajaa ei-neliönmuotoisen kuvan väkisin, eikä lopputulos välttämättä miellytä sinua.

Miten lisätä favicon WordPressissä: 3 tapaa

Tapa 1: Mukauttimen kautta, yksinkertaisin

Tämä tapa toimii missä tahansa modernissa WordPress-versiossa, jossa on klassinen teema. Lohkoteemoille (FSE) reitti on hieman erilainen; näytän molemmat.

Klassinen teema (Mukautin):

• Kirjaudu WordPressin hallintapaneeliin.
• Siirry kohtaan Ulkoasu → Mukauta.
• Valitse Sivuston identiteetti -osio. Joissakin teemoissa sitä kutsutaan nimellä "Sivuston tiedot" tai "Sivuston kuvake ja logo".
• Etsi Sivustokuvake-kenttä. Klikkaa "Valitse sivustokuvake" ja lataa neliönmuotoinen PNG; WordPress odottaa vähintään 512×512 kokoista kuvaa, dokumentaation mukaan.
• Rajaa kuva tarvittaessa sisäänrakennetulla editorilla ja klikkaa "Tallenna muutokset".

Lohkoteema (Site Editor, WordPress 5.9+):

Jos teema tukee Full Site Editingiä, Site Editor korvaa Mukauttimen. Siirry kohtaan Ulkoasu → Editor, avaa Tyylit-paneeli tai Asetukset, etsi Sivustokuvake-osio ja lataa sama neliönmuotoinen kuva. Logiikka on sama, käyttöliittymä on erilainen.

Avaa tallennuksen jälkeen sivusto uudessa yksityisessä selainikkunassa; faviconin pitäisi ilmestyä välilehteen. Jos se ei ilmesty heti, älä hätäänny: selaimet tallentavat faviconit aggressiivisesti välimuistiin. Tästä lisää alla olevassa UKK-osiossa.

Tapa 2: manuaalisesti functions.php:n kautta

Vaihtoehto niille, jotka muokkaavat lapsiteemaa eivätkä halua luottaa Mukauttimeen. Lisää seuraava koodi lapsiteeman functions.php-tiedostoon tai Code Snippets -lisäosan kautta:

1
/**
2
 * Include favicon via wp_head.
3
 * The favicon.png file should be in the root of the child theme.
4
 */
5
add_action( 'wp_head', 'sdstudio_add_favicon' );
6
 
7
function sdstudio_add_favicon() {
8
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10
    echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11
}

Mitä tässä tapahtuu: wp_head-koukku lisää kaksi <link>-tagia jokaisen sivun <head>-osioon. Ensimmäinen on tavallinen favicon selaimille, toinen on Apple touch -kuvake Applen laitteille (iPhone, iPad). get_stylesheet_directory_uri()-funktio palauttaa lapsiteeman URL-osoitteen; favicon on sijoitettava sinne, teemakansion juureen.

Tiedoston nimeämistä favicon.ico-muotoon ei tarvita. WordPress toimii hyvin PNG:n kanssa, ja selaimet ymmärtävät sitä ongelmitta. Pääasia on vakiokokoinen neliö.

Jos linkität faviconin etkä teemasta vaan sivuston juuresta, korvaa get_stylesheet_directory_uri() funktiolla home_url() ja säädä polkua:

1
$favicon_url = home_url( '/favicon.png' );

Koodin lisäämisen jälkeen lataa favicon.png vastaavaan kansioon FTP:n tai hotellin tiedostonhallinnan kautta. Tarkista tulos yksityisessä selainikkunassa.

Tapa 3: lisäosan kautta

Jos Mukautin ei jostain syystä anna ladata sivustokuvaketta (näin tapahtuu räätälöidyissä ja vanhentuneissa teemoissa), asenna Site Favicon -lisäosa, joka on minimalistinen ja ilmainen. Asenna se tavalliseen tapaan: Lisäosat → Lisää uusi → etsi "Site Favicon" → Asenna → Ota käyttöön. Aktivoinnin jälkeen hallintapaneeliin ilmestyy Asetukset → Site Favicon -valikkokohta, jossa voit ladata kuvakkeen ja nähdä esikatselun välittömästi.

Toinen vaihtoehto on All in One SEO. Jos SEO-lisäosa on jo sivustolla, tarkista sen asetukset: siellä on sivustokuvakkeen latausosio, joka tekee saman asian ilman ylimääräistä lisäosaa. Emme kuitenkaan suosittele raskaan SEO-paketin asentamista pelkkää faviconia varten; Site Favicon hoitaa tehtävän, painaa vähemmän eikä lisää ylimääräistä kuormaa.

Kun olet määrittänyt faviconin millä tahansa kolmesta tavasta, varmista, että kuvake todella näkyy: avaa sivusto incognito-tilassa ja katso selaimen välilehteä.

Yllä oleva video on vaiheittainen esittely kaikista kolmesta tavasta toimivalla WordPress-sivustolla. Jos lukemisen jälkeen sinulla on vielä epäilyksiä jostakin vaiheesta, katso video: kohdassa 1:15 näytetään lataus Mukauttimen kautta, kohdassa 3:40 manuaalinen tapa.

⁉️🤔 Usein kysytyt kysymykset

Miksi favicon ei näy Mukauttimen kautta lataamisen jälkeen?

Useimmissa tapauksissa ongelma on selaimen välimuistissa. Faviconit tallennetaan välimuistiin aggressiivisesti; selain voi säilyttää vanhaa versiota useita päiviä. Avaa sivusto incognito-tilassa (Ctrl+Shift+N Chromessa): jos kuvake ilmestyy, ongelma on todellakin välimuistissa. Tyhjennä selaimesi välimuisti tai odota sen vanhenemista luonnollisesti. Toiseksi yleisin syy on, että favicon ladattiin ICO-muodossa, kun selain odottaa PNG:tä. WordPress versiosta 4.3 lähtien suosii PNG:tä; lataa vakiokokoinen neliö PNG-muodossa, kuten dokumentaatio vaatii, ja ongelma poistuu.

Voinko käyttää logoani faviconina?

Voit ja sinun pitäisi; se on vakiokäytäntö. Mutta jokainen logo ei sovellu. Tarkista, miltä logosi näyttää pienessä koossa: jos yksityiskohdat sulautuvat lukukelvottomaksi mössöksi, tee yksinkertaistettu versio. Hyvä esimerkki on WordPress-kuvake (W sinisellä taustalla): tunnistettava jopa hyvin pienessä koossa. Vaakasuora logo, jossa on kymmenen kirjainta tekstiä, muuttuu harmaaksi raidaksi huomattavasti pienennettynä; käytä faviconissa vain merkkiä ilman tekstiä.

Miksi WordPress vaatii faviconia juuri tässä koossa?

WordPressille kyllä. Ydin hyväksyy juuri tämän koon lähteenä ja luo kaikki tarvittavat pienennetyt kopiot automaattisesti; virallinen dokumentaatio vahvistaa vähimmäisvaatimukseksi 512 px kummallakin sivulla. Jos lataat pienemmän faviconin (esimerkiksi 128×128), skaalaus 512 pikseliin tapahtuu laadun heikentyessä, ja retina-näytöillä kuvake näyttää sumealta. Poikkeuksena on, jos linkität faviconin manuaalisesti koodilla (tapa 2): silloin voit valmistella useita kokoja ja määrittää ne erillisillä <link>-tageilla.

Miten poistan tai vaihdan faviconin?

Vaihto tapahtuu saman käyttöliittymän kautta, jossa latasit sen: Mukautin → Sivuston identiteetti → Sivustokuvake → "Poista" ja lataa sitten uusi. Vanha kuvake viipyy selaimen välimuistissa jonkin aikaa (jopa useita päiviä); tämä on normaalia. Täydellistä poistoa varten käytä "Poista"-painiketta samassa käyttöliittymässä, minkä jälkeen WordPress lopettaa favicon-tagien tulostamisen ja selain palautuu harmaaseen paikkamerkkiin.

Vaikuttaako favicon hakukoneoptimointiin?

Suoraan ei. Google ei käytä faviconin olemassaoloa tai puuttumista sijoitustekijänä. Epäsuorasti kyllä: sivusto, jossa on favicon, näyttää ammattimaisemmalta, ja käyttäjät sekoittavat sen epätodennäköisemmin kilpailijoihin välilehtiä selatessaan. Tämä vähentää pogo-sticking-ilmiötä (paluuta hakutuloksiin), jonka hakukoneet ottavat huomioon epäsuorasti. Lisäksi Google näyttää joskus faviconeja mobiilihakutuloksissa; kuvake tekee katkelmasta visuaalisesti huomattavamman, mikä parantaa klikkausprosenttia.

Mikä tapa valita: lyhyt algoritmi

Jos sinulla on vakio-teema Mukauttimella, käytä tapaa 1. Se on kaksi klikkausta, ja WordPress hoitaa kaiken teknisen työn: koon muuttamisen, tagien luonnin, Apple- ja Android-tuen. Yhdeksän kymmenestä WordPress-sivustosta ratkaisee favicon-kysymyksen juuri näin.

Räätälöity teema ilman sivustokuvakkeen tukea? Linkitä se functions.php-tiedoston kautta (tapa 2); kolmirivinen koodi antaa sinulle täyden hallinnan kokoihin ja muotoon. Säästä lisäosa (tapa 3) tapauksiin, joissa Mukautin tai teeman muokkaus ei ole käytettävissä, esimerkiksi jos sivusto on multisite-asennuksessa rajoitetuilla oikeuksilla tai työskentelet rakentajalla, joka ei anna pääsyä functions.php-tiedostoon.

Ja mikä tärkeintä: tarkista faviconin lataamisen jälkeen sivusto uudessa selaimen incognito-tilassa. Älä luota tavalliseen ikkunaan; siellä voi olla välimuistissa vanha versio tai itse paikkamerkki. Näkyykö kuvake välilehdessä? Valmista tuli.