Définition technique
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 fonctionne ?
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é.
L'erreur classique à éviter
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.
Impact business : pourquoi s'en soucier ?
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.
La règle d'or
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.