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, 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 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.