Structure & Accessibilité
Qu’est-ce que Favicon ?
Icône associée au site, affichée dans l’onglet du navigateur, les favoris, les raccourcis et parfois les résultats de recherche.
Définition simple
C'est comme le blason sur la portière d'une voiture : on reconnaît la marque entre des dizaines d'onglets ouverts. Icône associée au site, affichée dans l’onglet du navigateur, les favoris, les raccourcis et parfois les résultats de recherche. Déclaration dans le <head> via <link rel="icon" href="..."> (ou rel="shortcut icon"). Formats courants : ICO (historique), PNG, SVG. Les navigateurs modernes acceptent plusieurs tailles (16x16, 32x32, 180x180 pour Apple Touch Icon). Les PWA et bonnes pratiques récentes recommandent plusieurs formats et tailles pour couvrir tous les usages. Un favicon SVG est scalable et léger ; le format ICO ou PNG 32x32 reste utile pour la compatibilité. L’ordre des <link> peut influencer le choix du navigateur ; placer le SVG en premier est souvent recommandé pour les navigateurs qui le supportent.
Comment ça marche ?
Des balises <link rel="icon" href="..."> (et optionnellement rel="apple-touch-icon") dans le <head> pointent vers les fichiers d'icône. Le navigateur affiche l'icône dans l'onglet, les favoris et les raccourcis. Plusieurs formats peuvent être proposés ; le navigateur choisit le plus adapté.
Impact business
Un favicon renforce l’identité de marque dans les onglets (repérage rapide quand plusieurs onglets sont ouverts) et dans les favoris. Son absence donne une impression d’inachèvement. Pour une PWA ou une app-like experience, le favicon et les icônes associées sont requis. Un favicon reconnaissable améliore la confiance et le professionnalisme perçu. Les moteurs peuvent afficher le favicon dans certains résultats ; une icône claire et lisible est un plus. Les expériences SERP montrent qu'un favicon net et reconnaissable peut faire gagner quelques points de CTR sur des requêtes de marque ou navigationnelles — un gain marginal mais mesurable quand plusieurs résultats se ressemblent.
Bonnes pratiques
- Proposer au minimum un favicon (ICO ou PNG 32x32) et idéalement un SVG pour les navigateurs récents. Ajouter un Apple Touch Icon 180x180 pour iOS. Utiliser des URLs absolues ou relatives à la racine.
Erreurs communes
- Ne pas fournir de favicon (onglet vide = impression d'inachèvement) ou proposer une image trop grande non redimensionnée. Oublier l'Apple Touch Icon pour les utilisateurs qui ajoutent le site à l'écran d'accueil.
Prompt IA
Contexte : site [nom ou secteur], format disponible [SVG / PNG / ICO]. Génère le bloc <link> complet pour un favicon moderne : favicon.ico (fallback), favicon.svg (prioritaire si dispo), Apple Touch Icon 180x180. Inclus type et sizes. Indique l’ordre recommandé et les dimensions à fournir pour [designer / export].
SERVICE LIÉ
Passer de la définition à un projet concret.
Création de site internet
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur Favicon.
SVG est idéal (scalable, léger) pour les navigateurs récents. Gardez un fallback ICO ou PNG 32x32 pour les anciens. Pour Apple Touch Icon (ajout à l’écran d’accueil), fournissez un PNG 180x180. En pratique : proposer SVG + ICO ou PNG 32x32 couvre la grande majorité des usages.
Dans le <head> de la page, en général au début. Utilisez <link rel="icon" href="/favicon.ico"> ou <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Plusieurs <link> sont possibles (ico, svg, apple-touch-icon) ; le navigateur choisit le format qu’il préfère. L’URL doit être absolue ou relative à la racine.
Pas directement comme facteur de classement. En revanche, Google peut afficher le favicon à côté du titre dans les résultats de recherche (SERP), ce qui améliore la reconnaissance de la marque et peut légèrement influencer le taux de clic. Un favicon lisible et cohérent avec la marque est recommandé.