Comment ajouter un favicon à votre site web
Sep 09, 2026
/
By Faradilla A.
/
6 minutes de lecture
Un favicon est une petite icône qui représente l’identité visuelle de votre site web dans les onglets du navigateur, les favoris et l’historique de navigation. Il aide les utilisateurs à reconnaître votre site parmi d’autres sites et renforce votre image de marque. Vous pouvez ajouter un favicon à votre site web de trois manières :
- Ajoutez du code HTML. Cette méthode consiste à téléverser manuellement votre fichier image sur votre serveur d’hébergement et à insérer un extrait de code spécifique dans l’en-tête de votre site web.
- Utilisez les fonctionnalités de WordPress. Vous pouvez téléverser votre icône directement depuis l’éditeur Gutenberg de WordPress, l’outil de personnalisation ou une extension, sans modifier le code.
- Utilisez le Créateur de sites internet de Hostinger. Cette plateforme intègre une interface dans les paramètres généraux pour téléverser et mettre à jour votre favicon.
Les favicons affichés dans les onglets du navigateur mesurent 16 × 16 px, tandis que ceux affichés dans les raccourcis de la barre des tâches mesurent 32 × 32 px. Ils sont généralement au format .ico, mais vous pouvez également utiliser des fichiers .svg, qui s’adaptent mieux aux différentes tailles. Quel que soit le format choisi, privilégiez un design simple et utilisez des couleurs de teinte moyenne ou des contours pour que le favicon reste bien visible.
Comment ajouter un favicon à votre site web avec du code HTML
Pour ajouter un favicon avec du code HTML, vous devez insérer une balise personnalisée dans le fichier index.html ou dans le fichier d’en-tête de votre site web. Cette méthode manuelle convient particulièrement si vous codez et concevez votre site web de A à Z.
Avant de commencer, vérifiez que vous avez accès au dossier racine de votre site web et que vous pouvez modifier les fichiers nécessaires. Préparez également une image de 64 × 64 px nommée favicon.ico, favicon.svg ou favicon.png, selon le format choisi. Suivez ensuite ces étapes :
- Ouvrez le répertoire du projet de votre site avec un client FTP comme FileZilla ou le gestionnaire de fichiers de votre hébergeur.
- Accédez au répertoire racine, généralement /public_html ou /var/www.
- Téléversez le fichier image du favicon dans le dossier racine de votre site web, dans le même répertoire que votre fichier HTML.
- Ouvrez votre fichier index.html et collez l’extrait de code correspondant au format de votre image entre les balises <head> </head> :
<!-- Pour une image ICO --> <link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Pour une image SVG --> <link rel="icon" type="image/svg+xml" href="favicon.svg">
<!-- Pour une image PNG --> <link rel="icon" type="image/png" href="favicon.png">
- Enregistrez le fichier et actualisez votre site web.
Le favicon devrait s’afficher dans l’onglet du navigateur. Si ce n’est pas le cas, vérifiez votre code et essayez d’ouvrir votre site web en mode navigation privée pour contourner le cache.
Comment ajouter un favicon à un site web WordPress
Il existe plusieurs façons d’ajouter un favicon à un site web WordPress. Vous pouvez, par exemple, utiliser l’éditeur Gutenberg : ajoutez l’image avec le bloc Logo du site, puis activez l’option Utiliser comme icône du site.
Vous pouvez également ajouter un favicon depuis la barre latérale de votre tableau de bord d’administration en accédant à Apparence → Personnaliser → Identité du site, puis en téléversant votre image. Pour disposer de davantage d’options de personnalisation et d’insertion, vous pouvez aussi installer une extension comme RealFaviconGenerator.
Pour découvrir toutes les méthodes disponibles, consultez notre guide pour ajouter un favicon dans WordPress.
Comment ajouter un favicon dans le créateur de sites internet de Hostinger
Dans le créateur de sites internet de Hostinger, l’ajout d’un favicon est simplifié grâce à une fonctionnalité intégrée. Il vous suffit de téléverser le fichier : le créateur se charge de sa mise en place technique.
Voici comment ajouter un favicon dans le Créateur de sites internet de Hostinger :
- Connectez-vous à hPanel, puis accédez à la barre latérale → Sites web → Liste des sites web.
- Cliquez sur Modifier le site web pour le site auquel vous souhaitez ajouter un favicon.
- Dans la barre latérale, cliquez sur l’icône à trois points → Paramètres généraux.
- Développez le menu Favicon, puis cliquez sur Ajouter une image.
- Dans la médiathèque, sélectionnez l’image à utiliser comme favicon ou téléversez-en une.
- Cliquez sur Enregistrer les modifications.
- Cliquez sur Mettre à jour le site web en haut à droite pour publier les modifications.
Le favicon de votre site web devrait désormais être mis à jour.
Bonnes pratiques pour ajouter un favicon à un site web
En suivant quelques bonnes pratiques, vous vous assurez que votre favicon reste facilement identifiable et contribue efficacement à votre image de marque. Voici les principaux points à prendre en compte :
- Utilisez le bon format d’image. Le format .ico offre la meilleure compatibilité, mais d’autres formats d’image peuvent être plus adaptés. Par exemple, le format .svg convient particulièrement aux navigateurs modernes, car il s’adapte à toutes les tailles sans perte de qualité. Le format .png, quant à lui, offre un bon compromis entre qualité visuelle et compatibilité.
- Prévoyez plusieurs tailles. Si vous n’utilisez pas les formats SVG ou ICO, préparez des favicons de 16 × 16 px, 32 × 32 px et 192 × 192 px pour les onglets, la barre des tâches et les raccourcis sur mobile. Même si le navigateur peut ajuster automatiquement la taille, plusieurs dimensions permettent d’obtenir une image plus nette.
- Privilégiez la simplicité. Les favicons étant minuscules, évitez les textes complexes et les illustrations détaillées, qui ne seront pas lisibles. Utilisez plutôt une version simplifiée de votre logo ou une seule initiale.
- Vérifiez le contraste. Assurez-vous que votre icône reste visible en mode clair comme en mode sombre. Utilisez un arrière-plan transparent et des couleurs suffisamment contrastées dans les deux modes, comme des bleus, des verts ou des rouges de teinte moyenne, ou ajoutez un contour pour améliorer la visibilité.
- Optimisez la taille du fichier. Conservez un fichier léger, idéalement inférieur à 100 Ko, afin de limiter son impact sur le temps de chargement de la page. Consultez notre guide pour en savoir plus sur l’optimisation des images de votre site web.
Résoudre les problèmes courants liés aux favicons
Lorsque vous ajoutez un favicon à votre site web, certains problèmes techniques peuvent empêcher l’icône de s’afficher ou entraîner un affichage incorrect. Voici les problèmes les plus courants, leurs causes et leurs solutions.
Cache du navigateur
Les navigateurs web stockent temporairement certaines données de votre site web dans leur cache afin d’économiser de la bande passante et d’accélérer le chargement. Si votre favicon ne s’affiche pas, votre navigateur utilise probablement encore l’ancienne version du site.
Le problème se situe alors au niveau du navigateur de l’utilisateur : votre favicon et votre site web fonctionnent correctement. Pour vérifier si le cache est en cause, ouvrez votre site web en mode navigation privée ou forcez le rechargement de la page en appuyant sur Ctrl + Maj + R ou Cmd + Maj + R dans votre navigateur.
Les problèmes liés au cache du navigateur disparaissent généralement d’eux-mêmes. S’ils persistent après quelques heures, envisagez de vider le cache de votre site web afin de forcer les navigateurs à récupérer les informations mises à jour.
Chemin d’accès au fichier incorrect
Si le chemin d’accès indiqué dans votre code HTML personnalisé est incorrect, les navigateurs web ne pourront pas trouver votre image. Prenons cet extrait de code :
<link rel="icon" type="image/x-icon" href="favicon.ico">
Dans cet exemple, le navigateur web recherche une image nommée favicon.ico dans le dossier actuel. Si vous ajoutez le code dans index.html, par exemple, le favicon doit se trouver dans le même répertoire que le fichier HTML.
Pour corriger le problème, indiquez le chemin d’accès correct au fichier. Par exemple, si votre fichier index.html se trouve dans /var/www/index.html et que votre favicon se trouve dans /var/www/images/favicon.ico, utilisez le code suivant :
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
Le chemin d’accès et le nom du fichier sont également sensibles à la casse. Favicon.ico est donc différent de favicon.ico.
Erreurs de syntaxe HTML
Une erreur de syntaxe, comme un guillemet fermant manquant ou un attribut incorrect dans la balise <link>, peut empêcher votre favicon de s’afficher correctement. Ce type de problème peut également entraîner l’apparition de messages d’erreur.
Voici plusieurs problèmes susceptibles de provoquer des erreurs de syntaxe :
- Balises de fermeture manquantes. Les erreurs de syntaxe surviennent souvent lorsque le code n’est pas correctement délimité. Par exemple, rel=”icon provoque une erreur, car le guillemet fermant est manquant.
- Valeurs rel non valides. L’attribut rel définit la relation entre le document HTML actuel et une ressource liée. Ses valeurs étant prédéfinies, une faute de frappe comme rel=”icons” peut rendre votre code invalide.
- Code placé au mauvais endroit. Le code du favicon doit se trouver entre les balises <head> </head> de votre code HTML. Si vous le placez dans une autre partie de votre site web, par exemple entre les balises <body> </body>, une erreur se produira.
Vous pouvez rechercher les erreurs de syntaxe manuellement ou utiliser un outil de validation en ligne. Une fois le problème identifié, corrigez votre code et enregistrez le fichier HTML.
Les erreurs de syntaxe sont rares lorsque vous configurez un favicon avec une fonctionnalité intégrée à WordPress, une extension ou un créateur de sites internet, car le processus est automatisé et validé. Si une erreur se produit, demandez l’aide d’un développeur, car vous ne pouvez pas modifier le code manuellement.
Prochaines étapes : rendez votre site web visible
Un favicon sert d’identifiant visuel à votre site web dans les résultats de recherche. Il renforce votre image de marque et aide votre site à se démarquer des autres résultats. Une fois la conception de votre site finalisée, l’étape suivante consiste donc à le soumettre aux moteurs de recherche.
La soumission de votre site web aux moteurs de recherche permet à des plateformes comme Google d’explorer le contenu de votre site, y compris son nouveau favicon, puis de l’afficher dans les résultats de recherche.
Bien que ce processus soit automatique, une soumission manuelle peut être nécessaire pour accélérer l’indexation et aider les moteurs de recherche à indexer plus précisément vos pages web.
La procédure varie selon le moteur de recherche. En règle générale, vous devez générer un plan du site et le téléverser sur une plateforme d’indexation comme Google Search Console ou Bing Webmaster Tools.
Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.
Faradilla, plus connue sous le nom de Ninda, possède 10 ans d’expérience en tant que linguiste et 5 ans en tant que spécialiste du marketing de contenu chez Hostinger. Elle aime suivre les tendances technologiques et aider les autres à résoudre leurs problèmes. Pendant son temps libre, Ninda aime apprendre de nouvelles langues et s’intéresser aux sciences de la vie, ainsi que regarder des vidéos d’animaux. Pour en savoir plus sur Ninda, retrouvez-la sur LinkedIn.
Commentaires
1 responsesApril 20 2020
Cela ne fonctionne pas pour Blogger