Favicons

Volgen

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.

Afmetingen Doel
16x16 IE9 adres balk, gepinde site toolbar
24x24 IE9 gepinde site browser UI
32x32 Nieuwe tab pagina in IE, taakbalk knop in Win 7+, Safari Lees Later zijbalk
48x48 Windows site iconen
64x64 Windows site iconen, Safari Leeslijst zijbalk op Retina

PNG's

Afmetingen Bestandsnaam Doel
32x32 favicon-32.png Wordt gebruikt indien geen ander formaat beschikbaar is
57x57 favicon-57.png Voor niet-Retina iPhone, iPod Touch, en Android 2.1+ apparaten
72x72 favicon-72.png Voor eerste- en tweede-generatie iPad & Windows 8 tegels
114x114 favicon-114.png Voor iPhone met Retina scherm (iOS ≤ 6)
120x120 favicon-120.png Voor iPhone met Retina scherm (iOS ≥ 7)
144x144 favicon-144.png Voor iPad met Retina scherm (iOS ≤ 6)
152x152 favicon-152.png Algemeen iOS/Android icoon (wordt automatisch gedownscaled indien nodig) & Windows 8 tegels
310x310 favicon-310.png Windows 8 tegels

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

Icon Slate

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
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen

  • Avatar
    Pure Pixels

    Fijne tip, dat Icon Slate. Maakt het allemaal weer wat makkelijker! Bedankt!
    Moet bij de IEconfig.xml de ##pathui##/ ook niet vooraan het src pad staan?

Mogelijk gemaakt door Zendesk