Le développement du web mobile (et donc des OS et navigateurs), ainsi que l'augmentation de la densité de pixels des écrans font qu'il est désormais nécessaire de réviser les favicons de nos sites. Fini le simple fichier favicon.ico de 16x16 pixels. Il faut aujourd'hui suivre les directives de chaque OS et/ou navigateur pour obtenir l'affichage optimal de sa favicon.

Le site realfavicongenerator.net permet de créer ses favicon compatibles, et le markup lié sans efforts. A partir d'un fichier png, et en fonction de plusieurs options, vos favicons seront générées automatiquement. Prévisualisation, optimisation de la compression, tout y est.

Plus concrètement, voici ce que propose cet outil :

Et voici un exemple de code généré, en complément des différents fichiers image :

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#007caa">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#007caa">