Un favicon aide à retrouver votre site parmi les onglets ouverts. Voici les tailles nécessaires et comment les ajouter à vos pages.
Un favicon est la petite icône affichée dans les onglets du navigateur, les favoris et les résultats de recherche. C'est un petit détail, mais il rend un site plus facile à reconnaître et lui donne un aspect plus abouti.
Partez d'une image simple et carrée
Les favicons s'affichent parfois en 16 × 16 pixels seulement : les détails fins disparaissent donc. Une lettre épaisse, un symbole simple ou une version simplifiée de votre logo fonctionnent le mieux. Partez d'une image carrée d'au moins 512 × 512 pixels.
Les fichiers nécessaires
- favicon.ico en 16, 32 et 48 pixels, pour les anciens navigateurs et Windows.
- favicon-32x32.png et favicon-16x16.png pour les navigateurs modernes.
- apple-touch-icon.png en 180 × 180 pixels pour l'écran d'accueil de l'iPhone et de l'iPad.
- android-chrome-192x192.png et 512x512.png, indiqués dans un fichier site.webmanifest, pour Android.
Ajoutez les balises à vos pages
Envoyez les fichiers dans le dossier racine de votre site et ajoutez ces lignes dans le <head> de chaque page :
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Générez-les tous d'un coup
Créer chaque taille à la main est fastidieux. Notre outil Générateur de favicon crée tous les fichiers ci-dessus à partir d'une seule image, les regroupe dans un ZIP et vous donne le HTML à copier.
Les navigateurs gardent longtemps les favicons en cache : si vous remplacez une icône sans voir le changement, essayez une fenêtre privée ou videz le cache du navigateur.