Snel alle favicons beschikbaar

Het favicon is een afbeelding die getoond wordt in het tabblad van je webbrowser. Faviconen zijn met hun tijd meegegaan door de mogelijkheid om afbeeldingen van verschillende resoluties te verwerken in 1 bestand. Ook is transparantie (doorzichtige pixels) mogelijk, waardoor deze afbeeldingen er goed uitzien op verschillende achtergronden.

Formaat afbeelding

De afbeelding die je gebruikt als basis voor de iconen moet groot genoeg zijn om ervoor te zorgen dat de grotere iconen geen blokkerige afbeelding worden.
Alle iconen, met uitzondering van de brede tegel van Microsoft, zijn vierkant. De basis afbeelding moet dus een zelfde hoogte als breedte hebben om geen opgerekt resultaat te krijgen.
Begin met een afbeelding van minimaal 310 x 310 pixel.

Transparantie

Aangezien de achtergrond waarop de iconen staan steeds anders is per browser en apparaat, zal een effen achtergrond er meestal niet goed uitzien. Er zijn veel tekenprogramma's die de effen achtergrond kunnen omzetten naar een transparante achtergrond, maar als je deze niet hebt dan kan dit ook on-line met Lunapic.

Maken van de iconen

Met favomatic maak je de meeste iconen in een handomdraai aan. Favomatic is ook de enige die de transparantie behoud in het favicon.ico alle resoluties verwerkt.
De favicon generator maakt een minder uitgebreid favicon.ico aan, maar genereerd wel de iconen voor Android apparaten inclusief het bijbehorende manifest in json formaat.
Gebruik de resultaten van deze gratis toepassingen om de verzameling iconen volledig te maken.

Gebruik van de iconen

Het favicon.ico is nog altijd de standaard waar alle browsers mee overweg kunnen. Dit bestand plaats je in de root van je website en zal automatisch worden gebruikt.
Zet het Apple icoon, met het 114x114 formaat, ook in de root van je website met de naam "apple-touch-icon.png". Ook deze zal automatisch worden opgepikt door system die dit icoon ondersteunen.
Als laatste moet ook "browserconfig.xml" in de root geplaatst worden. Ook deze zal automatisch worden herkend. In dit bestand staan de verwijzingen naar de Microsoft iconen in de verschillende formaten.

Html header

Naar de iconen hierboven kan ook verwezen worden vanuit de header van de webpagina, maar dit is niet nodig. Naar de overige iconen moet een verwijzing worden opgenomen in de header. Aangezien het om meer dan 20 verwijzingen gaat (zie bron van deze pagina), doe je dit alleen indien je hiervoor een reden hebt. Bijvoorbeeld bij de website van een organisatie waarbij een link standaard op de iPads staat.