WhatsApp
Telefoon

Favicon toevoegen voor non-techies

door | 08 april 2013 | Bloggen, Overige | 9 reacties

Veel blogs op het internet hebben een favicon. Dat is een klein plaatje waaraan je een blog kunt herkennen op je tabblad. Favicon staat voor favourite icon, favorieten icoontje. Mijn blog heeft bijvoorbeeld een klein paars klavertje vier als favicon. Dit is ontworpen door Irene van Putten (alias: @pixelprinses). Bij Mozilla FireFox en Internet Explorer vind je dit favicon in de adresbalk; bij Google Chrome vind je dit icoontje op de tabbladen. Persoonlijk vind ik dit laatste handiger, omdat je dan makkelijker een website kan terugvinden als je heel veel tabs hebt openstaan.

Hoe voeg je een favicon toe aan je weblog?

Let op! Als je niet zo handig bent in het werken met code, probeer dit dan niet alleen, maar zorg dat er iemand is die eventueel met je mee kan kijken of het voor je kan doen om de aanpassingen te maken. Je hoster zou dit waarschijnlijk ook wel voor je kunnen doen als je het zelf niet aandurft.

  1. Als eerste heb je een plaatje nodig van 16 bij 16 pixels. Je kunt daarvoor een klein stukje van je header nemen of je header verkleinen. Zorg wel dat het zichtbaar blijft wat voor plaatje het is. Denk bijvoorbeeld aan de W van WordPress die bij een wordpress.com blog als favicon is ingesteld.
  2. Je kunt je plaatje maken met een favicon generator als je niet zo creatief bent, bijvoorbeeld.
  3. Als je je plaatje hebt, kun je dit uploaden naar je website via FTP.  Er zijn verschillende FTP programma’s die je daarvoor kunt gebruiken. Zelf gebruik ik FileZilla (geen affiliatie ;-)).
  4. Hernoem je plaatje naar favicon.ico. Upload je favicon in de volgende map: /domains/naam_website/public_html/wp-content/themes/naam_thema
  5. Upload je favicon ook in de map /domains/naam_website. Op die manier komt je favicon ook terecht in RSS-lezers.

Nu heb je je favicon geüpload, maar hij staat nog niet op je blog. Daarvoor moet je nog een aantal stappen doorlopen. Nu wordt het wel iets technischer omdat je in de code van je website moet gaan werken.

  1. Klik in je WordPress administratie panel op Weergave en vervolgens op Bewerker.
  2. Klik aan de linkerkant op Header of header.php.
  3. Zoek de regel die begint met: <link rel="shortcut icon"  en eindigt met: /favicon.ico" />
  4. Vervang deze regel, of voeg hem toe als bovenstaande regel er nog niet is, door onderstaande code. Vervang de aanhalingstekens door rechte aanhalingstekens, anders doet hij het niet.
  5. Sla de wijzigingen op.
  6. Ververs je browser. Je zou nu je favicon moeten zien in je browser.

<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Dit hele stappenplan kun je terugvinden in het Engels in de hulpgids van WordPress.

Meer weten of vragen?

Ben je geïnteresseerd geraakt door dit blog? Stuur me een berichtje en help je verder!

9 Reacties

  1. @Vonkwijchen

    RT @jjvoerman: hoe je een favicon toevoegt voor je website (dat plaatje in de tabbladen) voor niet-techies , dank! @drspee http://t.co/LN1eL9CEQC

    Antwoord
  2. Raymond

    Leuke handleiding! Wel een paar toevoegingen: ico is een apart bestandsformaat voor afbeeldingen en hoewel alle moderne browsers zonder problemen ook png bestandjes tonen als je dat png bestand hernoemt naar ico, zijn het wel fundamenteel 2 verschillende dingen. De favicon generators maken ‘echte’ ico’s en bij het hernoemen van een png blijft het natuurlijk fundamenteel een png bestand. Het is dan iets zuiverder om, middels een gratis converter tooltje online, die png te converteren naar ico formaat.
    De verwijzing in de header.php aanpassen werkt inderdaad uitstekend (net als het bestandje in de map van je theme neerzetten) maar recentere themes hebben tegenwoordig vaak in de instellingen een optie om juist die favicon.ico in te stellen. Dat verschilt per theme (de mijne zijn betaalde van Elmastudio en die hebben dat bijna allemaal dacht ik) dus het kan verstandig zijn om even bij de instellingen van je theme te kijken of er een menu optie bij zit voor het instellen van die favicon.ico. Helemaal ideaal voor non-techies 🙂

    Antwoord
  3. Linda Kwakernaat

    In mijn Thema kan ik mijn favicon zo uploaden, bij de general instellingen.
    De mijne stond alleen nog op ,png ipv .ico
    Ik heb mijn afbeelding *gewoon* even door een *favicon generator* gehaald 😉

    Antwoord
  4. Irene

    Wat me juist opvalt in deze barre 😉 tijden is dat veel themes zelf een favicon hanteren wat een *.png ‘tje is! 🙂

    Antwoord
  5. sharpben

    Zo, dat weten we dan ook weer… Is het echt heel erg als ik dit avontuur aan me voorbij laat gaan? 😉

    Antwoord
    • drspee

      Ja, echt. Verschrikkelijk! 😉
      Nee hoor, geen probleem. Ieder zijn ding, toch :).

      Antwoord

Trackbacks/Pingbacks

  1. Martha (@drspee) - @paul_vd_werf @lindakwakernaat check http://t.co/64R1YRGWSC 🙂

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Pin It on Pinterest