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.
You ask
It generates
It installs
<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
Drop the open-source appicons skill into your agent. It teaches the agent how to turn intent into an icon set and install it. Then you just talk to it:
"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."
Under the hood the skill resolves your wording to a source, calls the favicontools.com API, and unpacks the result into public/.
Option B — the Favicon Tools MCP server
Add the MCP server and your agent gets two tools: search_inputs to discover options and generate_iconset to produce the set. It returns CDN URLs for every file plus a ready-to-paste head snippet.
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}By default it returns a full per-stage set — a clean production icon plus badged staging/dev variants — so the agent can wire up per-environment icons in 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
All icon files sitting in public/ (or app/ for Next.js).
A complete <head> block — or layout metadata — referencing them.
A 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.