Intégrer une favicon avec une webapp

Icone pour vos applications web mobiles

Sur les nouveaux appareils mobiles qui envahissent le marché on peux facilement créer un raccourci pour avoir son site web favori directement sur l'écran d'accueil.

Pour ne pas avoir de mauvaises surprises, pensez dès maintenant à créer votre favicon en version HD.

Placez vos icônes à la racine de votre site web

  • Internet Explorer recherche une favicon.ico au root de votre site internet. Même si il n'y a pas de délaration dans votre html.
  • Les appareils iOS recherchent des fichiers comme apple-touch-icon-144x144.png au root de votre site internet, expliqué dans la documentation apple.

Vous pouvez aussi spécifier un chemin spécifique, mais cela vous oblige à déclarer plus de balises dans votre <head>

Code HTML

Si vous avez placé correctement vos fichiers favicon, pas besoin de les déclarer.

    <!-- iOS device -->
    <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" />

    <!-- Other mobile device -->
    <link rel="icon" type="image/png" href="/favicon-196x196-0e1049a8.png" sizes="196x196" />
    <link rel="icon" type="image/png" href="/favicon-160x160-0e1049a8.png" sizes="160x160" />
    <link rel="icon" type="image/png" href="/favicon-96x96-0e1049a8.png" sizes="96x96" />
    <link rel="icon" type="image/png" href="/favicon-32x32-0e1049a8.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="/favicon-16x16-0e1049a8.png" sizes="16x16" />

    <!-- Windows device -->
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="msapplication-TileImage" content="/mstile-144x144.png" />

Ce n’est pas fini

Ai-je manqué quelque chose? Le contenu n'est plus à jour? Contactez @flexbox_
Je met continuellement à jour ces guides afin d’avoir un contenu le plus précis et le plus à jour sur le Web.

Partager cet article

Icone pour vos applications web mobiles

Tweet