Favicon : tailles, formats et bonnes pratiques pour votre site

À quoi sert un favicon

Le favicon est la petite icône de votre site : elle apparaît dans l’onglet du navigateur, les favoris, l’historique et, pour les sites éligibles, à côté du résultat dans Google. C’est souvent le seul élément de votre marque visible à cet endroit. Un favicon par défaut ou illisible donne l’impression d’un site inachevé.

Quel visuel choisir

• Le symbole seul, pas le logo complet : le texte devient illisible à 16 ou 32 pixels.
• Une forme simple, avec peu de détails et un fort contraste.
• Un fond maîtrisé : un fond transparent peut disparaître sur un onglet sombre, un fond uni garantit la lisibilité.
• Les mêmes couleurs que la palette de votre marque.

Tailles et formats à prévoir

Pour exporter proprement un symbole, voir le guide des formats de fichiers de logo.

Déclarer le favicon dans la page

Placez ces balises dans l’en-tête (head) de chaque page, avec des chemins absolus depuis la racine du site :

• <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="/manifest.webmanifest"> si vous proposez une application web.

Favicon et résultats Google

Google peut afficher votre favicon dans les résultats. Il doit être un carré d’au moins 48 × 48 pixels, accessible aux robots (non bloqué par le fichier robots.txt) et représenter fidèlement le site. Google se réserve le droit de ne pas afficher une icône inappropriée, et la mise à jour peut prendre plusieurs jours, voire plusieurs semaines. L’affichage n’est jamais garanti.

1. Un favicon unique pour tout le site, déclaré sur la page d’accueil.
2. Une URL stable : évitez de renommer le fichier à chaque version.
3. Aucun blocage dans robots.txt pour l’icône et la page d’accueil.
4. Un test en navigation privée après publication, pour contourner le cache du navigateur.

Questions fréquentes

Quelle taille pour un favicon ?

Un fichier SVG, un ICO de 32 × 32 px, un PNG dont la taille est un multiple de 48 px pour Google, et une apple-touch-icon de 180 × 180 px couvrent l’essentiel des usages.

Mon favicon ne change pas après modification, pourquoi ?

Les navigateurs le gardent longtemps en cache. Testez en navigation privée, videz le cache, et gardez une URL stable pour le fichier.

Le favicon améliore-t-il le référencement ?

Il ne fait pas monter le classement, mais il rend le résultat plus reconnaissable et plus rassurant, ce qui peut aider à obtenir le clic.

Peut-on utiliser le logo complet ?

C’est déconseillé : le texte est illisible en petit. Utilisez le symbole seul, ou l’initiale si la marque n’a pas de symbole.