Tutoriel favicon : créer l'icône de votre site

Module 1

Comprendre la favicon en 5 minutes

Une petite image, partout

Le mot vient de l'anglais favorites icon, « icône des favoris ». Elle est apparue en 1999 dans Internet Explorer pour décorer la liste des favoris. Aujourd'hui, elle se montre à beaucoup d'endroits :

• dans l'onglet du navigateur, à côté du titre de la page ;
• dans les favoris et l'historique ;
• dans les résultats Google, à gauche du nom du site ;
• sur l'écran d'accueil d'un téléphone, quand quelqu'un y ajoute votre site comme une application.

Quand un visiteur a quinze onglets ouverts, c'est souvent le seul repère qui lui permet de retrouver le vôtre. Sans favicon, le navigateur affiche une icône grise par défaut, qui donne une impression de site inachevé.

Pourquoi plusieurs tailles et plusieurs fichiers

Chaque endroit a ses exigences. L'onglet affiche l'icône en 16 ou 32 pixels, Google la veut carrée et d'au moins 48 pixels, l'iPhone attend une image de 180 pixels, Android demande 192 et 512 pixels. Réduire une grande image jusqu'à 16 pixels donne souvent un résultat flou ; agrandir une petite image la rend pixelisée.

D'où un petit lot de fichiers, chacun à sa place :

• favicon.ico pour les onglets et les favoris ;
• apple-touch-icon.png pour l'iPhone et l'iPad ;
• icon-192.png, icon-512.png et une version « maskable » pour Android ;
• site.webmanifest, une petite fiche qui donne à Android le nom du site et la liste de ses icônes.

Quelques lignes de code dans la page indiquent au navigateur où trouver chaque fichier.

ICO, PNG ou SVG ?

Le format ICO est un conteneur : un seul fichier regroupe plusieurs tailles (ici 16, 32 et 48 pixels), et le navigateur choisit celle qui lui convient. C'est le format le plus ancien et le plus universel.

Le PNG est une image classique, d'une seule taille, qui gère la transparence. C'est le format des icônes pour téléphones. Le JPEG, lui, ne gère pas la transparence et brouille les contours fins : à éviter.

Le SVG est une image vectorielle : elle est décrite par des formes et non par des points, donc elle reste nette à toutes les tailles. La plupart des navigateurs récents l'acceptent comme favicon. Notre générateur crée un icon.svg seulement si vous lui donnez un logo déjà en SVG : transformer une photo en SVG ne la rendrait pas plus nette.

Transparence : ce que font l'iPhone et Android

Dans un onglet, un fond transparent est idéal : l'icône se pose sur la couleur du navigateur, claire ou sombre. Attention toutefois à un logo noir, qui disparaît sur un onglet en mode sombre.

L'iPhone n'accepte pas la transparence sur l'écran d'accueil : il remplit les zones transparentes en noir et arrondit lui-même les coins. C'est pourquoi l'outil pose votre logo sur la couleur de fond choisie pour créer apple-touch-icon.png.

Android découpe les icônes selon le modèle du téléphone : en rond, en carré arrondi, en goutte. L'icône dite maskable prévoit ce découpage : le dessin doit tenir dans un cercle central qui occupe 80 % de la largeur, la zone de sécurité. Le reste n'est que du fond, qui peut être coupé. L'outil ajoute automatiquement cette marge.

Lisible à 16 pixels, et la patience du cache

Une icône de 16 pixels sur 16, c'est 256 petits points en tout. Un nom écrit, un slogan ou des traits fins deviennent une tache. Gardez seulement le symbole de votre logo, ou une à deux initiales bien contrastées qui remplissent le carré. Petit test : regardez l'aperçu en plissant les yeux.

Une fois installée, votre nouvelle icône peut tarder à apparaître. Les navigateurs gardent l'ancienne dans leur mémoire, le cache, parfois pendant des jours. Pour vérifier, ouvrez votre site dans une fenêtre de navigation privée. Google, lui, met à jour les icônes de ses résultats au fil de ses passages : comptez de quelques jours à quelques semaines.

À retenirUne favicon réussie est simple, contrastée et déclinée en plusieurs fichiers : ICO pour les onglets, PNG sur fond plein pour l'iPhone, PNG avec marge de sécurité pour Android.

Les mots à connaître

Favicon

Petite icône qui représente un site dans les onglets, les favoris, les résultats Google et sur l'écran d'accueil.

ICO

Format de fichier qui regroupe plusieurs tailles de la même icône dans un seul fichier.

SVG

Format d'image vectorielle, décrite par des formes : elle reste nette à toutes les tailles.

Transparence

Zones de l'image sans couleur, où l'on voit le fond de l'écran. Le PNG et le SVG la gèrent, le JPEG non.

apple-touch-icon

Icône de 180 pixels utilisée par l'iPhone et l'iPad quand on ajoute un site à l'écran d'accueil.

Icône maskable

Icône Android dotée d'une marge de sécurité, prévue pour être découpée en rond ou en carré arrondi.

Manifeste

Le fichier site.webmanifest : une petite fiche texte qui donne à Android le nom du site, ses icônes et sa couleur.

Cache

Mémoire du navigateur qui garde les fichiers déjà vus pour aller plus vite, parfois trop longtemps.

Module 2

Créer votre favicon pas à pas

Ouvrir l'outil

Module 3

Cas pratiques

Une association sans logo

Les Jardins de Clara n'ont pas encore de logo. Le trésorier utilise l'onglet Des initiales : « JC » en blanc sur le vert du site, forme arrondie. Il télécharge l'Icône pour WordPress (512 px) et l'installe en deux minutes. L'onglet du site se repère enfin parmi les autres.

Une boulangerie au logo très détaillé

Le logo de la boulangerie montre un épi, un moulin et le nom en lettres anciennes. À 16 pixels, tout se mélange. La gérante recadre le logo sur l'épi seul, l'enregistre en PNG carré de 1000 pixels, puis règle la marge au minimum. L'épi reste lisible dans l'onglet comme sur l'écran d'accueil.

Une icône qui ne change pas

Le Gîte des Trois Épis a remplacé sa favicon, mais l'ancienne s'affiche toujours. Dans une fenêtre de navigation privée, la nouvelle apparaît bien : c'était le cache. Sur Google, elle arrive quelques jours plus tard. Pour contrôler le reste du site, le propriétaire lance ensuite le diagnostic complet du site.

Les erreurs à éviter

• Réduire tout le logo, texte compris, à 16 pixels : il devient une tache illisible.
• Garder un logo noir sur fond transparent : il disparaît dans un onglet en mode sombre.
• Partir d'une image de 32 pixels pour les téléphones : l'icône de l'écran d'accueil sera floue.
• Placer le dessin jusqu'au bord de l'icône Android : le découpage en rond coupe une partie du logo.
• Croire que l'installation a échoué alors que le navigateur montre encore l'ancienne icône gardée en mémoire.

L'essentiel

• La favicon apparaît dans les onglets, les favoris, les résultats Google et sur l'écran d'accueil des téléphones.
• Chaque usage a sa taille : 16 à 48 pixels pour l'ordinateur, 180 pour l'iPhone, 192 et 512 pour Android.
• ICO pour la compatibilité, PNG pour les téléphones, SVG pour une netteté parfaite si votre logo est vectoriel.
• L'iPhone refuse la transparence et Android découpe l'icône : prévoyez un fond et une marge.
• Une bonne favicon est simple, contrastée, et se vérifie dans une fenêtre de navigation privée.

Testez-vous

Trois ou quatre questions pour vérifier que tout est clair.