Icônes SVG vs ICO

SVG Les favicon sont des documents XML uniques qui s'adaptent à n'importe quelle taille d'onglet sans octets supplémentaires. Les fichiers ICO sont des conteneurs binaires contenant une ou plusieurs images pré-rastérisées. Utilisez notre [générateur favicon] (outil : favicon-generator), [convertisseur PNG en ICO] (outil : png-to-ico), [convertisseur SVG en ICO] (outil : svg-to-ico) et [testeur favicon en direct] (utilitaire : favicon-tester) pour créer et vérifier votre jeu d'icônes, et lisez le compagnon guide pour une présentation condensée.

Les Chromium, Firefox et Safari modernes peuvent afficher SVG sous forme d'onglets. Le shell Windows, les anciennes intégrations et les récupérations implicites /favicon.ico attendent toujours des données raster ICO.

La question n’est pas SVG ou ICO – c’est SVG plus ICO, avec SVG répertorié pour les navigateurs compatibles et ICO comme filet de sécurité.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Un fichier couvre 16 × 16 à 256 × 256 pixels logiques. Aucun mipmap défini à maintenir.

La taille du fichier est souvent inférieure à 2 Ko pour les marques simples, bien plus petite qu'un .ico à six images.

CSS intégré peut inverser les remplissages sous @media (prefers-color-scheme : sombre), vous offrant ainsi des onglets adaptatifs sans exporter des ressources de nuit distinctes.

SVG est du texte. Vous pouvez différencier les modifications favicon dans Git comme n’importe quel autre actif source.

Les navigateurs demandent /favicon.ico même lorsque vous l'omettez de HTML. Cette requête doit renvoyer un conteneur d'icônes valide, et non un SVG renommé .ico.

Les broches Windows, le déploiement du lien Outlook et certains lecteurs RSS ignorent complètement SVG. Attendez-vous à ce qu'environ 5 % des impressions utilisent des chemins réservés à ICO.

ICO vous offre également des pixels prévisibles. Les filtres SVG complexes peuvent s'afficher différemment selon les moteurs ; les solutions de remplacement raster stabilisent l’apparence.

Déclarez d'abord ICO pour une compatibilité maximale, puis SVG pour une amélioration :

<link rel="icon" href="/favicon.ico" tailles="any">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Les navigateurs compatibles préfèrent SVG lorsque le type et MIME sont corrects. D'autres reviennent à ICO sans glyphe d'image cassé.

Associez-le à une icône Apple-Touch 180 × 180 PNG car iOS n'utilise pas SVG pour les icônes de l'écran d'accueil.

Lettre monochrome : SVG avec un seul <chemin> et un échange de remplissage en mode sombre. ICO généré à partir de la même forme pour les raccourcis Windows.

Logo dégradé : simplifier pour SVG (remplissages à plat uniquement). Gardez le dégradé marketing sur le site web, pas dans l'onglet 16×16.

Site gouvernemental ou d'entreprise avec des exigences IE héritées : donnez la priorité à ICO ; ajoutez SVG uniquement après que les analyses aient montré un trafic IE négligeable.

Système de conception avec des couleurs de marque strictes : stockez SVG dans le dépôt, exécutez la tâche CI pour régénérer .ico sur chaque balise de version.

Puis-je utiliser uniquement SVG ? Pas si vous vous souciez des raccourcis Windows et des récupérations implicites .ico.

Safari prend-il en charge les SVG favicon ? Safari 15+ sur ordinateur de bureau le fait. L’écran d’accueil iOS a toujours besoin de PNG.

SVG ralentira-t-il la première peinture ? Un SVG de 1 à 2 Ko est négligeable par rapport aux images de héros.

Puis-je intégrer un bitmap dans SVG ? Vous pouvez, mais vous perdez en évolutivité – utilisez plutôt ICO.

SVG favicon invisible en mode sombre : le remplissage correspond au fond de l'onglet. Ajoutez des remplissages explicites ou des règles prefers-color-scheme.

Chrome utilise ICO, pas SVG : vérifiez type="image/svg+xml" et vérifiez que le type de contenu du serveur est image/svg+xml.

SVG semble irrégulier : vous avez rastérisé des filtres complexes. Simplifiez les chemins ou comptez sur ICO pour l'onglet.

Fichier SVG énorme : exporter avec SVGO ; supprimez les métadonnées Illustrator et les définitions inutilisées.

Gardez le carré viewBox et centré. Boîte aux lettres viewBoxes non carrée, votre marque de manière imprévisible dans des cultures à onglets circulaires ou carrés.

Préférez les remplissages simples aux filtres, masques et intégrations d'objets étrangers. Les contextes de rendu Favicon permettent de supprimer les fonctionnalités de la bande SVG en pleine page.

Inlinez tous les styles. Les feuilles de style externes peuvent ne pas se charger pour les requêtes favicon uniquement.

Testez les règles prefers-color-scheme dans les paramètres de système d'exploitation clairs et sombres sur la même machine avant le déploiement.

Exécutez SVGO avec des plugins conservateurs pour réduire la taille du fichier, mais conservez viewBox et les données du chemin critique intactes.

Contrôle de version favicon.svg comme le code d'application. La différence XML bat la comparaison du binaire ICO dans les requêtes d'extraction.

Le coût d'analyse de SVG est minime par rapport aux images de héros, mais les énormes exportations SVG d'Illustrator (100 Ko+) gaspillent toujours des octets sur chaque onglet.

Les navigateurs mettent en cache les favicon séparément du contrôle du cache HTTP sur HTML. Renommer favicon.svg en favicon-v2.svg force l'actualisation lorsque le marketing l'exige.

Les techniciens de service qui mettent en cache HTML ne doivent pas mettre en cache les réponses des icônes avec une revalidation périmée pour toujours – modifier les clés de cache lors du changement de nom.

Le multiplexage HTTP/2 signifie que trois petits fichiers d'icônes ne constituent pas un problème de cascade. Publier les formats corrects ; ne fusionnez pas SVG et ICO en un seul fichier.

Les favicons sont décoratifs dans les onglets — ils n'ont pas besoin de texte alternatif dans HTML. Le nom du site significatif appartient toujours à <title>.

Les marques SVG à faible contraste échouent aux WCAG pour le chrome de l'interface utilisateur de la même manière qu'elles échouent sur le contenu de la page. Testez le contraste sur les arrière-plans #fff et #323232.

Les marques de couleur uniquement confondent les utilisateurs avec un déficit de vision des couleurs. Ajoutez une forme distincte, pas seulement un changement de teinte, dans la silhouette 16×16.

Stockez favicon.svg dans Git. Sur la balise de version, exécutez un script sans tête ou une étape de générateur manuel pour produire favicon.ico et valider les binaires ou les attacher pour déployer l'artefact.

Échec de CI si favicon.ico est plus ancien que favicon.svg mtime — détecte la régénération oubliée après la modification du logo.

Les environnements de prévisualisation doivent utiliser les mêmes chemins d'icônes que la production pour capturer les 404 avant la fusion.

Documentez dans votre guide de style : SVG est la source, ICO est l'artefact généré, les tailles PNG sont des cibles d'exportation.

Spécifiez un poids de trait et un remplissage minimum de 16 × 16 afin que les agences externes n'expédient pas de marques hors marque.

Incluez des captures d'écran claires et sombres dans le PDF de la marque. Les équipes marketing référencent les onglets aussi souvent que les en-têtes.

Actifs de la version favicon avec des balises Semver correspondant aux versions du produit lorsque les icônes changent avec le lancement des fonctionnalités.

Exécutez des audits trimestriels : si les analyses montrent une prise en charge de SVG supérieure à 98 % dans votre audience, conservez toujours ICO – la longue traîne compte pour les installations d'entreprise.

Déployez d'abord favicon.ico et vérifiez que les requêtes implicites /favicon.ico renvoient 200.

Ajoutez favicon.svg avec le MIME correct lors de la mise en scène ; exécutez une vérification automatisée que Content-Type est image/svg+xml.

Publier en production, purger le CDN, actualiser trois navigateurs, confirmer l'onglet SVG sur Chromium et le repli ICO là où prévu.

Surveillez les tickets d'assistance pendant une semaine : les problèmes d'icônes se regroupent juste après le changement de marque si le contrôle qualité a ignoré les raccourcis Windows.

Enregistrez des captures d'écran de base dans votre ticket de version afin que les régressions futures soient évidentes lors de la révision du code.