Tailles de favicon en 2026 : ce dont vous avez vraiment besoin (et ce qu'on peut sauter)

Les listes de tailles de favicon en ligne font vingt fichiers. Quatre couvrent l'essentiel. Quels fichiers générer, le HTML à coller, et comment en dessiner un lisible à 16 px.

Mis à jour le 11 août 20266 min de lecture

Cherchez « tailles de favicon » et vous obtenez des listes de vingt fichiers, dont la moitié pour des plateformes qui n'existent plus. L'ensemble réellement porteur en 2026 tient en quatre éléments : un ICO pour la compatibilité historique, un SVG si vous avez un dessin vectoriel, un PNG 180×180 pour les écrans d'accueil iOS, et des PNG 192/512 pour Android et les applications web progressives. Tout le reste de ces listes est soit couvert par l'un des quatre, soit destiné à une plateforme à part de marché négligeable.

Les fichiers qui comptent

Fichier	Taille	Rôle	Toujours nécessaire ?
`favicon.ico`	16, 32, 48 dans un seul fichier	Onglets, favoris, repli historique	Oui
`icon.svg`	Vectoriel	Navigateurs modernes ; gère le mode sombre	Si vous avez un dessin vectoriel
`apple-touch-icon.png`	180 × 180	Écran d'accueil iOS	Oui — une seule taille couvre tous les appareils
`icon-192.png`	192 × 192	Écran d'accueil Android	Oui
`icon-512.png`	512 × 512	Boîte d'installation PWA et écran de lancement	Oui, si vous livrez un manifeste
Tuiles Windows	70–310	Tuiles du menu Démarrer de Windows 8/10	Rarement — hérité

Le format ICO mérite d'être compris car il est inhabituel : un seul fichier .ico peut contenir plusieurs tailles, et le navigateur choisit celle dont il a besoin. C'est pourquoi un fichier couvre le 16, le 32 et le 48 au lieu d'en exiger trois.

Apple a considérablement simplifié de son côté — le 180 × 180 est désormais la seule taille d'icône tactile nécessaire, et les appareils anciens comme récents mettent ce fichier à l'échelle. Les longues listes d'icônes Apple à 57, 72, 114 et 144 pixels sont périmées depuis des années.

Dessinez pour 16 pixels, pas pour votre logo

C'est là que la plupart des favicons échouent. Un logotype complet réduit à 16 × 16 est une tache illisible — à cette taille vous avez à peu près le détail d'une seule lettre. Le rôle du favicon est d'être reconnaissable dans une rangée de vingt onglets, pas de reproduire la marque.

Utilisez une lettre ou un symbole, pas le logo entier. L'initiale, la partie picturale d'un logo combiné, ou une forme distinctive unique.
Abandonnez le détail fin. Traits fins, dégradés et contours disparaissent ou deviennent de la bouillie. Les formes pleines survivent.
Prévoyez un fort contraste sur clair comme sur sombre. Les barres d'onglets existent dans les deux, et un symbole sombre sur une barre sombre disparaît.
Remplissez le carré. De grandes marges transparentes rendent le symbole plus petit que nécessaire. Ne laissez qu'un peu d'air.
Testez à la taille réelle. Pas zoomé dans votre éditeur — à 16 pixels, dans un vrai onglet, à côté d'autres onglets.

Générer les fichiers

Partez d'une source carrée et transparente

Idéalement 512 × 512 ou plus. Si votre logo est posé sur un fond blanc, détourez-le avec le détourage de fond ; s'il n'est pas carré, recadrez-le avec le recadreur plutôt que de laisser le générateur ajouter des bandes.

Générez la série

Le générateur de favicon produit favicon.ico (16, 32 et 48 dans un seul fichier), des favicons PNG en 16, 32, 48 et 96, l'icône tactile Apple 180 × 180, les PNG 192 et 512 pour Android et les applications web installables, un site.webmanifest et un extrait HTML à coller — le tout dans un seul zip. Avec Pro s'ajoutent les icônes de densité Android, les tuiles Windows et une copie SVG si votre source est vectorielle.

Renseignez le manifeste

L'icône 512 × 512 et le site.webmanifest sont déjà dans le pack — les icônes PWA sont activées par défaut. Avant de générer, indiquez dans le générateur le nom de l'application, le nom court et la couleur du thème pour que le manifeste les reprenne ; il pointe déjà de lui-même vers les icônes 192 et 512.

Déposez les fichiers à la racine du site et ajoutez les balises

L'emplacement à la racine compte : les navigateurs demandent /favicon.ico directement, que vous le déclariez ou non.

Déposez un logo, récupérez le pack de favicon complet en un seul zip. Généré sur votre appareil — le logo n'est jamais envoyé à un serveur.

Générer un favicon

Le HTML dont vous avez besoin

Quatre lignes dans le <head> couvrent tous les navigateurs et plateformes actuels. Au-delà, c'est presque toujours du résidu historique copié d'un vieux tutoriel :

<link rel="icon" href="/favicon.ico" sizes="32x32"> — la base de compatibilité.
<link rel="icon" href="/icon.svg" type="image/svg+xml"> — les navigateurs modernes le préfèrent quand il est présent.
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> — écran d'accueil iOS.
<link rel="manifest" href="/site.webmanifest"> — pointe vers les icônes 192 et 512 pour Android et l'installation PWA.

Un favicon SVG a un avantage réel au-delà de la mise à l'échelle : il peut réagir au thème du navigateur via une requête média prefers-color-scheme à l'intérieur du SVG, de sorte qu'un symbole sombre bascule en clair sur une barre d'onglets sombre. Gardez l'ICO à côté — les favicons SVG fonctionnent dans Chrome, Firefox, Edge et, depuis Safari 26, dans Safari, mais les navigateurs plus anciens et d'autres outils ont toujours besoin de l'ICO comme repli.

Pourquoi votre nouveau favicon n'apparaît pas

Les favicons sont mis en cache de façon inhabituellement agressive — souvent au-delà d'un rechargement forcé normal, et parfois indépendamment du cache de la page. Avant de conclure que votre fichier est mauvais, ouvrez-le directement à https://votresite.com/favicon.ico pour confirmer qu'il est bien servi, puis essayez une fenêtre privée, qui démarre généralement avec un cache d'icônes vierge.

S'il reste réellement bloqué, ajouter une chaîne de requête à la balise (/favicon.ico?v=2) force un nouveau chargement. Et profitez-en pour vérifier le poids : les favicons sont demandés à peu près à chaque chargement de page, donc une icône de 200 Ko mérite un passage dans le compresseur PNG. Une série de favicons bien faite pèse quelques kilo-octets en tout.

Questions fréquentes

De quelles tailles de favicon ai-je réellement besoin en 2026 ?

Quatre choses suffisent : un `favicon.ico` contenant les versions 16, 32 et 48 pixels, un SVG si vous avez un dessin vectoriel, une icône tactile Apple de 180 × 180, et des PNG de 192 et 512 pixels référencés depuis un manifeste web. Les listes plus longues que l'on trouve en ligne sont surtout d'anciennes tailles Apple et Windows.

Puis-je utiliser un PNG au lieu de favicon.ico ?

Les navigateurs modernes acceptent les favicons PNG et SVG, mais ils demandent toujours `/favicon.ico` à la racine du site par défaut, et certains outils et lecteurs de flux l'attendent. Livrez l'ICO en repli et laissez les navigateurs modernes préférer le SVG ou le PNG que vous déclarez.

Pourquoi mon favicon est-il flou ?

Généralement parce qu'il a été généré à partir d'une source plus petite que la plus grande taille de sortie, et donc agrandi. Partez d'au moins 512 × 512. Il peut aussi être trop détaillé — traits fins et dégradés deviennent de la bouillie à 16 pixels, quelle que soit la qualité de la source.

Comment faire un favicon à partir de mon logo ?

Recadrez le logo en carré, supprimez tout fond pour obtenir une vraie transparence, simplifiez-le à un seul symbole ou une seule lettre, puis passez-le dans un générateur pour produire la série ICO et PNG. Testez le résultat à 16 pixels dans un vrai onglet avant de le mettre en ligne.