Favicon : Ce que vous devez savoir pour un site web professionnel
Le favicon est un élément mineur en apparence, mais qui contribue à l’image de sérieux d’un site web. Il s’agit de cette petite icône qui s’affiche dans les onglets du navigateur, à côté du titre de la page. Présent sur presque tous les sites, il permet une identification rapide de l’onglet parmi plusieurs ouverts.
Son absence peut donner une impression de site incomplet ou peu soigné. À l’inverse, un favicon bien conçu renforce la reconnaissance de marque et améliore l’expérience utilisateur.
Qu’est-ce qu’un favicon ?
Le terme favicon vient de l’anglais favorite icon, ce qui signifie « icône favorite ». C’est une image de petite taille utilisée pour représenter un site web dans l’interface des navigateurs. Elle apparaît dans plusieurs endroits :
- Dans les onglets du navigateur
- Dans les résultats de recherche sauvegardés
- Dans l’historique ou les favoris
- Lorsqu’un utilisateur ajoute un raccourci sur son écran d’accueil mobile
Historiquement, le favicon était limité à un format .ico de 16x16 pixels. Aujourd’hui, avec la diversité des appareils, il doit être disponible en plusieurs tailles et formats pour s’adapter aux différents contextes d’affichage.
Quelle taille pour un favicon ?
Il n’existe pas une seule taille universelle. Pour garantir une bonne qualité sur tous les supports, il est recommandé de fournir plusieurs versions du favicon.
Voici les dimensions les plus courantes :
- Onglet standard : 16x16 pixels
- Écran haute définition : 32x32 pixels
- Favoris, barre latérale : 48x48 pixels
- Appareils Apple (iPhone, iPad) : 180x180 pixels
- Appareils Android (launcher) : 192x192 pixels
Les formats les plus utilisés sont :
- .ico : compatible avec tous les navigateurs, supporte plusieurs tailles dans un seul fichier
- .png : idéal pour les icônes modernes, léger et de bonne qualité
- .svg : vectoriel, donc parfaitement net à toute échelle, mais pas encore pris en charge partout
Pour une compatibilité maximale, il est conseillé d’utiliser un fichier .ico multi-résolutions combiné à des balises spécifiques dans le code HTML pour les appareils mobiles.
Favicon qui ne s’affiche pas : causes fréquentes et solutions
Il arrive que le favicon ne s’affiche pas, même après avoir été ajouté. Voici les raisons les plus probables et comment y remédier.
Le cache du navigateur n’a pas été vidé
Le navigateur conserve souvent une version ancienne du favicon.
Solution : Forcez le rechargement de la page avec Ctrl + F5 (Windows) ou Cmd + Shift + R (Mac). Videz le cache du navigateur si nécessaire.
Le fichier n’est pas au bon emplacement
Certains serveurs cherchent automatiquement un fichier nommé
favicon.ico
à la racine du site.
Solution : Placez un fichier nommé
favicon.ico
dans le dossier racine de votre hébergement
( /favicon.ico
). Sinon, référez-le explicitement dans le code HTML.
La balise HTML est manquante ou incorrecte
Sans la bonne balise dans l’en-tête ( <head>
) du site, le navigateur ne saura pas quel fichier charger.
Solution : Ajoutez les lignes suivantes dans le
<head>
de vos pages :
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
Le format ou la taille est inadapté
Un favicon trop petit ou flou ne s’affichera pas correctement sur les écrans retina ou mobiles.
Solution : Utilisez des fichiers de qualité, optimisés, et prévoyez les tailles adaptées aux différents appareils.
Problème de droits ou de configuration serveur
Parfois, le serveur bloque l’accès au fichier favicon à cause des permissions ou d’une mauvaise configuration.
Solution : Vérifiez les droits du fichier (chmod 644) ou consultez la configuration du serveur (.htaccess, nginx.conf, etc.).
En résumé : qu’est-ce qu’un favicon ?
Un favicon est une petite icône associée à un site web. Elle sert à identifier visuellement le site dans les navigateurs et améliore l’expérience utilisateur. Bien qu’il ne soit pas obligatoire, son absence nuit à la perception de professionnalisme.
Pour qu’il fonctionne correctement :
- Il doit être disponible en plusieurs tailles
- Il doit être correctement déclaré dans le code HTML
- Il doit être mis à jour et caché convenablement
C’est un détail simple, mais essentiel pour une création site web complète et bien configurée.
Questions fréquentes
Qu’est-ce qu’un favicon ?
Un favicon est une petite image utilisée par les navigateurs pour représenter un site web dans les onglets, les favoris et les historiques.
Quelle est la taille standard d’un favicon ?
La taille de base est 16x16 pixels, mais il est recommandé d’utiliser plusieurs tailles, notamment 32x32, 48x48, 180x180 et 192x192 pixels.
Comment créer un favicon ?
Vous pouvez utiliser des outils gratuits en ligne comme favicon.io ou des logiciels de retouche d’image. Convertissez votre logo en format .ico, .png ou .svg, puis intégrez-le via le code HTML.
Où placer le favicon sur un site ?
Placez le fichier favicon.ico à la racine du site, ou référez-le explicitement dans le avec une balise .
Pourquoi mon favicon n’apparaît pas sur mobile ?
Sur iOS et Android, le navigateur utilise des icônes spécifiques. Assurez-vous d’avoir ajouté les balises apple-touch-icon et icon avec les bonnes tailles.
Peut-on utiliser un SVG comme favicon ?
Oui, le format SVG est supporté par la plupart des navigateurs modernes. Il est particulièrement utile pour les icônes vectorielles. Toutefois, prévoyez toujours un fallback en .ico ou .png pour la compatibilité.
Faut-il un favicon pour un site vitrine ?
Oui. Même les sites simples gagnent à en avoir un. Cela renforce la crédibilité et donne une impression de site terminé et professionnel.
Testez gratuitement votre présence digitale
En quelques clics, découvrez comment votre marque apparaît sur le web.
Vous avez un projet web et digital ? Contactez-nous dès maintenant !
Vous êtes prêt à lancer votre site web ? Dotma vous accompagne de A à Z : audit, conception, développement, SEO et maintenance. Spécialisé dans la présence digitale. Que vous soyez basé à Casablanca, Tanger, Marrakech, Fès, Mohammedia, Rabat ou dans une autre ville du Maroc, nous sommes à vos côtés pour donner vie à votre site web.
Si vous avez des questions ou si vous souhaitez discuter de votre projet, n'hésitez pas à nous contacter. Contactez-nous pour en savoir plus sur nos solutions et comment nous pouvons vous aider à booster votre présence en ligne. N'attendez plus pour donner à votre entreprise le coup de pouce digital dont elle a besoin.
Découvrez d'autres articles qui pourraient vous intéresser
