Transformez votre logo en favicon.ico et en jeu d’icônes complet

Le favicon est l’icône de site que le navigateur dessine dans l’onglet, à côté du titre de la page, dans la barre de favoris et dans l’historique. La définition encyclopédique la décrit comme l’icône affichée devant l’adresse dans la barre d’adresse ou sur l’onglet d’une page ouverte [1]. Dans l’onglet, elle dispose d’un côté d’une douzaine de pixels, soit moins de place qu’une seule lettre de cette phrase.

L’apple-touch-icon est cette même image préparée pour l’iPhone et l’iPad. Elle arrive sur l’écran d’accueil dès que quelqu’un enregistre votre site comme raccourci. Son côté mesure 180 pixels, car le système la dessine à une taille proche de celle d’une application ordinaire.

Les deux plus grandes icônes du jeu, 192 et 512 pixels, servent aux applications web. Android y recourt lors de la création d’un raccourci et lors de l’installation, et il les trouve grâce au fichier manifeste, c’est-à-dire au document dans lequel un site déclare son nom, ses couleurs et précisément cette liste d’icônes [2].

Importez votre logo dans le champ Ajouter une image de base, cliquez sur Générer le favicon et téléchargez six fichiers : favicon.ico ainsi que les icônes PNG dont les côtés mesurent 16, 32, 180, 192 et 512 pixels. L’image est traitée par le navigateur sur votre propre machine, et vous enregistrez les fichiers terminés directement sur votre disque.

Le fichier favicon.ico est ici davantage qu’une simple image. Le format ICO est un conteneur pour plusieurs versions du même dessin, et le générateur en place trois à l’intérieur : 16, 32 et 48 pixels. Le navigateur ou le système choisit alors dans ce fichier la taille adaptée à l’endroit où il s’apprête à dessiner l’icône. L’onglet du navigateur prend la plus petite, le raccourci du bureau une plus grande.

Les noms de fichiers correspondent à ce que recherchent les modèles de sites et les documentations : favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png et android-chrome-512x512.png. Déposez-les sur le serveur tels qu’ils sortent du générateur.

L’icône au format SVG fonctionne aujourd’hui dans les navigateurs de bureau : Chrome et Edge la lisent depuis la version 80, Firefox depuis la version 41. Sur l’iPhone et l’iPad, Safari le fait depuis la version 26 [5]. Le SVG trouve donc sa place en complément du jeu, aux côtés des fichiers ICO et PNG.

Pour ses résultats de recherche, Google lit le favicon dans des fichiers ICO, PNG, JPEG, GIF, BMP, TIFF et PPM [3]. Le jeu issu de ce générateur figure deux fois dans cette liste : une fois par favicon.ico, une fois par les icônes PNG. Si vous disposez déjà de votre propre fichier SVG, conservez-le dans la section head à côté d’eux : chacun de ces emplacements trouvera alors un format qu’il sait lire.

Google affiche l’icône du site à côté de son nom dans les résultats, sur téléphone comme sur ordinateur. Pour la récupérer, il lui faut accéder à deux choses : le Googlebot d’indexation des images doit pouvoir explorer le fichier de l’icône lui-même, et le Googlebot ordinaire, la page d’accueil [3]. Laissez donc le répertoire contenant l’icône en dehors des règles de blocage du fichier robots.txt.

Après le remplacement du fichier, il faut compter un peu de patience : la documentation indique clairement qu’une nouvelle exploration prend de quelques jours à quelques semaines [3]. Google précise en outre que l’apparition du favicon dans les résultats reste à sa discrétion, même lorsque toutes les consignes sont respectées.

L’icône elle-même relève de la couche de présentation du résultat, et c’est précisément ainsi que la documentation du moteur la décrit. Là où elle agit vraiment, c’est sur la reconnaissance : dans une colonne de résultats et parmi une douzaine d’onglets ouverts, elle est souvent le seul élément coloré qui distingue votre site des autres.