--- title: Add App Icons With AI: No Manual Steps description: Let your coding agent generate and install a full favicon / app-icon set straight into the repo. No browser, no zip download, no manual unzip, just a prompt. canonical: https://favicontools.com/blog/add-app-icons-with-ai --- # 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 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 ```text "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 ```jsonc // .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.