Générateur de favicon

L’image de départ compte plus que n’importe quel réglage, et trois choses décident si le résultat sera réussi.

Partez de quelque chose de grand, ou d’un vecteur. Un SVG est idéal, car chaque taille est rendue à partir des formes au lieu d’être réduite depuis un bitmap. Sinon, prenez 512×512 ou plus : l’icône Android à elle seule a besoin de 512.

Faites-le carré. Les icônes sont carrées partout où elles apparaissent. Un logo large est ajusté dans un carré avec de l’espace autour, et il paraît petit et perdu. Recadrez-le d’abord en carré, ou concevez une marque carrée.

Simplifiez. C’est l’étape que la plupart des gens sautent, et elle compte plus que la résolution. En 16×16, vous avez 256 pixels au total : le logo complet de l’entreprise avec son slogan est illisible, aussi bon que soit l’original. Regardez les favicons des sites que vous utilisez chaque jour : presque tous sont une lettre, une marque simple ou une forme forte, et bien plus simples que le vrai logo de la même entreprise.

Si votre logo est détaillé, créez une version simplifiée pour l’icône. C’est normal, et c’est exactement ce que font les grandes organisations.

La transparence est conservée. C’est généralement ce qu’on veut : une icône avec un fond blanc intégré apparaît comme un carré blanc dans un navigateur au thème sombre.

Installer le jeu d’icônes

Envoyez tout à la racine de votre site, pour que les fichiers soient accessibles à https://example.com/favicon.ico et ainsi de suite. Les sous-dossiers ne fonctionnent pas : les navigateurs cherchent précisément /favicon.ico, et les chemins du manifeste partent de la racine.

Collez ensuite ceci dans votre <head> :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Enfin, ouvrez site.webmanifest et renseignez name et short_name.

« Je l’ai envoyé et rien n’a changé »

C’est de loin le problème le plus fréquent, et il ne vient presque jamais des fichiers.

Les navigateurs mettent les favicons en cache de façon très tenace, souvent plus que toute autre ressource, et ignorent parfois complètement un simple rechargement. Avant de supposer que quelque chose ne va pas :

• Essayez un rechargement forcé, une fenêtre privée, ou un navigateur avec lequel vous n’avez jamais visité le site.
• Ouvrez directement le fichier (https://example.com/favicon.ico) pour confirmer qu’il est bien là et servi.
• Laissez-lui du temps. Certains navigateurs ne revérifient l’icône qu’après un moment ou un redémarrage.

Si le fichier s’ouvre directement mais que l’onglet affiche toujours l’ancienne icône, c’est le cache. Si le fichier renvoie une erreur 404, il n’est pas au bon endroit.

Vous voulez aussi une icône SVG ?

Les navigateurs modernes acceptent un favicon SVG, qui reste net à toutes les tailles et peut s’adapter au mode sombre :

<link rel="icon" href="/icon.svg" type="image/svg+xml">

C’est un bon complément, pas un remplacement. Gardez l’ICO en solution de repli : les raccourcis Windows, les anciens navigateurs et beaucoup d’outils tiers le cherchent encore.

Au-delà des sites web

Le favicon.ico de cette archive est une icône Windows multi-tailles standard : il sert donc aussi pour les icônes de programmes, les raccourcis du bureau et les icônes de dossiers. Partout où Windows affiche une icône, il choisit la taille qui convient le mieux à l’affichage, et c’est justement pourquoi le fichier en contient quatre.