Créer des favicon.ico à partir de SVG ou PNG multi-résolution
Regroupez plusieurs tailles pour navigateurs classiques et raccourcis Windows — sans vous battre avec de vieilles recettes ImageMagick.
D’autres utilitaires qui complètent bien ce guide :
Pourquoi c'est important
Les navigateurs demandent encore /favicon.ico même si le manifest déclare des tuiles PNG/WebP modernes. Windows épingle des sites avec des ressources .ico multi-tailles pour garder des raccourcis nets sur barres HiDPI. Les indie hackers qui livrent des sites statiques ont besoin d'une étape rapide entre exports Figma et dossier public/ — idéalement sans téléverser de visuels lourds en PI.
Trois scénarios réels
Générez un ICO combiné avec entrées 16–256 px depuis un glyphe SVG net.
Moins de 404 sur bots legacy
Fournissez ICO à côté du PNG pour portails compatibles IE encore imposés par l'IT.
Raccourcis bureau cohérents
Remplacez des ensembles PNG multi-fichiers par un ICO pour l'hébergement docs (GitHub Pages).
Un seul artefact commité
Parcours
Ouvrez SVG vers ICO.
Préparez un master carré
Les icônes se lisent mieux en 1:1 — recadrez le padding excédentaire d'abord avec le recadrage d'image si besoin.
Téléversez SVG (ou raster compatible)
Les sources vectorielles scalaient proprement aux densités ICO — convertissez traits en contours si les filets disparaissent.
Sélectionnez les tailles embarquées
Les bundles typiques incluent 16, 32, 48 et 256 px — ajoutez 24/64 si les guidelines tuiles Windows l'exigent.
Prévisualisez chaque couche
Testez les glyphes monochrome à 16 px — simplifiez la géométrie si les détails se brouillent.
Téléchargez `favicon.ico`
Placez à la racine du site et référencez avec
<link rel="icon" href="/favicon.ico" sizes="any">pour une large compatibilité.
Conseils avancés
- Associez PNG/WebP via
<link rel="icon" type="image/png">pour navigateurs modernes tout en gardant l'ICO filet de sécurité. - Générez des tailles PNG de secours via SVG vers PNG pour les tableaux
iconsdu manifest. - Bust du cache après redesign (
favicon.ico?v=20260502) lorsque les TTL CDN résistent.
Pièges courants
Piège courant
Illustration trop détaillée
Les entrées ICO sous 32 px punissent les dégradés complexes — privilégiez des silhouettes marquées.
Piège courant
Quirks de transparence
Certains contextes Windows aplatissent les ICO transparents sur noir — testez épinglage sur thèmes sombres.
Piège courant
Mauvais MIME sur CDN
Assurez image/x-icon ou image/vnd.microsoft.icon — des réponses mal étiquetées perturbent les crawlers.
Quand ce n'est pas l'outil adapté
- Pipelines PWA complets : générateurs
@vite-pwaou orchestrateurs d'icônes Android maskable. - Favicons animés : le support ICO animé est legacy — modernisez avec parcimonie et mesurez l'impact CPU.
.icnsmacOS : flux d'export séparés hors périmètre ICO.
FAQ
Est-ce que mes visuels de marque sont téléversés ?
Pas d'aller-retour serveur — la génération reste dans la session navigateur comme les autres utilitaires image MoreKits.
Tailles maximales recommandées ?
Trop de couches alourdit le fichier — préférez des ensembles légers couvrant bureau + menu Démarrer.
Partir du PNG plutôt que SVG ?
Oui si les masters PNG existent déjà — le SVG reste idéal pour scalabilité infinie avant rasteriser chaque couche ICO.
Étapes suivantes
- Compressez les PNG marketing après export avec le compresseur d'images.
- Auditez les couleurs avec le sélecteur de couleur.
- Documentez le déploiement favicon dans votre checklist d'hébergement statique avec
robots.txt.