Ajouter un favicon à son site : WordPress, Wix, Squarespace et Shopify

Le nouveau logo est en ligne. Pourtant l’onglet du navigateur affiche toujours un globe gris. C’est normal : l’icône de l’onglet est un fichier à part, que la plupart des outils de création de site demandent dans un réglage spécifique.

Ce guide suit un exemple illustratif, un torréfacteur nommé Bean There, de son logo jusqu’à un favicon visible dans l’onglet, dans les favoris, sur l’écran d’accueil d’un téléphone et à côté du site dans Google. Pour n’importe quel autre logo, les étapes sont les mêmes.

En bref

• Le favicon se fait avec le symbole du logo, pas avec le logo complet et le nom.
• Un jeu complet tient en quelques fichiers : favicon.ico, favicon.svg, une icône de 180 pixels pour l’iPhone et deux PNG plus grands pour Android.
• Les outils de création de site demandent une seule image carrée et produisent eux-mêmes les petites tailles.
• Sur un site que vous codez, les fichiers vont dans le dossier racine et quatre lignes vont dans le <head>.
• Les navigateurs gardent l’ancien favicon en cache : vérifiez le résultat dans une fenêtre privée.

De quoi est fait un favicon

Dans l’onglet du navigateur, le favicon dispose d’un carré de 16 pixels. À cette taille, le nom d’une entreprise devient une tache grise. On dessine donc le favicon avec le symbole seul, souvent un monogramme ou une initiale. Bean There a un B avec un grain de café, et c’est lui qui va dans l’onglet.

La forme carrée compte aussi. Un symbole large est réduit jusqu’à tenir dans le carré, et devient encore plus petit. Si votre symbole est large, le favicon a souvent besoin d’une version recadrée ou réorganisée en carré.

Regardez d’abord la version 16 pixels, car c’est là que les traits fins disparaissent et que deux petites formes finissent par se confondre. Dans l’icône de Bean There, la ligne du grain est assez épaisse pour tenir.

Les fichiers d’un favicon complet

Chaque endroit qui affiche votre icône cherche son propre fichier :

• favicon.ico pour l’onglet et les favoris, y compris dans les anciens navigateurs et sous Windows. Un seul fichier contient les versions 16, 32 et 48 pixels.
• favicon.svg, que les navigateurs récents affichent nettement à toutes les tailles.
• apple-touch-icon.png en 180 × 180, l’icône que l’iPhone ou l’iPad place sur l’écran d’accueil quand quelqu’un y enregistre votre site.
• android-chrome-192x192.png et android-chrome-512x512.png, avec un petit fichier site.webmanifest qui les désigne, pour le même usage sous Android.
• Une version adaptative de 512 pixels avec plus de marge autour du symbole, car Android découpe les icônes en cercles et en carrés arrondis.

Google affiche aussi votre icône à côté de vos pages dans les résultats. Sa documentation demande une image carrée d’au moins 8 × 8 pixels, en recommande une de plus de 48 × 48, et ne cite pas le SVG parmi les formats qu’il lit. Voilà pourquoi le .ico ou un PNG doit être sur le site, même si le SVG s’affiche parfaitement dans votre navigateur.

Inutile de les fabriquer à la main. Tapez le nom de votre entreprise en haut de notre page d’accueil et ouvrez dans l’éditeur le logo qui vous plaît. Le bouton Pack favicon (ZIP) vous donne tous les fichiers ci-dessus avec le manifeste et les quatre lignes de HTML. Créez les fichiers favicon à partir de votre logo, puis revenez ici pour l’étape de votre plateforme.

Où se trouve le réglage sur chaque plateforme

WordPress

Depuis WordPress 6.5, le réglage est dans Réglages › Général › Icône du site (dans l’interface anglaise : Settings › General › Site Icon). WordPress demande une image carrée d’au moins 512 × 512 pixels : envoyez android-chrome-512x512.png et enregistrez. Les versions plus anciennes ont le même réglage dans Apparence › Personnaliser › Identité du site.

Wix

Wix autorise un favicon personnalisé dès que le site a un forfait Premium et un domaine connecté. Le réglage est dans Paramètres › Paramètres du site › Favicon. Son centre d’aide demande une image carrée dont les côtés sont un multiple de 48 pixels : favicon-96x96.png convient.

Squarespace

Le réglage de l’icône du navigateur a changé de place d’une version de Squarespace à l’autre. Le plus rapide est de chercher « favicon » ou « browser icon » dans le panneau des paramètres. Envoyez android-chrome-192x192.png.

Shopify

Allez dans Boutique en ligne › Thèmes › Personnaliser › Paramètres du thème. Selon le thème, le favicon se trouve sous Logo ou sous Favicon. Shopify réduit l’image lui-même, et favicon-96x96.png est une taille confortable à lui donner. Publiez ensuite le thème : une modification sur un thème non publié n’atteint pas la boutique en ligne.

Un site que vous codez vous-même

Envoyez tous les fichiers du pack dans le dossier racine du site, celui qui contient votre page d’accueil. Ajoutez ensuite ces lignes dans le <head> de chaque page :

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

La ligne du .ico vient en premier, pour les anciens navigateurs et pour Google. Les navigateurs qui lisent le SVG utilisent la deuxième.

Pourquoi l’ancienne icône est toujours là

Les navigateurs gardent les favicons en mémoire bien plus longtemps que le reste de la page. Pas de nouvelle icône ? Avant de toucher à quoi que ce soit, ouvrez le site dans une fenêtre privée. Sur un téléphone, retirez l’icône enregistrée de l’écran d’accueil et ajoutez-la de nouveau.

Google met l’icône à jour dans les résultats la prochaine fois qu’il explore votre page d’accueil, ce qui peut prendre, selon sa documentation, de quelques jours à quelques semaines. Demander l’indexation de la page d’accueil dans la Search Console peut l’accélérer.

Quand votre symbole ne se lit pas à 16 pixels

Certains logos n’ont jamais été dessinés pour un carré de 16 pixels : une illustration détaillée, un symbole en traits fins ou un logo uniquement typographique. Les réduire n’y change rien. Ils ont besoin d’une petite version dessinée exprès, avec moins de détails, des traits plus épais et des formes calées sur la grille de pixels, pour que l’icône de l’onglet reste la vôtre.

Cette petite version fait partie du travail quand nos designers dessinent un logo. Si le favicon est la pièce qui ne tombe jamais juste, nos designers dessinent avec vous un logo sur mesure, avec ses versions favicon et icône d’application.

Liste de contrôle avant de publier

• Le favicon utilise le symbole, pas le logo complet avec le nom
• Vous l’avez regardé à 16 pixels et il se lit encore
• favicon.ico, favicon.svg et apple-touch-icon.png sont sur le site
• Les icônes Android et site.webmanifest sont envoyés (sur les sites que vous codez)
• Vous avez vérifié le résultat dans une fenêtre privée
• Vous avez demandé l’indexation de la page d’accueil si Google montre encore l’ancienne icône