Add App Icons With AI: No Manual Steps
The old way: open a generator, upload an image, download a zip, unzip it, copy files into public/, hand-paste twenty link tags. The new way: tell your agent "add a favicon" and it lands in the repo, head patched, done.
How the whole thing goes
- 1
You ask
One sentence in Claude Code, Cursor, or any MCP-aware agent. No assets to prepare.
- 2
It generates
favicon.ico, every PNG size, apple-touch, Android icons, theme-aware light/dark, and manifest.json.
- 3
It installs
Files written to your static dir, the correct <head> tags added to your layout, nothing to move by hand.
Two ways to wire it up
Both are zero-config beyond a one-time setup, and both write files directly into your project.
Option A: the appicons skill
Open source, dropped into your agent
- Teaches the agent how to turn intent into an icon set and install it.
- You just talk to it, with no formats or sizes to pick.
- Under the hood it resolves your wording to a source, calls the favicontools.com API, and unpacks the result into public/.
Option B: the Favicon Tools MCP server
Two tools, added to your agent's toolbelt
- search_inputs to discover options, generate_iconset to produce the set.
- Returns CDN URLs for every file plus a ready-to-paste head snippet.
- Returns a full per-stage set by default (a clean production icon plus badged staging/dev variants), so the agent can wire up per-environment icons in the same call.
Talking to the 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."Four prompts that all resolve to a complete, installed icon set.
Adding the MCP server
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}One entry, and the agent has both tools. The per-stage default means per-environment icons come back from the same call.
You describe it in plain English
You never pick icon formats or sizes. You say what you want; the agent maps it to a source.
| What you say | What the agent uses |
|---|---|
| An emoji or vibe | An Iconify name like noto:fox or twemoji:rocket |
| A brand / product | simple-icons:stripe, logos:github-icon |
| Your own logo | The file path, e.g. ./public/logo.svg |
| An image URL | The URL, rasterized server-side |
What "done" looks like
| What lands | Detail |
|---|---|
| Icon files | All sitting in public/ (or app/ for Next.js). |
| Head tags | A complete <head> block, or layout metadata, referencing them. |
| manifest.json | With your real app name and start_url. |
| Old favicon.ico | Removed, so the cache can't serve the placeholder. |