Faviconin lisääminen WordPressiin (4 helppoa tapaa)

Seuraava artikkeli auttaa sinua: Faviconin lisääminen WordPressiin (4 helppoa tapaa)

Haluatko lisätä WordPress-faviconin sivustollesi?

Favicon on kuvake, joka näkyy selaimen välilehdissä, kun vierailet verkkosivustoilla.

Tässä viestissä opastamme sinut faviconin lisäämisen vaiheissa WordPressiin useilla tavoilla, sivuston oletuskuvakeominaisuudesta manuaaliseen tapaan.

Aloitetaan.

4 helppoa tapaa vaihtaa WordPress-favicon

Näet monien uusien WordPress-sivustojen oletusfaviconin alla olevassa kuvassa:

Se on WordPress-logo, vaikka jotkut isännät, kuten Bluehost, lisäävät omia suosikkejaan uusille palvelimilleen isännöityille sivustoille.

Riippumatta siitä, miltä suosikkikuvasi näyttää tällä hetkellä, aiomme oppia muuttamaan sitä.

Voit käyttää yhtä neljästä mahdollisesta menetelmästä:

1. WordPress-muokkausohjelma
2. WordPress-laajennus
3. Sinun teemasi
4. Sen lisääminen manuaalisesti

Aloitetaan ylhäältä.

1. Käytä WordPress-muokkausohjelmaa

Tässä on helpoin tapa vaihtaa WordPress-favicon:

1. Varmista, että sinulla on WordPress-ystävällinen favicon-kuva. WordPress-faviconin vakiokoko on 512px x 512px PNG-, ICO- tai GIF-muodossa, vaikka PNG-muotoa suositellaan.
2. Siirry kohtaan Ulkoasu → Mukauta.
3. Avaa Sivuston tunniste -välilehti.
4. Napsauta Sivustokuvaketta.
5. Lataa favicon-kuvatiedostosi.
6. Napsauta Julkaise.

Käydään läpi nämä vaiheet.

1.1 Varmista, että sinulla on WordPress-ystävällinen favicon-kuva

WordPress-faviconin tulee olla neliön muotoinen kuva, erityisesti 512x512px. Voit lukea alta vinkkejämme WordPress-faviconien luomiseen.

Kuvan tulee olla ICO-, PNG- tai GIF-muodossa, mutta suosittelemme käyttämään 512x512px PNG-kuvaa paremman tuen saamiseksi kaikkialla.

Jos latasit kuvakkeen kuvakekirjastosivustolta ja se tuli vain SVG-muodossa, käytä sivuston kaltaista Favicon.io tai CloudConvert muuntaa sen.

Siellä on plugin nimeltä SVG Favicon jonka avulla voit ladata SVG-faviconit WordPressiin, mutta suosittelemme käyttämään jotakin tämän viestin menetelmistä (erityisesti nykyistä menetelmää, menetelmää 1), koska niillä on paras pitkän aikavälin tuki, mikä tarkoittaa, että favicon-kuvasi ei todennäköisesti hajoa. tulevaisuudessa.

1.2 Avaa WordPress-muokkausohjelma

Avaa WordPress-muokkaustoiminto joko valitsemalla Ulkoasu → Mukauta vasemmanpuoleisesta järjestelmänvalvojan valikosta selaamalla WordPress-hallintapaneelia tai napsauttamalla Mukauta-painiketta ylemmässä hallintapalkissa, kun tarkastelet sivustosi käyttöliittymää.

1.3-4 Muokkaa sivustokuvaketta

Sinun pitäisi nyt tarkastella WordPress-muokkausohjelmaa.

Avaa Sivuston tunniste -välilehti…

…ja napsauta siellä Valitse sivustokuvake -vaihtoehtoa.

1.5 Lataa favicon-kuvatiedosto

Käytä WordPress Media Libraryä ladataksesi suosikkikuvatiedostosi.

Jos näet virheilmoituksen, jossa lukee “Anteeksi, et saa ladata tätä tiedostotyyppiä”, kun yrität ladata ICO-tiedostoa sivustollesi, käytä sen sijaan PNG-versiota.

Favicon.io antaa sinulle useita tiedostoja ZIP-kansiossa, kun käytät sitä SVG-tiedostojen muuntamiseen, mukaan lukien 512px 512px PNG-versio.

Favicon.io antaa sille nimeksi “android-chrome-512×512”. Nimeä se vain “faviconiksi” ja olet valmis.

Varmista, että favicon-kuva on valittu, ja napsauta sitten Valitse.

1.6 Tallenna uusi suosikkikuvasi

Nyt valitsemasi favicon-kuvan pitäisi näkyä sivustosi selaimen välilehdessä.

Tallenna se napsauttamalla Julkaise.

Nyt sinun pitäisi nähdä uusi favicon-kuvasi selaimen välilehdellä, jossa sivustosi on avattu.

2.1 Käytä WordPress Favicon -laajennusta – laajennus 1

Näin voit lisätä faviconin WordPressiin plugin-menetelmällä:

1. Asenna ja aktivoi RealFaviconGeneratorin Favicon.
2. Siirry kohtaan Ulkoasu → Favicon.
3. Napsauta Valitse tiedosto mediakirjastosta ja lataa se tarvittaessa mediakirjastoon.
4. Napsauta Luo favicon.
5. Määritä faviconisi ulkoasu.
6. Napsauta Luo suosikkikuvasi ja HTML-koodisi.

2.1.1 Asenna laajennus

Siirry kohtaan Plugins → Add New ja etsi “favicon”.

Etsi sitten Favicon by RealFviconGeneratorja napsauta Asenna nyt ja aktivoi.

2.1.2 Avaa laajennuksen asetukset

Siirry kohtaan Ulkoasu → Favicon.

2.1.3 Lataa mediakirjastoon ja valitse suosikkikuvasi mediakirjastosta

Napsauta Valitse mediakirjastosta -painiketta.

Jos sinulla on jo kuva WordPress-mediakirjastossa, valitse se. Jos ei, siirry eteenpäin ja lataa se.

2.1.4-6 Luo suosikkikuvasi

Napsauta Luo favicon. Tämä ohjaa sinut laajennuksen sivustolle, jossa voit tehdä muutoksia suosikkikuvakkeeseesi ennen sen käyttöönottoa sivustossasi.

Koska käytät tätä verkkosivustoa etkä sovellusta varten, sinun tarvitsee vain määrittää asetukset Favicon for Desktop Browsers and Google Result Pages -osiossa.

Jos latasit 512 x 512 pikseliä kuvatiedoston ja pidät tavasta, jolla suosikkikuvasi näkyy esikatselukuvissa, sinun ei tarvitse tehdä muutoksia.

Voit kuitenkin leikkiä asetuksilla mukauttaaksesi suosikkikuvasi ulkoasua.

Kun olet valmis, vieritä alas alas ja napsauta Luo suosikkikuvasi ja HTML-koodisi.

Sinut ohjataan takaisin WordPressiin, jossa lopullinen asennus tapahtuu. Näet sitten esikatselut live-favicon-ulkoasi.

2.2 Käytä WordPress Favicon -laajennusta – laajennus 2

Tämä on toissijainen menetelmä tapaan 2 verrattuna, jos et halua käyttää RealFaviconGeneratorin Faviconia.

Noudata näitä ohjeita lisätäksesi faviconin WordPress-sivustollesi laajennuksen avulla:

1. Asenna ja aktivoi All in One Favicon sivustollesi.
2. Napsauta All in One Favicon -valikkokohtaa.
3. Etsi käyttöliittymän asetusten lataustapa, joka vastaa kuvatyyppiäsi.
4. Lataa suosikkikuvasi.

2.2.1 Asenna All in One Favicon

Asentaa Kaikki yhdessä Faviconissasiirry kohtaan Plugins → Add New ja etsi “kaikki yhdessä faviconissa”.

Asenna sitten laajennus napsauttamalla Asenna nyt ja aktivoi se sitten Aktivoi.

2.2.2 Napsauta laajennuksen valikkokohtaa

All in One Favicon lisää uuden valikkokohdan vasemmanpuoleiseen järjestelmänvalvojan valikkoon.

Klikkaa sitä.

2.2.3-4 Lataa suosikkikuvasi

All in One Favicon tukee neljää kuvaketyyppiä: ICO, PNG, GIF ja Apple Touch -kuvake.

Etsi Frontend Settings -paneelista tiedosto, joka vastaa ladattavaa tiedostotyyppiä.

Jälleen, jos tiedosto on SVG-muodossa, muunna se ICO-, PNG- tai GIF-tiedostotyypiksi.

Napsauta sitten Lataa ja lähetä suosikkikuvasi laajennukseen.

Näyttää siltä, ​​​​että mitään ei tapahtunut, kun teet tämän, mutta älä huoli, laajennus latasi silti favicon-kuvasi sivustolle.

Sinun tarvitsee vain napsauttaa Tallenna muutokset, jotta se tulee näkyviin.

Tämä menetelmä lisää faviconin vain selaimen välilehdelle, kun tarkastelet sivustoasi käyttöliittymästä.

Jos haluat suosikkikuvasi näkyvän katsellessasi WordPress-hallintapaneelia, lataa se myös Backend-asetuksiin.

Varoitus plugin-menetelmän käytöstä

Tämä menetelmä voi varmasti auttaa sitomisessa, kun yleinen WordPress-muokkausmenetelmä ei toimi, mutta suosittelemme löytämään tavan saada menetelmä toimimaan tällä menetelmällä yhdestä yksinkertaisesta syystä: kun poistat favicon-laajennuksen, poistat myös sinun suosikkisi.

Joten jos joskus huomaat, että sinun on poistettava jokin näistä laajennuksista, varmista, että löydät vaihtoehtoisen tavan, kuten menetelmän 1, lisätäksesi faviconin WordPress-verkkosivustollesi.

Joskus WordPress-laajennukset menettävät tuen tai niistä tulee tietoturvaongelmien pesäke. Nämä ovat vain muutamia esimerkkejä skenaarioista, jotka saavat monet WordPress-käyttäjät poistamaan laajennukset sivustoistaan.

3. Teeman käyttäminen

Teemoilla oli aiemmin favicon-asetukset sisäänrakennettuna teemaasetuspaneeliin.

Yhä useammat teemat käyttävät kuitenkin WordPress-muokkaustyökalua, mikä tarkoittaa, että monet luopuvat omista favicon-toiminnoistaan ​​ja antavat sinun käyttää WordPressiä sen sijaan.

Esimerkiksi Astralla on teemaasetuspaneelissa Sivuston identiteetti -vaihtoehto, mutta se yksinkertaisesti avaa Sivuston identiteetti -välilehden WordPress-muokkaustyökalussa uudella välilehdellä.

Myös Kadence ja GeneratePress tekevät tämän.

Jos käytät lohkopohjaista teemaa, voit itse asiassa muokata suosikkikuvakettasi lohkoeditorissa.

Tee tämä joko luomalla uusi sivu tai valitsemalla Ulkoasu → Muokkaus.

Lisää sivulle uusi lohko ja valitse Sivuston logo -lohko.

Vie hiiri logon päälle, jos sellainen on jo näkyvissä, ja napsauta Korvaa ja valitse sitten joko Mediakirjasto-vaihtoehto tai Lataa.

Lataa seuraavaksi tai valitse suosikkikuvasi.

Avaa lohkon asetuspaneeli ja ota käyttöön Käytä sivustokuvakkeena -vaihtoehto.

Napsauta sitten Tallenna ja poista Logo-vaihtoehdon valinta, jos haluat käyttää eri kuvaa sivustosi logona.

Napsauta sitten uudelleen Tallenna ottaaksesi faviconin käyttöön sivustossasi.

4. Lisää WordPress-favicon sivustollesi manuaalisesti

Tämä on yksinkertaisin tapa lisätä favicon sivustollesi manuaalisesti:

1. Käytä RealFaviconGeneratoria muuntaaksesi 512px x 512px PNG-favicon-kuvasi HTML-koodiksi.
2. Lataa ja pura favicon-paketti ja lataa se sitten aktiivisen teemasi kansioon.
3. Asenna WPCode sivustollesi.
4. Kopioi ja liitä favicon-koodi WPCoden Otsikko-osioon.

4.1 Luo suosikkikuvasi HTML-koodi

Mene RealFviconGeneratorin sivustoja napsauta Valitse suosikkikuvasi. Tämän pitäisi olla 512 x 512 pikselin PNG-kuva parhaan tuloksen saavuttamiseksi.

Käytä RealFaviconGeneratorin asetuksia määrittääksesi faviconisi ulkoasun, jos haluat.

Sinun ei tarvitse tehdä tätä, jos olet luonut suosikkikuvakkeen etukäteen ja ladannut 512 x 512 pikseliä kuvan.

Vieritä sitten sivun alaosaan ja napsauta Luo suosikkikuvasi ja HTML-koodisi.

Sinulla pitäisi nyt olla suosikkikuvakkeesi HTML-koodi.

Pidä tämä verkkosivu auki, kun teet muita vaiheita.

4.2 Lataa favicon-paketti teemakansioosi

Tämä vaihe edellyttää aktiivisen teemasi kansion käyttöä. Voit tehdä tämän FTP:n tai isäntäsi tiedostonhallinnan kautta.

Emme mene yksityiskohtiin tämän tekemisestä, koska siellä on paljon opetusohjelmia, jotka voivat auttaa sinua.

Sen sijaan ohjeistamme sinua lataamaan favicon-pakettisi RealFaviconGeneratorista…

[realfavicongenerator-download-favicon-package]

…ja pura kaikki tiedostot siitä.

Lisää sitten kaikki puretut tiedostot sivustosi juurihakemistoon, joka on sama kansio, jossa wp-content ja wp-admin ovat.

4.3 Asenna WPCode

WPCode on ilmainen laajennus, jonka avulla voit lisätä koodia teematiedostoihin käyttämättä niitä, mikä voi olla ylivoimaista, jos et ole koskaan tehnyt sitä ennen.

Sen avulla voit myös lisätä koodia otsikkotiedostoon ilman, että sinun tarvitsee luoda alatason teemaa.

Siirry kohtaan Plugins → Add New ja etsi “wpcode”.

Asenna ja aktivoi sitten laajennus.

4.4 Liitä koodi WPCodeen

WPCode lisää “Koodinpätkät” -kohdan järjestelmänvalvojan valikkoon.

Siirry kohtaan Koodinpätkät → Ylä- ja alatunniste.

Kopioi HTML-koodi RealFaviconGeneratorista ja liitä se Ylä- ja alatunniste -sivun Otsikko-osioon.

Aina kun näet termin “href”, lisää sivustosi URL-osoite lainausmerkin jälkeen. Käytä https, jos sivustosi käyttää sitä.

Koodissa on viisi href-attribuuttia, ja ne ovat kaikki peräkkäin.

Napsauta sitten Tallenna muutokset ottaaksesi favicon käyttöön sivustossasi.

Kuinka luoda WordPress-favicon

Helpoin tapa luoda mukautettu WordPress-favicon on luoda sellainen Favicon.io:n avulla. Sen avulla voit luoda faviconin alkukirjaimesta.

Voit muokata faviconin fonttia, fontin väriä, taustaväriä ja reunuksen muotoa.

Jos haluat käyttää kuvaketta favicon-kuvakkeena, lataa tai osta kuvakekirjastosta, joka tarjoaa attribuutiottomia kuvakkeita.

Attribuutiottoman kuvakkeen valitseminen antaa sinun käyttää kuvakekuvaa osana brändisi identiteettiä ilman tekijänoikeusongelmia. Sinun kannattaa kuitenkin tutustua kunkin kirjaston kuvakkeiden käyttöä koskeviin käytäntöihin varmuuden vuoksi.

Parasta kuvakekirjastoissa on tapa, jolla niiden avulla voit ladata kuvakkeita missä tahansa muodossa ja missä tahansa koossa.

Lopulliset ajatukset

Sivustosi suosikkikuvake ei ole sen tärkein osa, mutta se voi auttaa sinua luomaan bränditietoisuutta ja yhtenäisyyden tunteen brändisi suunnittelussa.

Suosittelemme tässä luettelossa olevan menetelmän 1 käyttöä, koska se on helpoin toteuttaa, mutta sinun ei pitäisi olla liikaa vaivaa minkään kanssa.

Ennen kuin luot suosikkikuvasi, selaa verkkoa muutaman päivän ajan tavalliseen tapaan ja ala kiinnittää huomiota muiden sivustojen käyttämiin faviconeihin. Siitä tulee mahtavaa inspiraatiota!