Pack de favicons depuis SVG ou PNG

Non. La conversion se fait entièrement dans votre navigateur. Le fichier ne quitte jamais votre appareil – aucun serveur ne peut le voir. Une fois la page chargée, l'outil fonctionne même hors ligne.

favicon.ico (16, 32 et 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), icon-192.png et icon-512.png pour Android et les applications web installables, site.webmanifest avec le nom et les couleurs de l'app, snippet.html avec les balises <link> et <meta> – et, si vous partez d'un SVG, favicon.svg pour les navigateurs qui préfèrent le vectoriel.

Décompressez tout à la racine de votre site, de sorte que /favicon.ico soit accessible, et collez le contenu de snippet.html dans le <head> de vos pages. Si les fichiers sont dans un sous-dossier, adaptez les chemins dans l'extrait et dans site.webmanifest.

SVG, dès que vous en avez un : chaque taille est rendue depuis le vectoriel et reste nette, et le pack inclut le favicon SVG. Un PNG convient aussi, mais il devrait faire au moins 512 × 512 px ; les images plus petites sont agrandies et paraissent floues aux grandes tailles. Les images non carrées sont centrées avec une marge transparente.

iOS affiche du noir derrière les zones transparentes de l'icône d'écran d'accueil ; apple-touch-icon.png est donc aplati sur la couleur d'arrière-plan choisie. Tous les autres fichiers gardent leur transparence.

Le moteur de rendu fonctionne dans votre navigateur sans aucune police et ne peut donc pas dessiner de texte. Plutôt que de produire une image où le texte manque silencieusement, les fichiers contenant <text> sont refusés. Convertissez d'abord le texte en chemins dans votre éditeur (Inkscape : Chemin → Objet en chemin ; Illustrator : Texte → Vectoriser) et réessayez.