Quel format de favicon utiliser : ICO, PNG ou SVG ?

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.

Où placer la balise favicon dans le HTML ?

Dans le de la page, en général au début. Utilisez ou . Plusieurs 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.

Le favicon influence-t-il le référencement Google ?

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é.

Qu'est-ce que Favicon ?

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é.

L'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.

Bonnes pratiques vs Erreurs communes

✅ À faire : 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.
❌ À é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.

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].