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

You ask — One sentence in Claude Code, Cursor, or any MCP-aware agent. No assets to prepare.

It generates — favicon.ico, every PNG size, apple-touch, Android icons, theme-aware light/dark, and manifest.json.

It installs — Files written to your static dir, the correct 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 — 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 — use 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 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.

Stop context-switching to a favicon tool: Generate from the browser now, or wire up your agent so the next app never ships without icons.