Vous avez déjà un logo. Ce qu'il vous faut, c'est ce logo transformé en la pile de petits fichiers d'icône qu'un navigateur attend — un favicon.ico, une poignée de PNG à des tailles précises, un manifeste web, et le HTML pour tout relier. Cette conversion est mécanique, et vous pouvez la faire en une minute environ sans rien installer.
Le hic, c'est que tous les logos ne se réduisent pas avec élégance. Ceci couvre donc à la fois la voie rapide et comment corriger un logo qui tourne en bouillie à 16 pixels.
La version courte
- Obtenez votre logo en image carrée — idéalement 512×512 ou plus, sur fond transparent ou uni.
- Déposez-le dans le générateur de favicon.
- Téléchargez le jeu généré et placez les fichiers à la racine de votre site.
- Collez l'extrait HTML fourni dans votre
<head>.
C'est tout le travail. Le générateur produit favicon.ico, des PNG en 16, 32, 48, 180, 192 et 512, un webmanifest, et les balises <link> exactes — vous ne recadrez donc pas six images à la main ni ne devinez la syntaxe du manifeste.
Préparez d'abord votre logo — c'est là que la qualité se gagne ou se perd
Un favicon vit à 16×16 dans l'onglet du navigateur. Tout détail incapable de survivre à cette taille est gaspillé. Passez deux minutes ici et le résultat paraît net partout.
Rendez-le carré. Les favicons sont carrés. Un logo large et horizontal sera bordé ou écrasé. Recadrez sur l'élément le plus reconnaissable — généralement la marque ou une seule initiale — et centrez-le dans un cadre carré.
Abandonnez le logotype. Le nom complet de votre entreprise ne sera pas lisible à la taille d'un onglet. « Acme Corporation » devient une tache grise. Gardez le symbole, ou une seule lettre, et laissez le titre de l'onglet porter le nom.
Vérifiez le contraste sur les deux thèmes. Les onglets du navigateur existent en clair et en sombre. Une icône bleu marine disparaît sur un onglet sombre ; une icône pâle disparaît sur un onglet clair. Si votre marque est d'une seule couleur plate, assurez-vous que cette couleur se lit sur les deux. Un contour subtil ou une petite pastille de fond unie peut aider.
Laissez de l'air. Ajoutez un peu de marge à l'intérieur du carré pour que l'icône ne se serre pas contre les bords. Elle paraîtra plus équilibrée dans chaque emplacement.
Partez grand. Une source en 512×512 (ou plus) donne au générateur un détail propre à réduire. Agrandir d'abord un logo minuscule ne fait qu'incruster du flou.
Fond transparent ou uni ?
Les deux fonctionnent — cela dépend du rendu voulu.
- Transparent laisse transparaître le fond de l'onglet ou de l'écran d'accueil. Propre et moderne, et il s'adapte aux environnements clairs/sombres. Idéal quand votre marque est une forme distincte.
- Pastille de fond unie (un carré arrondi coloré derrière la marque) garantit que l'icône se lit quel que soit ce qui est derrière. C'est ce que font la plupart des icônes d'application, et c'est le choix le plus sûr si votre logo est fin ou peu contrasté.
En cas de doute, une pastille unie à la couleur de votre marque est l'option robuste — elle ne disparaît jamais dans un fond assorti.
Après le téléchargement : où vont les fichiers
Le générateur vous remet un jeu de fichiers et un extrait. Deux règles de placement suffisent :
favicon.icova à la racine de votre site (/favicon.ico). Les navigateurs et Windows l'y cherchent par nom même sans balise<link>.- Tout le reste peut vivre où vous voulez tant que les chemins de l'extrait HTML correspondent. La plupart des gens les placent tous à la racine et collent l'extrait tel quel.
Ensuite, il ne reste que l'extrait <head> — les liens d'icône, l'apple-touch-icon, et la référence au manifeste. Collez, déployez, forcez le rechargement, et vous devriez voir votre logo dans l'onglet.
Pourquoi le faire dans le navigateur ?
Parce que votre logo ne quitte jamais votre machine. Tout le processus — lire l'image, la redimensionner à chaque dimension, empaqueter le .ico, écrire le manifeste — se déroule localement dans votre navigateur grâce à Canvas. Rien n'est téléversé vers un serveur, il n'y a ni inscription ni filigrane, et après votre première visite l'outil fonctionne hors ligne. Pour un élément de marque que vous n'avez peut-être pas encore publié, le garder hors des serveurs tiers est le choix par défaut avisé.
Une fois votre logo carré, contrasté et lisible en petit, générer le jeu complet est la partie facile.