Générer des favicons

Pourquoi une icône est devenue neuf fichiers

Chaque fichier du jeu existe parce qu'un élément précis le lit, et ne lit rien d'autre. favicon.ico, avec les tailles 16, 32 et 48, reste ce qu'un navigateur cherche par défaut à la racine du site, et ce que beaucoup de logiciels plus anciens vérifient en premier. favicon-16x16.png et favicon-32x32.png sont ce que les navigateurs actuels préfèrent pour l'onglet, car un PNG à la taille exacte vaut mieux qu'une mise à l'échelle. apple-touch-icon.png, en 180 pixels, est ce qu'iOS place sur l'écran d'accueil — sans prise en charge de la transparence, il est donc composé sur un fond uni plutôt que d'arriver avec des coins noirs. android-chrome-192x192.png et 512x512.png sont ce qu'une application web progressive installée utilise pour son icône de lanceur et son écran de démarrage, déclarés dans site.webmanifest.

Servir un seul grand PNG pour tout cela fonctionne mal partout, et c'est le raccourci le plus courant. Le navigateur télécharge un demi-mégaoctet pour dessiner seize pixels, iOS ignore les règles de transparence et pose votre logo sur un carré noir, et l'icône du lanceur est rognée par le masque qu'applique la plateforme. Le jeu est fastidieux justement parce que chaque destinataire a ses exigences.

L'extrait HTML compte autant que les images. Les navigateurs ne découvrent pas seuls la plupart de ces fichiers — seul favicon.ico à la racine est trouvé par convention — ce sont donc les balises link qui les relient, et le manifeste a besoin de la sienne. L'extrait utilise des chemins relatifs à la racine, qui fonctionnent sans modification tant que les fichiers se trouvent à la racine du site ; si vous les placez dans un sous-dossier, il faut ajuster les chemins de l'extrait et du manifeste.

Pensez d'abord à 16 pixels. À cette taille, il y a de la place pour une forme et peut-être deux couleurs — pas de texte, pas de dégradé, pas de détail fin, et surtout pas de logotype complet. Une source carrée, marquée et bien contrastée d'au moins 512 pixels, ou un SVG, donne le jeu le plus propre ; l'aperçu montre le rendu 16 px honnêtement plutôt qu'avantageusement, car c'est celui qui vous décevra plus tard. Les sources non carrées sont complétées en carré par de la transparence plutôt que recadrées ou étirées.

Si vous cherchez autre chose

Le jeu généré ici couvre l'essentiel moderne et pratique. Si vous avez besoin de toute la longue traîne — vignettes Windows, icône de masque des onglets épinglés de Safari, browserconfig de Microsoft, anciennes tailles Apple — RealFaviconGenerator les prend en charge et vérifie ensuite votre site en ligne, ce qui est réellement utile et que cet outil ne peut pas faire.

Dans une chaîne de build, générer les icônes à la main n'est tout simplement pas la bonne méthode. favicons, pwa-asset-generator et les plugins de frameworks basés sur sharp produisent le jeu complet à partir d'un seul fichier source à chaque déploiement : les icônes ne peuvent donc pas devenir obsolètes quand le logo change — ce qui, en pratique, finit toujours par arriver.