Ajouter des icônes d'app avec l'IA : sans étape manuelle
L'ancienne méthode : ouvrir un générateur, importer une image, télécharger un zip, le décompresser, copier les fichiers dans public/, coller vingt balises link à la main. La nouvelle : demandez à votre agent « ajoute un favicon » et il atterrit dans le dépôt, le head déjà corrigé, terminé.
Comment tout se déroule
- 1
Vous demandez
Une phrase dans Claude Code, Cursor ou n'importe quel agent compatible MCP. Aucun asset à préparer.
- 2
Il génère
favicon.ico, toutes les tailles de PNG, apple-touch, les icônes Android, les versions clair/sombre adaptées au thème et manifest.json.
- 3
Il installe
Les fichiers sont écrits dans votre répertoire statique, les balises <head> correctes sont ajoutées à votre layout, rien à déplacer à la main.
Deux façons de le brancher
Les deux sont zéro-config après une configuration unique, et les deux écrivent les fichiers directement dans votre projet.
Option A : la skill appicons
Open source, intégrée à votre agent
- Elle apprend à l'agent à transformer une intention en jeu d'icônes et à l'installer.
- Vous discutez simplement avec lui, sans format ni taille à choisir.
- En coulisses, elle traduit ce que vous avez écrit en une source, appelle l'API de favicontools.com et déballe le résultat dans public/.
Option B : le serveur MCP Favicon Tools
Deux outils, ajoutés à la panoplie de votre agent
- search_inputs pour découvrir les options, generate_iconset pour produire le jeu.
- Renvoie des URL CDN pour chaque fichier, plus un extrait de head prêt à coller.
- Renvoie par défaut un jeu complet par étape (une icône de production épurée, plus des variantes staging/dev avec badge), pour que l'agent configure des icônes par environnement dans le même appel.
Parler à la skill
"Add a fox favicon to this app."
"Generate app icons for this site from our logo at public/logo.svg."
"Give this project a proper favicon using the React logo."
"Make me a favicon from https://example.com/mark.png."Quatre prompts qui se résolvent tous en un jeu d'icônes complet et installé.
Ajouter le serveur MCP
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}Une seule entrée, et l'agent dispose des deux outils. Le comportement par défaut par étape fait revenir les icônes par environnement dans le même appel.
Vous le décrivez en français courant
Vous ne choisissez jamais les formats ni les tailles d'icône. Vous dites ce que vous voulez ; l'agent le fait correspondre à une source.
| Ce que vous dites | Ce que l'agent utilise |
|---|---|
| Un emoji ou une ambiance | Un nom Iconify comme noto:fox ou twemoji:rocket |
| Une marque / un produit | simple-icons:stripe, logos:github-icon |
| Votre propre logo | Le chemin du fichier, par exemple ./public/logo.svg |
| L'URL d'une image | L'URL, rasterisée côté serveur |
À quoi ressemble le « terminé »
| Ce qui atterrit | Détail |
|---|---|
| Fichiers d'icône | Tous dans public/ (ou app/ pour Next.js). |
| Balises de head | Un bloc <head> complet, ou des métadonnées de layout, qui les référencent. |
| manifest.json | Avec le vrai nom de votre app et start_url. |
| Ancien favicon.ico | Supprimé, pour que le cache ne serve plus le placeholder. |