Kuinka lisätä Favicon WordPress-sivustolle

Favicon tunnetaan myös sivustokuvakkeena, ja se on monella tapaa samanlainen kuin sovelluskuvake Windowsissa. Se on pieni kuva, joka näkyy selaimen välilehdissä sivuston nimen vieressä. Se on pieni mutta tärkeä elementti, jonka avulla voit helposti tunnistaa sivustot ja navigoida niihin selaimen välilehtipalkista. Favicon voi myös olla tehokas osa sivuston brändäystä, mutta uudet sivuston omistajat eivät välttämättä tiedä, kuinka se otetaan käyttöön.

Kuinka lisätä Favicon WordPress-sivustolle

Tämä opas käsittelee faviconin lisäämistä WordPress-verkkosivustollesi.

Kuinka lisätä Favicon WordPress-sivustolle

Voit lisätä faviconin WordPress-sivustollesi peräti neljällä eri tavalla. Yksinkertaisin tapa on käyttää WordPress Customizer -työkalua, mutta voit harkita vaihtoehtoista lähestymistapaa, jolla voit hallita faviconin ulkoasua paremmin.

WordPress Customizerin käyttäminen

WordPress Customizerin käyttö on yleensä nopein ja helpoin tapa lisätä uusi favicon milloin haluat.

  1. Avaa WordPress-hallintapaneeli.
  2. Napsauta sivuvalikon Ulkoasu-painiketta ja valitse sitten Mukauta.
    Wordpress Customize -vaihtoehto
  3. Siirry Sivuston identiteetti -välilehteen päästäksesi käyttämään erilaisia ​​sivuston mukautustyökaluja.
  4. Vieritä Sivustokuvake-osioon ja napsauta Valitse sivusto -kuvaketta.
    Valitse sivustokuvake WordPressissä
  5. Etsi olemassa oleva kuva WordPress-mediakirjastostasi käytettäväksi suosikkikuvaksesi tai lataa kuva laitteestasi.
  6. Kun olet valinnut kuvan, vahvista se napsauttamalla Valitse-painiketta.
    Valitse kuva mediakirjastosta
  7. Kuvan koosta riippuen saatat joutua rajaamaan sitä tai jatkamaan ilman sitä napsauttamalla Ohita rajaus.
  8. Viimeistele uusi suosikkikuvasi painamalla Valmis-painiketta.

Favicon-laajennuksen käyttäminen

WordPress on kuuluisa monista laajennuksistaan, joiden avulla voit parantaa sivustoasi useilla uusilla ominaisuuksilla ja toiminnoilla. Jotkut laajennukset voivat myös auttaa sinua lisäämään ja hallitsemaan suosikkikuvakkeita. Laajennukset antavat sinulle yleensä lisävaihtoehtoja suosikkikuvakkeiden muokkaamiseen verrattuna WordPress-muokkausohjelmaan. Näin se toimii:

  1. Siirry WordPress-hallintapaneelin Plugins-osioon ja napsauta Lisää uusi laajennus.
    Lisää uusi laajennusominaisuus WordPressiin
  2. Etsi valitsemasi favicon-laajennus. Aluksi suosittu on RealFaviconGeneratorin Favicon. Napsauta Asenna nyt valitsemasi laajennuksen kohdalla.
    Asenna Favicon WordPressiin
  3. Napsauta asennuksen jälkeen Aktivoi kytkeäksesi sen päälle.
  4. Kun laajennus on asennettu, voit viedä hiiren osoittimen Ulkoasu vasemmassa ruudussa ja lisätä uuden napsauttamalla Faviconia oikealla.
    Favicon-vaihtoehto laajennuksessa
  5. Napsauta Valitse mediakirjastosta joko ladataksesi tai valitaksesi suosikkikuvakkeen kirjastostasi.
    Faviconin valitseminen mediakirjastosta
  6. Paina Luo favicon -painiketta vieraillaksesi RealFaviconGenerator-sivustolla ja muokataksesi kuvaasi, lisäämällä marginaaleja tai vaihtamalla taustaa.
    Luo Favicon WordPress -vaihtoehto
  7. Napsauta Luo Favicon- ja HTML-koodi luodaksesi ja lisätäksesi uuden kuvasi WordPress-verkkosivustollesi.
    Viimeinen laajennusfaviconin asennusprosessi

WordPressin koko sivustoeditorin käyttäminen

Joskus saatat haluta käyttää WordPressin Full Site Editoria sivustosi kuvakkeen lisäämiseen. Tätä suositellaan erityisesti sivustoille, jotka toimivat lohkoteemalla.

  1. Napsauta järjestelmänvalvojan valikosta Ulkoasu ja editori.
    Wordpress Editor -vaihtoehto
  2. Siirry Patterns-alivalikkoon ja napsauta Otsikko.
    Mallit-alivalikko WordPressissä
  3. Aloita otsikkokuvion muokkaaminen painamalla kynäkuvaketta.
  4. Valitse +-painike ja etsi Site Logo -lohko, jonka voit sitten vetää ja pudottaa sivustosi otsikkoon.
    Sivuston logolohko WordPressissä
  5. Paina Lataa-painiketta ja valitse suosikkikuvasi olemassa olevasta kirjastostasi tai lähetä se laitteestasi.
  6. Etsi ja aktivoi Käytä sivustona -kuvake eston asetusten sivupalkista asettaaksesi valitsemasi kuvan suosikkikuvakkeeksi.
    Käytä sivustokuvakkeena vaihtoehto
  7. Vahvista muutokset painamalla Tallenna-painiketta.

Manuaalinen menetelmä

Voit myös lisätä faviconin 100 % manuaalisesti. Se vie hieman ylimääräistä aikaa ja vaatii yleensä hieman enemmän kokemusta ja WordPress-asiantuntemusta. Mutta jos tiedät mitä olet tekemässä, se voi olla hyvä tapa määrittää sivustokuvake juuri sellaiseksi kuin haluat.

  1. Suuntaa kohteeseen RealFviconGenerator verkkosivusto.
  2. Napsauta Valitse Favicon-kuvasi ja lataa kuva, jota haluat käyttää.
    Favicon-kuvan valitseminen verkossa
  3. Muokkaa tarvittaessa ja napsauta Luo Favicon- ja HTML-koodi, kun olet valmis.
    Viimeinen laajennusfaviconin asennusprosessi
  4. Lataa Favicon-paketti ja jätä tämä sivu auki, koska tarvitset silti siinä olevan koodin.
    Favicon paketti
  5. Käytä FTP:tä (File Transfer Protocol) päästäksesi käsiksi WordPress-tietoihisi.
  6. Siirry päähakemistoon ja lataa favicon-pakettisi.
  7. Avaa tiedosto header.php ja liitä aiemmin luomasi HTML-koodi suorittaaksesi sivustosi kuvakkeen asennuksen loppuun.

Miksi sinun pitäisi lisätä favicon WordPress-sivustollesi

Kuten näet, on olemassa useita tapoja lisätä suosikkikuvakkeita sivustollesi. Mutta saatat ihmetellä, miksi haluat alun perin lisätä faviconin tai tarvitsetko sellaisen. Tässä on joitain sivustokuvakkeiden käytön tärkeimmistä eduista:

Brändin identiteetti

Epäilemättä tärkein syy sivuston kuvakkeeseen on kehittää brändisi identiteettiä. Favicon on osa kuvaasi, kuten verkkosivuston nimi, logo ja tyyli. Se voi olla vain pieni kuvake, mutta sillä on suuri osa bränditietoisuuden rakentamisessa ja auttaa tekemään sivustostasi tai blogistasi helpompi tunnistaa.

Käyttäjäkokemus

Toinen kätevä syy sivustokuvakkeen luomiseen on käyttäjiesi hyödyksi. Monet ihmiset avaavat selaimessaan useita välilehtiä ja luottavat suosikkikuvakkeiden nopeaan navigointiin ja vaihtamiseen niiden välillä. Jos luot selkeän ja tunnistettavan kuvakkeen, käyttäjien on helpompi selata ja käyttää sivustoasi, vaikka monet muut sivustot avautuisivat samassa ikkunassa.

Lisää suosikkeja helposti

Mikään sivuston suunnittelu ei voi olla täydellinen ilman faviconia, ja on tärkeää varmistaa, että sivustosi kuvake on asetettu asianmukaisesti kaikkien käyttäjien nähtäville. Onneksi WordPress tarjoaa useita tapoja lisätä tai muuttaa sivustosi kuvaketta milloin haluat, laajennuksista yksinkertaiseen WordPress Customizer -menetelmään.

Kun favicon on lisätty, saatat haluta oppia käyttämään koodilohkoja WordPressissä.

UKK

Kuinka luot faviconin?

Ennen kuin lisäät faviconin WordPress-blogiisi, sinun on luotava sellainen. Voit käyttää erilaisia ​​kuvanluontityökaluja ja favicon-generaattoreita luodaksesi kuvan nopeasti tai käyttää omaa kuvankäsittelyohjelmistoasi luodaksesi sen tyhjästä. On parasta tallentaa suosikkikuvakkeesi PNG-muodossa ongelmien välttämiseksi ja varmistaaksesi, että sen koko on joko 16 x 16 tai 32 x 32 pikseliä.

Mikä tekee hyvän faviconin?

Hyvät faviconit ovat selkeitä, yksinkertaisia ​​ja helppo muistaa ja tunnistaa. Niissä on yleensä läpinäkyvä tai yksivärinen tausta, jonka päällä on jonkinlainen symboli. Useimmat niistä käyttävät vain yhtä tai kahta väriä ja niillä on tyypillisesti jokin merkitys tai suhde edustamaansa brändiin tai blogiin. Voit etsiä suosikkisivustojesi faviconeja saadaksesi inspiraatiota.

Recent Articles

spot_img

Related Stories

Stay on op - Ge the daily news in your inbox

[tdn_block_newsletter_subscribe input_placeholder="Email address" btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#0d42a2" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]