Générateur de Favicon — Créez un favicon.ico et des icônes PWA

Ce que produit ce générateur de favicon

Le favicon a cessé d'être un simple fichier unique il y a longtemps. Un onglet de navigateur demande 16 pixels, un onglet Retina 32, un raccourci sur le bureau Windows 48, l'écran d'accueil d'un iPhone exige un PNG de 180 pixels, et une application web installable réclame des icônes de 192 et 512 pixels déclarées dans un manifeste. Cet outil prend une image source et génère tout cela en une seule fois : favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, et un fichier site.webmanifest. Le tout est regroupé dans un ZIP avec les quatre lignes de code HTML qui les connectent. Le fichier .ico est assemblé manuellement plutôt que délégué à un convertisseur. ICO est un format conteneur, pas un codec : un en-tête de six octets indique le nombre d'images contenues, puis une entrée de seize octets par image précise sa largeur, hauteur, taille en octets et emplacement, avant que les données des images ne suivent. Tous les navigateurs actuels acceptent les données PNG à l'intérieur. Ce générateur écrit donc des PNG, plutôt que le vieux format legacy BMP avec son ordre de lignes inversé et son masque de transparente 1-bit séparé. Trois images sont intégrées — 16, 32 et 48 pixels — afin que Windows et les anciens navigateurs puissent choisir la taille dont ils ont besoin au lieu de redimensionner mal une image unique. La particularité du format est à connaître si vous inspectez les octets : la largeur et la hauteur sont codées sur un seul octet, donc 256 est écrit comme zéro et rien de plus grand n'est exprimable. La qualité de réduction d'échelle bénéficie de la même attention. Réduire un logo de 1024 pixels directement à 16 pixels en un seul appel à drawImage revient à demander au filtre bilinéaire du navigateur de résumer un bloc de 64 par 64 à partir d'un échantillon de 2 par 2, ce qui élimine presque tous les pixels sources et produit le fouillis pixelisé typique des favicons faits à la main. Cet outil divise l'image par deux de manière répétée, en ne réduisant jamais de plus de moitié par étape. Chaque passe moyenne donc tout son voisinage, et les détails fins survivent jusqu'à la taille de 16 pixels. Le rayon des coins et la marge sont appliqués pendant ce rendu, et non après, ce qui préserve l'anticrénelage des bords à toutes les tailles.