Votre nouvelle app a l'air inachevée sans favicon
Vous avez livré la fonctionnalité, branché la base de données, déployé sur une vraie URL, et l'onglet du navigateur affiche encore une feuille de papier blanche. C'est un petit carré de 16×16, et il dit tout bas à chaque visiteur que le produit n'est pas fini.
Pourquoi ça arrive toujours
Les favicons sont le dernier 1 % que personne ne planifie. Le scaffolding d'un projet vous donne une icône placeholder gratuitement, alors l'alerte ne se déclenche jamais, et le placeholder file jusqu'en production.
Fabriquer un jeu correct à la main est franchement pénible : exporter une douzaine de tailles, générer un ICO, écrire un manifest à la main, coller vingt balises link. Alors c'est reporté à « plus tard », et le plus tard n'arrive jamais.
Pourquoi un onglet vide vous coûte cher
L'icône d'onglet, c'est votre marque à sa plus petite taille. Quand quelqu'un a 30 onglets ouverts, le favicon est le seul moyen de retrouver le vôtre. Un onglet vide est invisible.
C'est aussi le signal de crédibilité le moins cher qui soit. Une icône nette se lit comme « un vrai produit » ; une icône vide se lit comme « un prototype de week-end », même quand le code en dessous est excellent.
Le carré que tout le monde voit vraiment
Les signes d'une icône manquante
Si l'un de ces points est vrai sur votre site en ligne, les visiteurs voient une app inachevée :
Une icône de page-au-coin-corné vide posée dans l'onglet du navigateur.
Le défaut du framework (le logo de Next.js, de Vite ou de Create React App) qui part en production.
Une capture d'écran pixelisée et étirée que quelqu'un a jetée dans public/favicon.ico juste pour faire taire l'alerte.
Des icônes qui ne concordent pas : une chose dans l'onglet, une autre sur l'écran d'accueil iOS, rien dans l'invite d'installation du PWA.
Réglez-le en une étape
Tout le problème disparaît dès l'instant où vous cessez de traiter les icônes comme une corvée manuelle. Le flux est court :
- 1
Choisissez une source
Un emoji, une marque, le fichier de votre logo ou l'URL d'une image.
- 2
Générez le jeu complet
favicon.ico, toutes les tailles de PNG, apple-touch-icon, les icônes Android et manifest.json.
- 3
Installez-le
Déposez les fichiers dans public/ et les balises link dans votre <head> (ou dans app/layout.tsx).
- 4
Vérifiez-le
Contrôlez qu'il s'affiche dans l'onglet, sur mobile et dans l'invite d'installation avant de le considérer comme fini.
À la main, ou par l'agent
À la main
La raison pour laquelle c'est reporté
- Exporter une douzaine de tailles.
- Générer un ICO.
- Écrire un manifest à la main.
- Coller vingt balises link.
Laissez votre agent de code le faire
Start hereClaude Code, Cursor ou n'importe quel agent compatible MCP
- Vous n'ouvrez jamais de générateur de favicon.
- Les icônes sont créées et installées directement dans le dépôt : fichiers écrits, <head> corrigé.
- Le tout à partir d'un seul prompt comme « ajoute un favicon renard à cette app ».