Favicon SVG, PNG ou ICO : lequel utiliser ?

À quoi sert chaque format

Un favicon n’est pas un seul fichier. Les navigateurs, les systèmes d’exploitation et les outils de favoris cherchent chacun un fichier différent, et le standard HTML permet à une page d’en déclarer plusieurs en laissant le choix au navigateur.

Fichier	Format	Utilisé pour
favicon.ico	ICO, plusieurs images bitmap dans un seul fichier	La solution de secours : sans aucun lien d’icône, les navigateurs peuvent demander /favicon.ico à la racine du site. Ce pack y met des images de 16, 32 et 48 px.
favicon.svg	SVG	Un seul fichier redimensionnable pour les navigateurs qui gèrent les favicons SVG. Il peut porter ses propres couleurs claires et sombres.
favicon-16x16.png, favicon-32x32.png	PNG	Des copies matricielles de l’icône d’onglet, pour un créateur de site ou un outil qui demande un favicon PNG.
apple-touch-icon.png	PNG, 180 × 180 px	L’écran d’accueil de l’iPhone et de l’iPad, quand quelqu’un y ajoute le site.
site.webmanifest	JSON	Le nom, les couleurs et les icônes d’app des applications web installables (voir le guide des icônes maskable).

ICO est le format le plus ancien et toujours le plus largement lu. Le standard HTML décrit la requête /favicon.ico comme quelque chose qu’un navigateur peut faire quand une page ne déclare aucune icône : considérez-la comme un filet de sécurité et reliez-la quand même explicitement. MDN précise qu’un fichier ICO peut stocker plusieurs tailles, c’est pourquoi un seul fichier couvre 16, 32 et 48 px.

SVG est le seul format qui reste net à toutes les tailles et sur toutes les densités de pixels. Un bloc <style> à l’intérieur du SVG peut changer les couleurs avec prefers-color-scheme, pour qu’un logo sombre reste visible sur une barre d’onglets sombre. Le serveur doit l’envoyer en image/svg+xml : Can I use indique que les navigateurs Chromium et Firefox exigent ce type.

Les favicons PNG sont de simples images bitmap, généralement reliées avec un attribut sizes. Le standard qualifie sizes d’indicatif : un navigateur peut s’en servir pour choisir le fichier le plus proche, mais rien ne l’y oblige. Cela joue dans les deux sens, comme le montre la section suivante.

Quels navigateurs utilisent quoi

Prise en charge des favicons SVG, d’après les données de Can I use vérifiées le 28 septembre 2026 : Chrome et Edge à partir de la version 80, Firefox à partir de la 41, Opera à partir de la 67, et Safari à partir de la 26.0, sur macOS comme sur iOS. Safari 18 et les versions antérieures n’utilisent pas les favicons SVG : ils s’appuient donc sur les fichiers PNG et ICO. L’équipe WebKit a annoncé ce changement de Safari dans son article sur la version 26.0, en septembre 2025. Toute personne encore sur un Safari plus ancien continue de voir les icônes matricielles ; c’est pourquoi un favicon SVG ne les remplace jamais.

Quand une page déclare plusieurs icônes, le standard HTML dit que le navigateur choisit celle qui lui convient le mieux, et que si plusieurs lui conviennent autant, c’est la dernière déclarée qui l’emporte. Si un fichier s’avère inutilisable, par exemple dans un format qu’il ne sait pas lire, il passe au suivant. « Celle qui lui convient le mieux » est laissé à l’appréciation du navigateur : un navigateur qui choisit selon la taille déclarée peut préférer un PNG marqué sizes="32x32" à un SVG qui ne déclare aucune taille, quel que soit l’ordre. Le code ci-dessous ne relie donc aucun PNG dimensionné : l’ICO couvre les tailles matricielles, et le SVG vient après lui.

Un détail vient de la pratique plutôt que d’un éditeur de navigateur. L’article d’Evil Martians sur les favicons recommande sizes="32x32" sur le lien de l’ICO pour corriger le bug de Chrome qui choisit un fichier ICO plutôt qu’un SVG ; son historique indique qu’il a remplacé sizes="any" pour cette raison en juillet 2023. L’article ne renvoie à aucun rapport de bug Chromium, et nous n’en avons pas trouvé : prenez-le comme un retour d’expérience. Le générateur suit ce conseil. Cela ne fait aucun mal, puisque l’ICO contient bien une image de 32 px.

Icône Apple touch. Le Safari Web Content Guide archivé d’Apple documente <link rel="apple-touch-icon"> et indique 180 × 180 px pour les iPhone Retina. MDN ajoute qu’iOS n’utilise pas les liens rel="icon" ordinaires pour les icônes de l’écran d’accueil. La documentation d’Apple ne dit pas ce qu’il advient des pixels transparents ; une réponse sur les forums développeurs d’Apple (d’un autre développeur, pas d’Apple) indique qu’ils s’affichent en noir. Le générateur rend donc toujours ce fichier opaque, sur la couleur de fond que vous choisissez.

La couleur de thème est la partie la moins fiable. Can I use n’indique aucune prise en charge de <meta name="theme-color"> dans Firefox, et précise que Chrome sur ordinateur n’utilise la couleur que pour les applications web installées. Can I use et MDN indiquent tous deux qu’à partir de Safari 26, elle ne s’applique qu’aux applications web installées. Les deux sources divergent sur des détails concernant Chrome sur Android et Safari sur iOS 26. Ajoutez la balise, mais ne concevez rien en comptant dessus.

L’ancien lien mask-icon d’Apple, pour les onglets épinglés de Safari, figure encore dans sa documentation archivée. Nous n’avons trouvé aucune note officielle qui le retire, ni rien qui l’exige. Ce pack n’en contient pas.

Le jeu minimal à publier

Pour un site avec un visuel vectoriel, reliez favicon.ico, favicon.svg et apple-touch-icon.png, plus un manifeste avec des icônes de 192 et 512 px si le site doit être installable. C’est le jeu que retient l’article d’Evil Martians. Les favicons PNG peuvent rester sur le serveur pour les outils qui en demandent un, sans balise de lien. Pour un site dont le logo n’existe qu’en image bitmap, laissez tomber le SVG : un PNG enveloppé dans un fichier SVG reste une image bitmap et n’y gagne rien. Vectorisez-le d’abord en vrais tracés vectoriels si vous voulez un favicon SVG.

Le code HTML

Voici les balises que le générateur écrit dans favicon.html pour le pack d’exemple ci-dessous, avec les fichiers à la racine du site :

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">

Si vos fichiers se trouvent dans un dossier comme /assets/icons/, indiquez ce dossier comme préfixe de chemin dans le générateur de favicon et chaque href change en conséquence ; copiez aussi favicon.ico à la racine du site, où les navigateurs le cherchent sur les pages qui ne relient aucune icône. Une source PNG, JPG ou WebP produit les mêmes balises, sans la ligne du SVG.

Un vrai exemple à télécharger

Nous avons passé le propre logo de ce site (un SVG de notre dépôt, pas un fichier importé par quelqu’un) dans le générateur de favicon, avec le nom « png2svg.art », la couleur de thème #0a2d8f, le fond #e8efff et une marge de 8 %. Rien n’a été retouché ensuite : ce sont exactement les fichiers que crée l’outil.

Le favicon de 32 px, à sa taille réelle :

L’icône Apple touch de 180 px, opaque sur la couleur de fond :

Télécharger tout le pack d’exemple (ZIP) : favicon.svg, favicon.ico, les deux favicons PNG, l’icône Apple touch, quatre icônes d’app, site.webmanifest, favicon.html et un README.

Vérifier vos favicons

Ouvrez la page dans une fenêtre privée après la mise en ligne : les navigateurs gardent longtemps les favicons en cache, et une ancienne icône dans une fenêtre normale ne prouve rien. Dans le panneau réseau des outils de développement, vérifiez que favicon.svg est servi en image/svg+xml et que chaque fichier répond 200. Regardez l’onglet en mode clair et en mode sombre, et ajoutez la page à l’écran d’accueil d’un téléphone pour vérifier l’icône Apple touch.