Le favicon est cette petite icône que l'on retrouve à gauche de la barre d'URL du navigateur ou de l'onglet de la page Web. L'App Icon, quant à lui, est l'icône que l'on retrouve sur un appareil mobile lorsqu'on crée un raccourci vers un site Web.
Dans cet article, je vous explique comment créer le favicon à partir d'une image ou à partir de zéro puis comment l'intégrer à votre site Web. Je vous explique également comment créer et intégrer un App Icon.
Voici comment le favicon apparaîtra dans un navigateur :
Et voici un App Icon :
Certains navigateurs sont assez flexibles sur les caractéristiques techniques du favicon. D'autres, généralement plus anciens, sont très pointilleux. C'est pourquoi, pour créer un favicon, il faut respecter scrupuleusement les consignes suivantes :
L'utilisation d'un fichier de type .ico est souhaitable puisque ceci assure que le favicon sera reconnu sur l'ensemble des navigateurs. De plus, en l'absence de balise pour déclarer le favicon, la majorité des navigateurs reconnaîtra nativement un fichier nommé favicon.ico placé à la racine du site Web.
Une fois qu'on a en main le fichier du favicon, il faut ajouter une balise HTML dans la page Web pour en informer le navigateur.
Dans la section <head> de votre site Web, ajoutez la ligne suivante. Ceci suppose que votre fichier porte le nom favicon.ico et qu'il est placé à la racine de votre site Web :
<link rel="icon" href="favicon.ico" />
Il est également possible de spécifier l'URL complet du site Web :
<link rel="icon" href="https://monsiteweb.com/favicon.ico" />
Voici quelques sites de conversion en ligne :
« Real Favicon Generator - Favicon Generator. For real. ». Real Favicon Generator. http://realfavicongenerator.net/
« Favicon & App Icon Generator ». Dan's Tools. http://www.favicon-generator.org/
Attention : tout comme les autres images utilisées sur votre site Web, le favicon doit être libre de droits ou vous devez être le détenteur de ces droits.
Sur un appareil mobile, il est possible de créer un raccourci vers un site Web. Ce raccourci apparaîtra dans la liste des applications installées.
Il est intéressant de configurer l'icône qui sera utilisée lorsque notre site Web sera mis en raccourci. Il est possible d'utiliser la même image que pour le favicon. Cependant, elle devra mesurer 152x152 pixels. Du moins, c'est la taille recommandée pour iPad rétina sous iOS 7. Dans les faits, il y a de nombreuses tailles d'icônes et pour assurer un rendu optimal sur l'ensemble des plateformes, on pourra générer plusieurs balises <link> pour tenir compte de l'ensemble des résolutions supportées.
La plupart des outils de conversion cités plus haut permettent de générer l'icône pour appareils mobiles.
Vous pouvez nommer cette image comme bon vous semble mais il est d'usage de l'appeler apple-touch-icon.png. En effet, certains systèmes pourraient la reconnaître automatiquement simplement par son nom.
Pour vous assurer que votre image soit reconnue sur tous les systèmes qui supportent cette fonctionnalité, ajoutez la balise suivante :
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
Avec la multitude d'appareils qui peuvent accéder à un site Web, les sites bien conçus font le nécessaire pour que le favicon soit bien adapté à la taille de l'écran et que l'app icon respecte l'apparence préconisée par le système d'exploitation de l'appareil. En effet, les icônes d'applications n'ont généralement pas la même apparence sur un iPhone que sur un téléphone Android.
 |
 |
 |
| iOS | Android | Windows |
Les générateurs mentionnés un peu plus haut permettent de transformer une seule image pour répondre à ce besoin puis de vous fournir le code HTML pour utiliser le tout.
Ex :
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">
Le rafraîchissement d'un favicon mis en cache peut se faire de différentes façons :
ou
Dans l'URL d'un site local, changez 127.0.0.1 pour localhost.
Ex : changez « http://127.0.0.1/monsite » pour « http://localhost/monsite ».
ou
Refermez la page Web, videz l’historique du navigateur puis ouvrez à nouveau la page Web.
ou
Allez directement à l'adresse du favicon (ex : http://127.0.0.1/monsite/favicon.ico) puis réaffichez la page Web.
Une fois le favicon et l'App Icon en place, il est possible, bien sûr, de vérifier leur bon fonctionnement simplement en ouvrant le site dans différents navigateurs et en créant un raccourci sur différents appareils mobiles.
Cette vérification peut être complétée par l'utilisation d'un validateur de favicon, comme celui qu'on retrouve ici : http://realfavicongenerator.net/favicon_checker
Ce validateur vous montrera l'apparence du favicon et de l'App Icon dans différents contextes comme iOS Safari, Adroid Chrome, Windows 8 et 10 ou encore MacOS Safari. De plus, il effecturera des vérifications techniques, comme le chemin pour atteindre le favicon ou encore la taille de l'image en pixels.
« Favicon Checker ». Colin Keany. http://www.colinkeany.com/favicon-checker/
« The 2019 Guide to FavIcons for Nearly Everyone and Every Browser ». Emerge. https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/
« Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? ». CSS Tricks. https://css-tricks.com/favicon-quiz/
« Icônes de pages Web, la favicon.ico ». XHTML.net. http://www.xhtml.net/xhtmlcss/favicon
« Create a favicon for your site in 8 steps ». Creative Bloq. http://www.creativebloq.com/illustrator/create-perfect-favicon-12112760
« Quick Tip: Add Favicons Quickly and Easily to Your HTML ». SitePoint. https://www.sitepoint.com/quick-tip-add-favicons-quickly-and-easily-to-your-html
▼Publicité
