---
title: "Favicons : Guide complet pour garantir leur prise en compte"
description: "La favicon (contraction de \"favorite icon\") est cette petite icône qui apparaît à côté de l’URL dans la barre d’adresse, dans les onglets de navigateur, et parfois dans les résultats de recherche. Bien qu’elle soit…"
url: "https://eclaircms.ludicweb.fr/blog/favicons-guide-complet-pour-garantir-leur-prise-en-compte"
lang: "fr"
author: "Christophe Marcellin"
published: "2025-05-04"
updated: "2026-11-04"
---

# Favicons : Guide complet pour garantir leur prise en compte

La favicon (contraction de "favorite icon") est cette petite icône qui apparaît à côté de l’URL dans la barre d’adresse, dans les onglets de navigateur, et parfois dans les résultats de recherche. Bien qu’elle soit discrète, elle joue un rôle clé dans l’identité visuelle de votre site et dans la reconnaissance de votre marque. Dans ce guide, nous verrons toutes les bonnes pratiques pour qu’elle soit correctement chargée, par les navigateurs comme par Google.

## 1. Qu’est-ce qu’une favicon ?

La favicon est un petit fichier image, généralement carré (16×16, 32×32 ou 48×48 pixels), qui représente visuellement un site web. Les formats les plus courants sont :

- `.ico` (le plus compatible, Microsoft & anciens navigateurs)
- `.png` (transparent, bonne qualité moderne)
- `.svg` (vectoriel, évolutif mais moins pris en charge partout)

## 2. Pourquoi une favicon est-elle importante ?

- **Identité visuelle :** elle renforce la reconnaissance de marque.
- **UX (expérience utilisateur) :** facilite la navigation entre onglets.
- **SEO :** Google intègre la favicon dans les résultats mobiles et dans vos pages AMP.

## 3. Formats et dimensions recommandés

Pour couvrir tous les usages, préparez plusieurs fichiers :

- `favicon.ico` : 16×16 et 32×32 intégrés
- `favicon-32x32.png` : 32×32 px
- `favicon-16x16.png` : 16×16 px
- `apple-touch-icon.png` : 180×180 px (pour iOS)
- `site.webmanifest` (JSON avec icônes variées pour PWA)

## 4. Emplacement et balises HTML

Placez vos fichiers à la racine du site (ex. `/favicon.ico`) et dans le `<head>`, avant tout CSS/JS, ajoutez :

```
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />
```

## 5. Le rôle du fichier `/favicon.ico`

Même si vous utilisez des PNG, les navigateurs et Google cherchent d’abord un `/favicon.ico` à la racine. C’est le standard historique :

- **Fallback** pour anciens navigateurs (IE, Edge Legacy)
- **Googlebot** l’interroge pour afficher l’icône dans les résultats AMP et mobiles

## 6. Vérification et dépannage

Après déploiement :

1. Accédez à `https://votredomaine.com/favicon.ico` et vérifiez qu’il renvoie **200 OK**.
2. Inspectez le `<head>` avec les outils développeur (Chrome : F12).
3. Vérifiez l’absence de directive `noindex` ou de blocage dans `robots.txt`.
4. Dans Google Search Console, utilisez l’inspection d’URL et cliquez sur *Demander une indexation*.

## 7. Bonnes pratiques avancées

- Utilisez un générateur de favicon ([RealFaviconGenerator](https://realfavicongenerator.net/)) pour produire tous les formats nécessaires.
- Optimisez vos PNG avec un outil comme `pngcrush` ou `ImageOptim`.
- Prévoyez une version SVG pour les navigateurs récents : `<link rel="icon" href="/favicon.svg" type="image/svg+xml" />`
- Déclarez une `mask-icon` pour Safari : `<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />`

## Conclusion

Une favicon bien configurée améliore l’expérience utilisateur, renforce votre marque et permet à Google d’afficher correctement votre icône dans les résultats de recherche. Suivez ces étapes pour garantir une compatibilité maximale et une excellente visibilité de votre site.

Vous avez des questions ? Laissez un commentaire ci-dessous !

— Christophe Marcellin, Éditeur web indépendant | High-Tech, IA, SEO et tutoriels · 4 novembre 2026