À propos de SVG vers favicon
Le générateur de favicon SVG de Zyff traite votre SVG octet par octet pour créer le fichier icon.svg et génère les alternatives raster disponibles : les différentes tailles PNG, l’icône .ico multi-tailles, l’icône Apple Touch et l’ensemble d’icônes Android. Il ajoute ensuite les balises de lien dans l’ordre de résolution par le navigateur. Une icône vectorielle est la seule favicon véritablement indépendante de la résolution, ce qui explique pourquoi les navigateurs actuels la privilégient lorsqu’ils proposent les deux formats. Cependant, elle ne suffit pas à elle seule : iOS l’ignore pour les icônes de l’écran d’accueil et les systèmes plus anciens utilisent l’icône .ico. Le rendu s’effectue exclusivement en mémoire sur les serveurs de Zyff .
Comment créer une favicon SVG
Téléversez le fichier SVG
Le fichier est transmis tel quel sous le nom icon.svg ; ainsi, ce que vous téléchargez est exactement ce qui sera envoyé. Si le SVG utilise une police, convertissez d'abord le texte en tracés : un navigateur affichant votre icône n'a pas accès à votre police web.
Conservez les options de repli raster activées.
Ces options sont prédéfinies pour une raison précise. Le format SVG est compatible avec les navigateurs de bureau et Android actuels ; les formats PNG et .ico couvrent tous les autres systèmes, et iOS utilise l’icône Apple Touch, indépendamment des spécifications du format SVG.
Consultez les aperçus rasterisés
Les fichiers PNG sont générés à partir de votre SVG à une résolution choisie pour chaque taille. Un vecteur avec des traits fins ou des détails de 1 px se pixellise mal à 16 px, et c'est là que cela se voit.
Copiez l'extrait d'en-tête
Le lien SVG apparaît en premier avec le type="image/svg+xml", suivi des liens PNG avec leurs dimensions explicites, puis du fichier .ico. Le navigateur choisit le premier type qu'il reconnaît ; c'est pourquoi l'ordre n'est pas purement esthétique.
Ajoutez une variante en mode sombre si vous le souhaitez.
Cela se trouve à l'intérieur de votre SVG, et non dans la balise : une requête média `prefers-color-scheme` dans le bloc de style du SVG permet de modifier la couleur de remplissage. Zyff transmet le fichier sans le modifier ; ainsi, tout ce que vous y placez est transmis.
Ce que fait SVG vers favicon
Le SVG a été transmis sans modification.
Octet par octet, comme dans icon.svg. Rien n'est resérialisé ni minifié, donc aucun optimiseur ne peut modifier discrètement le rendu de votre logo.
Des solutions de repli ont été générées autour de celui-ci
Formats PNG, format .ico multi-tailles, version Apple Touch et version Android, tous pixellisés à partir du même SVG à la résolution requise pour chaque format.
Balises de lien dans l'ordre de résolution
Le format SVG est pris en charge en premier, suivi des PNG redimensionnés, puis des .ico. Un navigateur s'arrête au premier format qu'il peut lire.
Transparence maintenue
Activé par défaut, car le principal avantage d'une icône vectorielle est de s'intégrer parfaitement à n'importe quel environnement du navigateur.
Le mode sombre reste le vôtre
Une requête de préférence de schéma de couleurs dans votre SVG est conservée lors de la transmission. Rien ici ne réécrit votre fichier pour deviner une variante sombre.
At a glance
| Gestion des SVG | Transmis octet par octet sous forme d'icône.svg |
|---|---|
| replis rasterisés | PNG 16-512 px, .ico multi-tailles, Apple Touch 180, Android 192 et 512 |
| Ordre des liens dans l'extrait | icône .svg, puis PNG redimensionnés, puis favicon.ico |
| Transparence | Conservé par défaut |
| Entrée acceptée | SVG (ainsi que PNG, JPG, WebP, AVIF — sans transfert) jusqu'à 25 Mo |
| Manifeste | site.webmanifest faisant référence aux tailles Android |
Frequently asked questions
Une favicon peut-elle être un SVG ?
Oui, et les navigateurs actuels privilégient les pages proposant à la fois un SVG et un PNG. L'icône est déclarée avec `<link rel="icon" href="/icon.svg" type="image/svg+xml">`, et l'attribut `type` permet au navigateur de l'ignorer s'il ne peut pas l'afficher. Elle ne remplace pas les autres fichiers : iOS utilise toujours `apple-touch-icon` pour les icônes de l'écran d'accueil, et les navigateurs plus anciens nécessitent l'extension `.ico`.
Ai-je encore besoin d'une favicon PNG si j'ai déjà un SVG ?
Oui. Le SVG est compatible avec les navigateurs de bureau et Android actuels, mais l'icône Apple Touch est au format PNG par spécification, et le fichier /favicon.ico est toujours requis à la racine sans être déclaré. En pratique, on utilise le SVG, ainsi qu'une icône Apple Touch de 180 px, des icônes de 192 et 512 px pour Android, et une petite icône .ico.
Comment créer une favicon pour le mode sombre ?
Insérez une requête média `prefers-color-scheme` directement dans le SVG, dans son propre bloc `<style>`, en modifiant le remplissage ou le contour. La balise `<style>` reste inchangée. Zyff transmet votre SVG sans modification ; la requête est donc envoyée telle quelle. Cependant, testez-la, car un navigateur affichant une favicon n'applique pas toujours le même contexte de couleurs que la page.
Pourquoi mon favicon SVG a-t-il un aspect incorrect à 16px ?
La précision vectorielle ne résiste pas à une résolution de 16 pixels. Les traits fins disparaissent, les petits compteurs se remplissent et les détails se confondent. Créez une version simplifiée de l'icône plutôt que de réutiliser votre logo complet et vérifiez l'aperçu rasterisé à 16 pixels ici avant diffusion.
Mon SVG doit-il utiliser une police ?
Non. Convertissez le texte en tracés avant de l'importer. Un navigateur affichant votre favicon n'a pas accès à votre police web ; par conséquent, un SVG textuel utilisera la police disponible sur le navigateur, ou aucune police du tout. C'est la même raison pour laquelle le logo de Zyff est un tracé et non du texte.
Le fichier SVG est-il modifié d'une quelconque manière ?
Non, il est stocké et servi tel quel, tel que vous l'avez téléchargé. Les formats PNG et ICO sont générés à partir de ce fichier, mais le fichier vectoriel lui-même est un simple transfert ; rien ne peut donc altérer l'apparence de votre logo.