Wat is een favicon

Een favicon is niets meer dan een 16×16-pixel pictogram in een speciaal bestand met een .ico extensie, je kunt dus niet zomaar gebruik maken van een bestaande jpg-afbeelding. Favicons helpen gebruikers te identificeren op welke website ze zijn. Ze worden door vrijwel alle moderne browsers ondesteund en vaak gebruikt door andere diensten, zoals RSS-lezers en bladwijzertoepassingen.

Je vindt ze op de volgende plaatsen:

  • tabbladen van de browser
  • bookmarks
  • favorieten
  • geschiedenis

Is het gebruik van een favicon absoluut noodzakelijk?

Natuurlijk is het niet essentiëel, maar het opnemen ervan in jouw ontwerp is één van de details in een lange weg naar het verbeteren van de algehele kwaliteit van een website. Het maakt, dat je site er beter en professioneler uitziet en kan het aantal bezoekers naar je site wat verbeteren. Dus, gebruik een favicon.

Wat doe het voor jouw site?

Hoewel een favicon het verkeer naar je website niet drastisch zal veranderen heeft het wel een positief effect op de uitstraling van die site. Het toevoegen van een uniek pictogram zorgt ervoor dat een bezoeker jouw site in een bookmark-lijst gemakkelijker kan vinden. Als je naar een webpagina kijkt, valt je oog het eerst op de afbeeldingen, daarna pas op de teksten eromheen.

Ook goed voor bezoekers

Het heeft ook een voordeel voor je bezoekers. De favicon is er niet alleen voor de show. Het heeft een subtiele, maar belangrijke, functie in het opbouwen van een identiteit op het internet. Als een bezoeker het op je website ziet, geeft dit een gevoel van herkenning en een aanwijzing, dat ze hier op de juiste plaats zijn. Zie het als een soort geruststelling. Dit symbool identificeert hij dan met een specifieke site. Een goed ontworpen favicon trekt de aandacht en maakt het waarschijnlijker dat hij op die koppeling in plaats van op de andere neutrale link zonder favicon klikt.

Een favicon maken

Favicons zijn 16×16 tot 256×256 pixels in afmeting. Bij het ontwerpen van een favicon kies je eenvoudige afbeeldingen of letters. Je kunt je voorstellen dat het vrij moeilijk is om in zo’n kleine ruimte een complexe afbeelding te krijgen. Zorg ervoor dat de kleur van de favicon een afspiegeling is van de kleur van je website, zodat lezer in staat is om het pictogram te associëren met die site. Je wilt er zeker van zijn dat wanneer je er één maakt, hij ook goed herkenbaar is. Dit is de reden waarom veel favicons het logo van het bedrijf zijn.

Een logo omzetten

Je kunt het ontwerp van je eigen logo gebruiken en die vervolgens via een website de laten omzetten in een favicon. Op de volgende sites kun je hiervoor terecht:

Maken met Photoshop

Je kunt met Adobe Photoshop ook zelf een favicon maken. Photoshop kan normaal het .ico formaat niet bewerken, maar wel als je een plugin installeert.

  1. download the plugin bijvoorbeeld op http://www.telegraphics.com.au/sw/
  2. je krijgt een file IcoFormat.8BI (de naam kan iets afwijken)
  3. kopiëer die file naar de directory “\Plug-ins\File Formats” onder de installatie-directory van Photoshop

Nadat je de plugin hebt geïnstalleerd kun je het best een canvas van 64×64-pixels gebruiken, 16×16 is in de praktijk te klein om mee te werken, en het ontwerp maken.

Als het ontwerp klaar is, moet je nog het formaat wijzigen. Ga naar het Image Size-menu en klik op “Resample Image” of “Nieuwe beeldpixels berekenen”. Dit proces zorgt ervoor dat het beeld minder zal vervagen als je het verkleint. Tenslotte sla je de file op als een 16×16-pixel “Windows.ico” of “favicon.ico”.

Het uploaden van de favicon

Zodra de favicon klaar is, moet je het bestand uploaden naar je site. Zet het in de root directory, dat is de map waar de index-bestand zich bevindt. Bij sommige systemen, zoals Joomla en WordPress wordt het meestal in de template- of themadirectory gezet.

Het wijzigen van uw header

De laatste stap is de header aan te passen, dat is de code die staat tussen de <head> en </head> tags. Voeg hier de volgende regel toe:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Merk op dat deze code alleen werkt als de favicon.ico in de root directory gezet is. Bij WordPress vind je <head> en </head> tags in het “header.php” bestand, bij Joomla in de template directory in index.php.

Testen

Alles staat nu op zijn plaats, open je browser en ga naar je website om te controleren of de favicon wordt weergegeven. Bookmark de site en open een paar tabs om te zien hoe het pictogram eruit ziet, als het je niet bevalt begin je gewoon opnieuw.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd.

Je mag deze HTML tags en attributen gebruiken:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>