Favicon maken met meerdere resoluties
  
Voordat je begint
Deze beschrijving is er voor om op een redelijk eenvoudige manier een moderne favicon te kunnen maken met meerdere lagen er in. In die verschillende lagen zitten dan de verschillende resoluties van je favicon.
Houdt echter wel rekening met het volgende:
1. Het kan zijn je multi-resolutie favicon niet werkt in oudere browsers.
2. Doordat er meerdere lagen in de favicon komen zal de bestandsgrote van je favicon ook toenemen naarmate je meer lagen toevoegt. Dit kan er voor zorgen dat het laden van je pagina langzamer zal gaan. Probeer daarom je favicon-bestand onder de 20 kb te houden. Lukt dat niet dan zou ik adviseren om de hoge resolutie-lagen er uit te laten.

Voor het maken van de favicon.ico maken we gebruik van GIMP. Dit is een programma om afbeeldingen mee te bewerken, je kunt er het zelfde mee als met Photoshop van Adobe maar GIMP is gratis.

Stap 1: Maak je basisafbeelding met hoge resolutie voor je favicon
Maak met willekeurig welk programma dan ook je afbeelding voor je favicon in de hoogste resolutie. Ik stel voor een afbeelding van 256 x 256 pixels. Bedenk wel dat wat je ook maakt, het moet er uiteindelijk ook nog goed uit zien in een resolutie van 16 x 16 pixels voor de laagste resolutie die we maken.
In welk formaat je de afbeelding maakt (bmp, jpg, png, etc.) maakt op dit moment (nog) niets uit.

Stap 2: Maak vanuit je basisafbeelding de verschillende lagen voor je favicon
Maak vanuit je basisafbeelding de verschillende lagen voor je favicon.
In GIMP kun je dat doen door de basisafbeelding te openen. Verklein de afbeelding naar de gewenste resolutie via menu-optie "Afbeelding schalen", daarna kun je de afbeelding exporteren als png bestand. Doe dit eerst voor de hoogste resolutie en herhaal dit voor elke resolutie die je wilt ondersteunen in je favicon. Werk van hoogste naar laagste resolutie.
Uiteindelijk heb je dan als het goed is de volgende bestanden gemaakt.
ResolutieBestandsnaam
64 x 64favicon64.png
32 x 32favicon32.png
24 x 24favicon24.png
16 x 16favicon16.png
Tijdens het uitvoeren van deze stap is het raadzaam om bij het maken van de png-bestanden deze te optimaliseren indien dat mogelijk is. Verder is het goed om te weten dat deze bestanden "alpha transparantie" mogen bevatten.

Stap 3: Maak nu je bestand met meerdere lagen
Open nu in GIMP het bestand met de hoogste resolutie dat je in je favicon wilt gebruiken. (Waarschijnlijk de 64 x 64 pixels versie.) (Mocht GIMP vragen welk kleurprofiel te gebruiken kies dan voor "RGB workspace")
Klik nu met je rechtermuisknop op de afbeelding en kies voor "Bestand / Openen als lagen ...", voeg op deze manier de andere resolutiebestanden toe. (Van hoog naar lage resolutie werkende)

Stap 4: Exporteer de afbeelding met meerdere lagen als favicon.ico
Kies in GIMP nu voor "Bestand / Exporteren..." en sla het bestand op met de naam "favicon.ico".
Favicon exporteren uit GIMP
In het vervolgscherm kun je ook weer kiezen om de png's te comprimeren.

Stap 5: Zet de favicon op je website
Zet met een ftp-programma het favicon.ico bestand in de hoofdmap van je website (daar waar je index-bestand ook staat).
Als je nu de website open met een browser dan zal die browser je favicon vanzelf vinden en gaan tonen.

Standaard zal je browser je favicon als laatste laden, nadat je hele pagina geladen is dus. Wil je dat je favicon als eerste geladen wordt en dat er ook gebruik gemaakt wordt van je meerdere resoluties neem dan de volgende regel op in het <head> gedeelte van de webpagina;
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">
In het gedeelte "sizes" geef je aan welke resoluties er in je favicon zijn opgenomen.