Comment créer un favicon pour votre site Web : guide des fichiers ICO

Un favicon (abréviation de « icône préférée ») est la petite icône associée à votre site Web. Les navigateurs l'affichent dans la barre d'onglets à côté du titre de votre page, dans la liste des favoris et dans l'historique du navigateur. Les appareils mobiles l'utilisent lorsque les utilisateurs ajoutent votre site à leur écran d'accueil. Les moteurs de recherche peuvent l'afficher dans les résultats. C’est l’un des plus petits éléments visuels de votre site, mais l’un des plus fréquemment vus.

Différents contextes affichent votre favicon à différentes tailles. Pour couvrir tous les cas d’usage, vous avez besoin de plusieurs versions :

16x16 pixels — Onglets du navigateur. Il s’agit de la taille classique du favicon et de la plus petite version dont vous avez besoin. 32x32 pixels - Raccourcis de la barre des tâches, onglets de navigateur plus récents sur les écrans haute résolution. 48x48 pixels — Raccourcis du bureau Windows et icônes de site.

180x180 pixels - Icône Apple Touch. C'est ce qu'iOS utilise lorsque quelqu'un ajoute votre site à son écran d'accueil. C’est la taille mobile la plus importante. 192x192 pixels - Icône de l'écran d'accueil d'Android Chrome et icône PWA (Progressive Web App). 512x512 pixels - Écrans de démarrage PWA et boîte de dialogue d'installation Android.

Format ICO : Le format de favicon original et le seul qui fonctionne partout, y compris les très anciens navigateurs et Internet Explorer. Un fichier ICO peut regrouper plusieurs tailles en un seul fichier (généralement 16x16, 32x32 et 48x48). Pour une compatibilité maximale, chaque site Web doit avoir un fichier favicon.ico dans le répertoire racine. Le Convertisseur PNG en ICO sur iformat.io rend la création simple.

Format PNG : L'alternative moderne. Les favicons PNG sont plus simples à créer (une image par fichier) et prennent en charge une transparence totale. Tous les navigateurs modernes prennent en charge les favicons PNG. L'inconvénient est que vous avez besoin de fichiers séparés pour chaque taille et que les très anciens navigateurs peuvent ne pas les prendre en charge.

Format SVG : L'option la plus récente. Étant donné que SVG est un format vectoriel, un seul fichier s'adapte parfaitement à n'importe quelle taille : pas de pixellisation, pas de fichiers multiples. Les favicons SVG sont pris en charge par Chrome, Firefox et Edge, mais pas par Safari (début 2026). Les favicons SVG prennent également en charge l'adaptation du mode sombre via les requêtes multimédias CSS, ce que PNG et ICO ne peuvent pas faire.

La règle la plus importante en matière de conception de favicon : restez simple. Votre icône sera affichée aussi petite que 16x16 pixels, soit une grille de seulement 256 carrés. Les détails fins, les lignes fines et les petits textes seront illisibles à cette taille. Les meilleurs favicons sont des formes audacieuses et reconnaissables avec un contraste élevé.

Utilisez votre logo s’il fonctionne sur de petites tailles. De nombreuses entreprises utilisent uniquement la première lettre de leur nom ou une version simplifiée de leur logo. Évitez les photographies – elles deviennent des taches méconnaissables au format 16x16. Les couleurs unies et les formes géométriques simples fonctionnent mieux. Testez votre design en le visualisant en 16x16 pixels avant de vous engager.

Commencez avec une image PNG carrée d’au moins 512 x 512 pixels. Une source plus grande vous donne des résultats plus propres lorsqu’elle est réduite. Utilisez le Convertisseur PNG en ICO pour générer votre fichier ICO. Le convertisseur crée une ICO multi-tailles contenant des versions 16x16, 32x32 et 48x48, le tout à partir de votre image source unique.

Si votre image source est un JPG (comme un logo exporté à partir d'un outil de conception), utilisez le Convertisseur JPG en ICO plutôt. Pour les logos vectoriels au format SVG, le Convertisseur SVG en ICO produit les résultats les plus nets car il restitue le vecteur à chaque taille cible.

Placez votre fichier favicon.ico dans le répertoire racine de votre site Web. La plupart des navigateurs le trouveront automatiquement sur /favicon.ico même sans balise HTML. Mais pour un contrôle explicite et pour prendre en charge tous les formats, ajoutez ces balises dans votre HTML <head> section:

<link rel="icon" type="image/x-icon" href="/favicon.ico"> — Favicon ICO classique. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — Icône favicon PNG pour les navigateurs modernes. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> - Icône de l'écran d'accueil des appareils Apple.

L'icône Apple Touch (180 x 180 PNG) s'affiche lorsque les utilisateurs iOS ajoutent votre site à leur écran d'accueil. Créez une version PNG de 180 x 180 pixels de votre icône avec un peu de remplissage sur les bords – iOS appliquera ses propres coins arrondis. Nommez-le apple-touch-icon.png et référencez-le dans votre code HTML.

Pour les applications Android et Progressive Web, vous avez besoin d’icônes PNG 192 x 192 et 512 x 512. Ceux-ci sont généralement référencés dans un fichier manifeste d’application Web (manifest.json ou site.webmanifest). Le fichier manifeste vous permet également de définir le nom de votre application, la couleur du thème et le mode d'affichage lorsque les utilisateurs installent votre site en tant qu'application.

Utiliser trop de détails : Un logo complexe avec des lignes fines et un petit texte est superbe à 200 px mais devient une tache illisible à 16 px. Simplifiez impitoyablement. Oublier le mode sombre : Si votre favicon utilise une couleur sombre sur un fond transparent, elle sera invisible dans les navigateurs dotés de barres d'onglets sombres. Pensez à ajouter une bordure claire ou à utiliser des favicons SVG avec le CSS en mode sombre.

Pas de test en taille réelle : Prévisualisez toujours votre favicon en 16 x 16 dans un onglet de navigateur réel. Ce qui semble bon dans votre outil de conception avec un zoom de 400 % peut ne pas fonctionner en taille réelle. Ignorer le fichier ICO : Bien que les favicons PNG fonctionnent dans les navigateurs modernes, avoir un favicon.ico dans votre répertoire racine garantit la compatibilité avec tous les navigateurs et robots d'exploration, y compris les systèmes existants.

Après avoir téléchargé vos fichiers favicon et ajouté le HTML, testez sur plusieurs navigateurs : Chrome, Firefox, Safari et Edge au minimum. Vérifiez que l'icône apparaît correctement dans l'onglet, dans les favoris (ajouter une page à vos favoris et vérifier) ​​et sur mobile (ajouter à l'écran d'accueil sur iOS et Android). Les caches du navigateur peuvent être agressifs avec les favicons — si vous ne voyez pas votre nouvelle icône, essayez de vider le cache ou d'ouvrir une fenêtre de navigation privée.

Si vous devez aller dans l'autre sens (extraire des icônes d'un fichier ICO existant), le Convertisseur ICO en PNG extrait les images intégrées. Ceci est utile lorsque vous devez mettre à jour un favicon mais que vous disposez uniquement du fichier ICO et non de l'illustration source originale.

La création d'un favicon approprié prend cinq minutes, mais donne à votre site Web une apparence soignée et professionnelle. Commencez par un design simple et audacieux, générez votre fichier ICO avec un convertisseur en ligne, ajoutez les balises HTML et testez sur tous les navigateurs. Votre site aura l'air complet et vos utilisateurs pourront trouver votre onglet parmi les dizaines qu'ils ont ouvertes.