📌 Kuidas lisada WordPressis favicon: 3 viisi igale saidile

Sait ilma faviconita näeb välja poolik. Külastaja avab viis vahekaarti, otsib nende seast sinu oma ega leia seda, sest ikooni asemel on hall brauseri kohatäide. Väike asi? Jah. Aga just sellised pisiasjad kujundavad mulje: keegi hoolitses sinu eest või viskas kiiruga kokku.

WordPress on saidiikooni lisamise lihtsustanud paari klikini, kuid pooled saidiomanikud kas ei tea sellest funktsioonist või satuvad pärast üleslaadimist olukorda, kus favicon ei kuvata. Põhjus on peaaegu alati brauseri vahemälu või vale failisuurus.

Allpool on kolm toimivat viisi, kuidas WordPressis faviconit lisada: kohandaja kaudu (kõige lihtsam), käsitsi koodi abil ja pistikprogrammi kaudu. Lisaks ülevaade suuruse ja vormingu nõuetest, et ikoon ilmuks igal pool: vahekaartidel, järjehoidjates, iPhone'is ja Androidis.

💡 Kiirülevaade:

• Mis on favicon ja miks su sait seda vajab: brändituvastus, usaldus, vahekaartidel navigeerimine
• Failinõuded: standardmõõdus ruudukujuline pilt, PNG, ICO või SVG vorming
• 1. meetod: üleslaadimine „Välimus" → Kohanda kaudu (2 minutit, pistikprogramme pole vaja)
• 2. meetod: käsitsi lisamine functions.php või header.php kaudu (neile, kes teemasid redigeerivad)
• 3. meetod: Site Favicon pistikprogrammi paigaldamine (kui kohandaja pole saadaval)
• Mida teha, kui favicon ei kuvata: brauseri vahemälu, vana ICO, CDN

Miks su sait vajab faviconit ja millised on nõuded

Favicon (lühend sõnast favorite icon) on väike ikoon, mida brauser näitab vahekaardil lehe pealkirjast vasakul, järjehoidjates ja sirvimisajaloos. Kümmekonna avatud vahekaardiga kasutaja leiab su saidi hetkega üles just faviconi, mitte pealkirja teksti järgi.

Teine funktsioon on vähem ilmne: favicon aitab kaasa mikrobrandi loomisele. Kui keegi lisab lehe järjehoidjatesse või nutitelefoni avakuvale, ilmub sinna just saidiikoon. Ilma selleta asendab WordPress selle halli kohatäite või lehe kuvatõmmisega, mis näeb lohakas välja.

Suuruse ja vormingu nõuded

Alates 2014. aastast toetab WordPress saidiikooni üleslaadimist kohandaja kaudu. Nõuded on standardsed:

• Suurus: 512×512 pikslit. WordPress loob automaatselt vähendatud koopiad brauserite jaoks (32×32, 180×180 Apple'i puuteikooni jaoks, 192×192 ja 512×512 Androidi jaoks). Sa ei pea iga resolutsiooni jaoks eraldi faile üles laadima; tuum teeb seda ise. Rohkem saidiikooni nõuete kohta ametlikus WordPressi dokumentatsioonis.
• Vorming: PNG (soovitatav), ICO või SVG. PNG annab parima kvaliteedi võrkkesta ekraanidel. ICO, mis on vanade brauserite pärandvorming, on 2026. aastal praktiliselt ebavajalik.
• Mida faviconina kasutada: logo, mis on ruudukujulisena äratuntav ja olulisel vähendamisel loetav. Kolm-neli tähte värvilisel taustal toimib paremini kui keeruline illustratsioon.

Peamine reegel faili ettevalmistamisel: see peab olema ruudukujuline. WordPress kärbib mitteruudukujulist pilti jõuga ja tulemus ei pruugi sulle meeldida.

Kuidas WordPressis faviconit lisada: 3 meetodit

1. Meetod: kohandaja kaudu, kõige lihtsam

See meetod töötab igas kaasaegses WordPressi versioonis klassikalise teemaga. Plokiteemade (FSE) puhul on tee veidi erinev; näitan mõlemat.

Klassikaline teema (kohandaja):

• Logi WordPressi administraatorisse sisse.
• Mine Välimus → Kohanda.
• Vali Saidi identiteet jaotis. Mõnes teemas nimetatakse seda „Saidi teave" või „Saidi ikoon ja logo".
• Leia Saidi ikoon väli. Klõpsa „Vali saidi ikoon" ja laadi üles ruudukujuline PNG; WordPress eeldab vähemalt 512×512 pilti, vastavalt dokumentatsioonile.
• Vajadusel kärbi pilti sisseehitatud redaktoriga ja klõpsa „Salvesta muudatused".

Plokiteema (saidiredaktor, WordPress 5.9+):

Kui teema toetab täielikku saidiredigeerimist, asendab kohandajat saidiredaktor. Mine Välimus → Redaktor, ava Stiilid paneel või Seaded, leia Saidi ikoon jaotis ja laadi üles sama ruudukujuline pilt. Loogika on sama, liides on erinev.

Pärast salvestamist ava sait uues privaatses brauseriaknas; favicon peaks ilmuma vahekaardile. Kui see kohe ei ilmu, ära satu paanikasse: brauserid salvestavad faviconid agressiivselt vahemällu. Sellest lähemalt allpool KKK jaotises.

2. Meetod: käsitsi functions.php kaudu

Võimalus neile, kes redigeerivad alamteemat ega taha kohandajale loota. Lisa järgmine kood alamteema functions.php faili või Code Snippets pistikprogrammi kaudu:

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
}

Mis siin toimub: wp_head konks lisab iga lehe <head> sektsiooni kaks <link> silti. Esimene on standardne favicon brauseritele, teine on Apple'i puuteikoon Apple'i seadmetele (iPhone, iPad). Funktsioon get_stylesheet_directory_uri() tagastab alamteema URL-i; favicon tuleb paigutada sinna, teemakausta juure.

Faili ümbernimetamine favicon.ico-ks pole vajalik. WordPress töötab PNG-ga hästi ja brauserid mõistavad seda probleemideta. Peamine on standardmõõdus ruut.

Kui sa viitad faviconile mitte teemast, vaid saidi juurest, asenda get_stylesheet_directory_uri() funktsiooniga home_url() ja kohanda teed:

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

Pärast koodi lisamist laadi favicon.png vastavasse kausta FTP või hostingu failihalduri kaudu. Kontrolli tulemust privaatses brauseriaknas.

3. Meetod: pistikprogrammi kaudu

Kui kohandaja ei võimalda mingil põhjusel saidiikooni üles laadida (seda juhtub kohandatud ja aegunud teemade puhul), paigalda Site Favicon pistikprogramm, mis on minimalistlik ja tasuta. Paigalda see tavapärasel viisil: Pistikprogrammid → Lisa uus → otsi „Site Favicon" → Paigalda → Aktiveeri. Pärast aktiveerimist ilmub administraatoris menüüpunkt Seaded → Site Favicon, kus saad ikooni üles laadida ja kohe eelvaadet näha.

Teine võimalus on All in One SEO. Kui SEO pistikprogramm on saidil juba olemas, kontrolli selle seadeid: seal on saidiikooni üleslaadimise jaotis, mis teeb sama asja ilma täiendava pistikprogrammita. Kuid me ei soovita paigaldada rasket SEO komplekti ainult faviconi pärast; Site Favicon täidab ülesande, kaalub vähem ega lisa lisakoormust.

Pärast faviconi seadistamist ükskõik millise kolme meetodi abil kontrolli, kas ikoon tegelikult kuvatakse: ava sait inkognito režiimis ja vaata brauseri vahekaarti.

Ülaltoodud video on samm-sammuline demonstratsioon kõigist kolmest meetodist elaval WordPressi saidil. Kui pärast lugemist on mõne sammu osas endiselt kahtlusi, vaata videot: 1:15 näidatakse üleslaadimist kohandaja kaudu, 3:40 käsitsi meetodit.

⁉️🤔 Korduma kippuvad küsimused

Miks favicon ei kuvata pärast kohandaja kaudu üleslaadimist?

Enamikul juhtudel on probleem brauseri vahemälus. Faviconid salvestatakse agressiivselt vahemällu; brauser võib vana versiooni hoida mitu päeva. Ava sait inkognito režiimis (Chrome'is Ctrl+Shift+N): kui ikoon ilmub, on probleem tõepoolest vahemälus. Tühjenda brauseri vahemälu või oota, kuni see ise aegub. Teine levinum põhjus on see, et favicon laaditi üles ICO vormingus, samas kui brauser eeldab PNG-d. WordPress alates versioonist 4.3 eelistab PNG-d; laadi üles standardmõõdus ruut PNG-vormingus, nagu dokumentatsioon nõuab, ja probleem kaob.

Kas ma saan oma logo faviconina kasutada?

Saad ja peakski; see on tavapraktika. Kuid iga logo ei sobi. Kontrolli, kuidas su logo väikeses mõõdus välja näeb: kui detailid sulavad loetamatuks laiguks, tee lihtsustatud versioon. Hea näide on WordPressi ikoon (W sinisel taustal): äratuntav isegi tillukesena. Horisontaalne kümne tähega logo muutub olulisel vähendamisel halliks triibuks; faviconi jaoks kasuta ainult märki ilma tekstita.

Miks nõuab WordPress just sellises suuruses faviconit?

Jah, WordPressi jaoks. Tuum aktsepteerib just seda suurust lähtefailina ja loob automaatselt kõik vajalikud vähendatud koopiad; ametlik dokumentatsioon kinnitab minimaalset nõuet 512 px mõlemal küljel. Kui laadid üles väiksema faviconi (näiteks 128×128), toimub suurendamine 512 pikslini kvaliteedikaoga ja võrkkesta ekraanidel näeb ikoon udune välja. Erand on juhul, kui seod faviconi käsitsi koodi kaudu (2. meetod): siis saad ette valmistada mitu suurust ja määrata need eraldi <link> siltidega.

Kuidas faviconit eemaldada või asendada?

Asendamine toimub sama liidese kaudu, kuhu selle üles laadisid: Kohandaja → Saidi identiteet → Saidi ikoon → „Eemalda" ja seejärel laadi uus üles. Vana ikoon püsib brauseri vahemälus veel mõnda aega (kuni mitu päeva); see on normaalne. Täielikuks eemaldamiseks kasuta samas liideses nuppu „Eemalda", mille järel WordPress lõpetab faviconi siltide väljastamise ja brauser naaseb halli kohatäite juurde.

Kas favicon mõjutab SEO-d?

Otseselt mitte. Google ei kasuta faviconi olemasolu või puudumist parendustegurina. Kaudselt küll: faviconiga sait näeb professionaalsem välja ja kasutajad ajavad selle vahekaartidel navigeerides konkurentidega vähem segamini. See vähendab pogo-sticking määra (otsingutulemustesse naasmist), mida otsingumootorid kaudselt arvestavad. Lisaks näitab Google mõnikord favicone mobiilsetes otsingutulemustes; ikoon muudab katkendi visuaalselt märgatavamaks, mis parandab CTR-i.

Millist meetodit valida: lühike algoritm

Kui sul on standardne teema koos kohandajaga, kasuta 1. meetodit. See on kaks klikki ja WordPress teeb kogu tehnilise töö: suuruse muutmine, siltide genereerimine, Apple'i ja Androidi tugi. Üheksa WordPressi saiti kümnest lahendavad faviconi küsimuse just nii.

Kohandatud teema ilma saidiikooni toeta? Seo see functions.php kaudu (2. meetod); kolmerealise koodiga saad täieliku kontrolli suuruste ja vormingu üle. Jäta pistikprogramm (3. meetod) juhtudeks, kui pole saadaval ei kohandaja ega teema redigeerimine, näiteks kui sait on piiratud õigustega mitmikpaigalduses või töötad leheehitajaga, mis ei anna juurdepääsu functions.php-le.

Ja mis kõige tähtsam: pärast faviconi üleslaadimist kontrolli saiti uues brauseri inkognito režiimis. Ära looda tavalisele aknale; seal võib olla vahemällu salvestatud vana versioon või kohatäide ise. Näed vahekaardil ikooni? Valmis.