Générateur de favicon : une toile, douze fichiers
Le logo est validé, le site est en ligne, et l'onglet du navigateur affiche encore le globe gris. Le générateur de favicon prend une image, un emoji ou jusqu'à trois lettres, les dessine sur une toile de 512×512 pixels et en tire chaque taille d'icône. L'aperçu montre le résultat comme onglet, comme résultat Google et sur l'écran d'accueil d'un téléphone.
Ce qui reste sur votre machine
L'image est lue avec un FileReader et dessinée sur un canvas dans le navigateur. L'import d'un fichier et les boutons de téléchargement n'envoient aucune requête. Le panneau réseau des outils de développement le montre. Les fichiers arrivent comme des téléchargements ordinaires. Le code n'atteint le presse-papiers que si vous cliquez sur Copier le code.
Le contenu du pack
favicon.ico, plus des PNG de 16, 32, 48 et 96 pixels.- Trois Apple Touch Icon : 180, 152 et 120 pixels.
- Deux icônes Android (192 et 512), plus une icône maskable de 512 pixels.
- Une tuile Windows de 150 pixels.
- Dans le ZIP seulement :
site.webmanifest,browserconfig.xmlet README.txt.
Cinq réglages, puis le téléchargement
- Choisissez l'onglet Import d'image / SVG, Favicon emoji ou Texte / monogramme. Déposez un fichier PNG, SVG, JPG ou WebP, ou saisissez une à trois lettres.
- Choisissez le fond : Transparent, Couleur unie ou Dégradé moderne. Le dégradé a deux couleurs et un angle de 0° à 360°.
- Réglez la marge intérieure (0–40 %, 15 % par défaut) et l'arrondi des coins (0–50 %, 22 % par défaut, le style iOS).
- Saisissez le nom du site. Il devient
namedans le manifeste, et ses 12 premiers caractères formentshort_name. - Cliquez sur Télécharger le pack complet (.ZIP), ou prenez les fichiers un par un sur les cartes sous le canevas.
Ce qui peut surprendre à l'arrivée
Le fichier .ico contient trois couches PNG de 16, 32 et 48 pixels. Il n'y a pas de couche de 64 ou de 256. Les emojis sont dessinés avec la police d'emojis de votre système, donc le même emoji change d'aspect sous macOS, Windows et Android. Les monogrammes utilisent des polices système, et Impact ou une cursive peuvent être remplacées par une autre police sur votre machine.
L'arrondi et la marge s'appliquent à chaque fichier, y compris l'icône maskable. Pour une maskable sans bords, mettez l'arrondi à 0 et gardez le dessin dans le cercle pointillé.
Le code à coller dans la page
Le bouton Copier le code donne les balises <link> et <meta> pour le head. Elles relient le .ico, les PNG de 16 et 32, l'icône Apple de 180, le manifeste et la configuration Windows. Les fichiers de 48, 96, 152 et 120 pixels sont dans le ZIP, sans lien. Une petite image raster est agrandie : partez de 512×512 pixels ou plus. Quand le fond n'est pas uni, la couleur de thème du manifeste vaut #2563eb.