Comment créer un favicon
Les tailles, les formats et le code nécessaires à un favicon qui s’affiche partout.
Le favicon est la petite icône dans l’onglet du navigateur, dans les favoris et à côté de votre site dans les résultats de recherche Google sur mobile. Un site sans favicon paraît inachevé, et un favicon flou fait encore moins bonne impression. En créer un bon prend quelques minutes.
Partez du bon visuel
Un favicon s’affiche parfois en 16 sur 16 pixels, donc un logo complet avec le nom écrit sera illisible. Utilisez un signe simple : le symbole de votre logo, une initiale ou une forme franche dans la couleur de votre marque. Testez en le réduisant au quart à l’écran : si vous le reconnaissez encore, il fonctionnera.
Partez d’une image carrée d’au moins 512 sur 512 pixels, idéalement un PNG à fond transparent. Si votre logo n’est pas carré, recadrez-le en carré avec le ratio verrouillé sur 1:1.
Les fichiers nécessaires
| Fichier | Taille | Utilisé par |
|---|---|---|
| favicon.ico | Contient les versions 16, 32 et 48 pixels | Navigateurs, anciens systèmes, la requête par défaut vers /favicon.ico |
| Une icône PNG | 32 sur 32 et 192 sur 192 | Navigateurs modernes, écran d’accueil Android |
| apple-touch-icon.png | 180 sur 180 | Favoris sur l’écran d’accueil d’iPhone et d’iPad |
La recherche Google utilise aussi votre favicon dans ses résultats. Il doit être carré, faire au moins 48 sur 48 pixels et être accessible aux robots sur votre site.
Créer le fichier ICO
Déposez votre PNG carré dans le convertisseur PNG en ICO. Il produit un vrai fichier .ico contenant les petites tailles que réclament les navigateurs. Pour les versions PNG, redimensionnez la même image carrée en 180, 192 et 32 pixels.
L’ajouter à votre site
Envoyez favicon.ico à la racine du site pour qu’il soit accessible à votresite.fr/favicon.ico, puis ajoutez ces lignes dans le head de vos pages :
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Sur WordPress, allez dans Apparence, Personnaliser, Identité du site et envoyez une image carrée comme Icône du site ; WordPress crée les tailles pour vous. Shopify, Wix et Squarespace ont chacun un réglage de favicon dans les paramètres du site ou du thème.
Quand le nouveau favicon n’apparaît pas
Les navigateurs gardent les favicons en cache avec obstination. Ouvrez le site dans une fenêtre privée, ou allez directement sur votresite.fr/favicon.ico et actualisez. Google peut mettre des jours ou des semaines à mettre à jour l’icône dans ses résultats, après une nouvelle exploration de votre page d’accueil.
Erreurs fréquentes
- Utiliser le logo complet avec du petit texte, qui devient une tache à 16 pixels.
- Une icône blanche sur fond transparent, qui disparaît sur les onglets clairs.
- Ne fournir qu’un minuscule fichier de 16 pixels, flou sur les écrans haute résolution.
- Oublier le fichier à l’adresse /favicon.ico, que certains navigateurs et robots réclament quoi qu’indique la page.