Site Basics II: favicon

Een favicon is het 16×16 pixels grote plaatje dat zorgt voor het icoontje voor je site naam in de meeste browsers. Door de komst van tabbed browsing zijn favicons steeds belangrijker geworden. Zo ziet de linker kant van mijn Chrome tab bar er consistent zo uit:

favicons in een tab bar

Dat werkt goed omdat de iconen herkenbaar zijn en ik meteen kan klikken waar ik zijn moet voor m’n dagelijkse handelingen. Het irriteert me mateloos als ik sites tegen kom zonder goed favicon… Het maakt het altijd moeilijker om ze terug te vinden in een browser die regelmatig overvol zit met tabs. Een mooi voorbeeld is Gaviscon.

Het is niet zo moeilijk, zo’n favicon, hier een stappenplan:

  1. Maak een herkenbaar plaatje van 16 x 16 pixels.
  2. Gooi dat plaatje door een tool als deze, dan krijg je een .ico bestand terug.
  3. Noem dat bestand favicon.ico en plaats het in de root folder van je domein, waardoor het te vinden is op http://www.example.com/favicon.ico.
  4. Klaar!

Eventueel kun je een andersoortig plaatje nemen dat niet favicon.ico heet, dan moet je de volgende code in de <head> sectie van je HTML opnemen:

<link rel="shortcut icon" href="http://www.example.com/images/favicon.png" />

Dat lijkt me simpel genoeg, of niet? Doe het dan!!

Ohja btw: het standaard favicon van je Theme (Genesis bijvoorbeeld) of je CMS (Joomla, Magento, etc)? Ook niet goed genoeg!

Tags:


Yoast.nl draait op het Genesis Framework

GenesisHet Genesis Framework helpt je om snel en makkelijk geweldige websites te bouwen in WordPress. Of je nu een beginner of een ervaren developer bent, Genesis levert je de veilige en zoekmachinevriendelijke basis waardoor je WordPress dingen laat doen die je nooit verwacht had.

Lees onze Genesis review (in het engels) of koop Genesis nu!

2 Reacties

  1. JohanDoor Johan op 13 december 2011

    En als je dan toch een 16 x 16 icoontje hebt gemaakt, maak er dan ook gelijk eentje van 156 x 156 px zodat je een mooi ‘app’ icoontje krijgt als je op een iOS apparaat een shortcut op je homescreen zet.

    Daarvoor moet je deze tag toevoegen:

Trackbacks

Geef een reactie

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

De volgende HTML-tags en -attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>