Dit artikel bevat algemene informatie over de verschillende formaten favicons en hoe je ze opneemt in je broncode.
De verschillende bestanden
favicon.ico
Een .ico bestand is een soort container voor meerdere .bmp of .png bestanden van verschillende afmetingen.
PNG's
Hoe je de bestanden opneemt in je HTML
favicon.ico
<link rel="shortcut icon" href="##pathui##/img/favicon.ico" />PNG's
<link rel="icon" href="##pathui##/img/favicon/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon-precomposed" href="##pathui##/img/favicon/favicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="##pathui##/img/favicon/favicon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="##pathui##/img/favicon/favicon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="##pathui##/img/favicon/favicon-120.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="##pathui##/img/favicon/favicon-144.png">
<link rel="apple-touch-icon-precomposed" href="##pathui##/img/favicon/favicon-152.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="##pathui##/img/favicon/favicon-152.png">Internet Explorer 10
Specifiek voor Internet Explorer 10.
Vervang #ffffff door de gewenste tegel kleur.
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="##pathui##/img/favicon/favicon-144.png">Internet Explorer 11
Specifiek voor Internet Explorer 11.
In de broncode
<meta name="msapplication-config" content="##pathui##/IEconfig.xml" />Inhoud van IEconfig.xml
Vervang #ffffff door de gewenste tegel kleur.
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="img/favicon/favicon-72.png"/>
<square150x150logo src="img/favicon/favicon-152.png"/>
<square310x310logo src="img/favicon/favicon-310.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>Tools om de favicon bestanden te genereren (Mac)
.ico bestand genereren
Een configuratie bestand om een favicon.ico te genereren volgens bovenstaande eigenschappen, vind je hier.
PNG bestanden schalen
Via de command-line met SIPS.
Je bronbestand moet een PNG zijn. ‚â• 310x310 en noem je source.png.
Commando's:
sips -Z 32 source.png --out favicon-32.png
sips -Z 57 source.png --out favicon-57.png
sips -Z 72 source.png --out favicon-72.png
sips -Z 114 source.png --out favicon-114.png
sips -Z 120 source.png --out favicon-120.png
sips -Z 144 source.png --out favicon-144.png
sips -Z 152 source.png --out favicon-152.png
sips -Z 310 source.png --out favicon-310.png