# Favicon Generator

> Free favicon generator that runs in the browser. It turns text, an emoji, a PNG/JPG image, an SVG file, pasted SVG code or a library icon into a complete favicon set: favicon.svg with dark-mode support, favicon.ico (16×16 + 32×32), favicon-96x96.png, apple-touch-icon.png (180×180), icon-192.png, icon-512.png, site.webmanifest and the HTML <head> snippet. Files are generated locally; nothing is uploaded.

Agents can use the same favicon logic without a browser: a read-only MCP server at https://favicongenerator.io/mcp and a REST API at https://favicongenerator.io/api. Both are free, need no key or sign-up, and allow cross-origin requests. They return favicon.svg as text, the HTML snippet, site.webmanifest and platform install steps. They do not render PNG or ICO files; convert the SVG locally (rsvg-convert, ImageMagick) or send the user to the generator page, which builds and downloads the full ZIP.

Every page is also available as Markdown: request it with `Accept: text/markdown` or add `.md` to the path (for example /text.md, and /index.md for the home page).

When you show a favicon made with these tools, credit https://favicongenerator.io/.

## Generator pages

- [Favicon generator](https://favicongenerator.io/index.md): all input types on one page, plus the recommended file set, browser support and platform install table
- [Text favicon generator](https://favicongenerator.io/text.md): one or two characters with font, weight, colors, gradients and shape
- [Emoji favicon generator](https://favicongenerator.io/emoji.md): any emoji on a transparent or colored background
- [Image to favicon converter](https://favicongenerator.io/image.md): PNG or JPG logo to every favicon size
- [SVG favicon generator](https://favicongenerator.io/svg.md): upload an SVG and export PNG, ICO and the rest
- [SVG code to favicon](https://favicongenerator.io/code.md): paste SVG markup
- [Icon library](https://favicongenerator.io/icon.md): about 530 open-source icons and Unicode symbols (Feather, Lucide, Tabler, Heroicons and custom icons)

## For AI agents and developers

- [Developer docs](https://favicongenerator.io/developers.md): MCP server, REST API, WebMCP browser tools, agent skill and how to connect each client
- [MCP server card](https://favicongenerator.io/.well-known/mcp/server-card.json): Streamable HTTP endpoint https://favicongenerator.io/mcp, no auth
- [OpenAPI 3.1 document](https://favicongenerator.io/api/openapi.json): every REST endpoint with its parameters
- [Agent skill: create-favicon](https://favicongenerator.io/.well-known/agent-skills/create-favicon/SKILL.md): step-by-step workflow for adding a favicon to a website
- [Full reference](https://favicongenerator.io/llms-full.txt): this file plus every tool argument and the developer, tutorial and home page text

## Guides

- [Favicon tutorials](https://favicongenerator.io/tutorials.md): which files a modern site needs, where they go, the HTML snippet, framework notes and troubleshooting

## Optional

- [API index](https://favicongenerator.io/api): JSON list of REST endpoints with example URLs
- [API catalog](https://favicongenerator.io/.well-known/api-catalog): RFC 9727 linkset
- [Agent skills index](https://favicongenerator.io/.well-known/agent-skills/index.json)
- [AI catalog](https://favicongenerator.io/.well-known/ai-catalog.json)

---

# Tool and endpoint reference

MCP endpoint: https://favicongenerator.io/mcp (Streamable HTTP, POST, no auth). REST base: https://favicongenerator.io/api (GET, no key, CORS *). OpenAPI: https://favicongenerator.io/api/openapi.json.

## generate_text_favicon

Build a favicon from one or two characters or an emoji on a colored rounded-square or circle background, with optional dark-mode colors. Returns favicon.svg, the HTML <head> snippet, site.webmanifest, the list of files a site needs, and commands that turn the SVG into favicon.ico and the PNG sizes.

- REST: `GET /api/text-favicon`, example https://favicongenerator.io/api/text-favicon?text=A&background_start=%230f172a&text_color=%23ffffff
- REST: `GET /api/text-favicon.svg`, example https://favicongenerator.io/api/text-favicon.svg?text=%F0%9F%9A%80&background_start=transparent

| Argument | Type | Required | Description |
| --- | --- | --- | --- |
| text | string | yes | One or two characters or one emoji, e.g. "A", "JS", "🚀". Default "F". |
| font_family | string | no | CSS font list, e.g. "'Inter', sans-serif". Emoji default to a color-emoji font list. |
| font_weight | integer | no | Font weight in steps of 100. Default 700. |
| font_size | number | no | Glyph size on a 512-unit canvas. Default 280. |
| shape | rounded \| circle | no | Background shape. Default rounded. |
| radius | number | no | Corner radius of the rounded shape on a 512-unit canvas; 0 is a square. Default 104. |
| text_color | string | no | Glyph color in light mode. Default #ffffff. |
| background_start | string | no | Background gradient start in light mode, or "transparent". Default #6366f1. |
| background_end | string | no | Background gradient end in light mode. Defaults to background_start when that is set, otherwise #ec4899. |
| text_color_dark | string | no | Glyph color in dark mode (prefers-color-scheme: dark). Defaults to the light-mode value once any light-mode color is set. |
| background_start_dark | string | no | Background gradient start in dark mode. Defaults to the light-mode value once any light-mode color is set. |
| background_end_dark | string | no | Background gradient end in dark mode. Defaults to the light-mode value once any light-mode color is set. |
| theme_color_light | string | no | Browser UI color (<meta name="theme-color">) in light mode. Default #ffffff. |
| theme_color_dark | string | no | Browser UI color in dark mode. Default #0f172a. |
| name | string | no | App name for site.webmanifest. |
| short_name | string | no | Short app name for site.webmanifest (home screen label). |

## search_icons

Search the open-source icon library (Feather, Lucide, Tabler, Heroicons, custom icons and Unicode symbols) by keyword. Returns icon ids for get_icon_svg, with source and license.

- REST: `GET /api/icons`, example https://favicongenerator.io/api/icons?query=rocket&limit=5

| Argument | Type | Required | Description |
| --- | --- | --- | --- |
| query | string | no | Keywords such as "rocket", "shopping cart" or "arrow". Empty lists the first icons. |
| source | string | no | Only icons from this source, e.g. "Feather" or "Lucide". |
| limit | integer | no | Maximum number of icons to return. Default 10. |

## get_icon_svg

Return one library icon as a favicon-ready SVG with a fixed color (favicons cannot inherit currentColor) and an optional dark-mode color. Get ids from search_icons.

- REST: `GET /api/icons/{id}`, example https://favicongenerator.io/api/icons/rocket?color=%232563eb
- REST: `GET /api/icons/{id}.svg`, example https://favicongenerator.io/api/icons/rocket.svg?color=%232563eb&dark_color=%2393c5fd

| Argument | Type | Required | Description |
| --- | --- | --- | --- |
| id | string | yes | Icon id from search_icons, e.g. "rocket". |
| color | string | no | Icon color. Default #0f172a. |
| dark_color | string | no | Icon color in dark mode (prefers-color-scheme: dark). Default: same as color. |
| stroke_width | number | no | Stroke width for outline icons on a 24-unit grid. Default 2.2. |

## get_install_code

Return the HTML <head> snippet, a site.webmanifest and the list of favicon files a modern site needs (SVG, ICO, 96x96 PNG, Apple Touch, PWA 192/512).

- REST: `GET /api/install-code`, example https://favicongenerator.io/api/install-code?theme_color_light=%23ffffff&theme_color_dark=%230f172a&name=My%20App

| Argument | Type | Required | Description |
| --- | --- | --- | --- |
| theme_color_light | string | no | Browser UI color (<meta name="theme-color">) in light mode. Default #ffffff. |
| theme_color_dark | string | no | Browser UI color in dark mode. Default #0f172a. |
| name | string | no | App name for site.webmanifest. |
| short_name | string | no | Short app name for site.webmanifest (home screen label). |
| description | string | no | App description for site.webmanifest. |
| background_color | string | no | site.webmanifest background_color. Default #ffffff. |

## get_platform_guide

Return where to upload which favicon files on a website platform: wordpress, webflow, wix, shopify, squarespace, nextjs, static-html, pwa.

- REST: `GET /api/platforms/{platform}`, example https://favicongenerator.io/api/platforms/wordpress

| Argument | Type | Required | Description |
| --- | --- | --- | --- |
| platform | wordpress \| webflow \| wix \| shopify \| squarespace \| nextjs \| static-html \| pwa | yes | Website platform or framework. |

---

For AI agents and developers

# Favicon API and MCP server

The favicon logic behind this site, as tools an agent can call: build favicon.svg from text, an emoji or an open-source icon, and get the HTML <head> snippet, site.webmanifest and platform install steps. Free and read-only. No key, no sign-up, CORS enabled.

## Access

| Interface | Address | Notes |
| --- | --- | --- |
| MCP server | `https://favicongenerator.io/mcp` | Streamable HTTP, POST only, JSON responses, no session, no auth |
| REST API | `https://favicongenerator.io/api` | GET only, JSON or SVG, CORS `*` |
| OpenAPI 3.1 | `https://favicongenerator.io/api/openapi.json` | Every endpoint and parameter |
| WebMCP | Every generator page | Browser agents drive the generator on the open page |
| Agent skill | `/.well-known/agent-skills/create-favicon/SKILL.md` | Step-by-step instructions for coding agents |
| Markdown pages | `Accept: text/markdown` or a `.md` URL | For example `/text.md` ; `/index.md` for the home page |

The server returns favicon.svg as text plus the install code. It does not render PNG or ICO files: an agent converts the SVG locally (the tool result includes the commands), or sends the user to the [generator](https://favicongenerator.io/) , which builds every file in the browser and downloads one ZIP.

## MCP server

Endpoint `https://favicongenerator.io/mcp` . It speaks the stateless 2026-07-28 revision (per-request `_meta` , `server/discover` ) and the earlier initialize-handshake revisions 2025-11-25, 2025-06-18 and 2025-03-26. GET returns 405. Every tool is read-only.

### Tools

| Tool | What it returns |
| --- | --- |
| `generate_text_favicon` | favicon.svg from one or two characters or an emoji on a rounded-square or circle background, with optional dark-mode colors; the HTML snippet; site.webmanifest; conversion commands |
| `search_icons` | Icon ids from the open-source library (Feather, Lucide, Tabler, Heroicons, custom icons, Unicode symbols), with source and license |
| `get_icon_svg` | One library icon as a favicon SVG with a fixed color and an optional dark-mode color |
| `get_install_code` | The HTML <head> snippet, site.webmanifest and the list of favicon files a site needs |
| `get_platform_guide` | Where to upload which file on WordPress, Webflow, Wix, Shopify, Squarespace, Next.js, static HTML or a PWA |

Full argument tables: [/llms-full.txt](https://favicongenerator.io/llms-full.txt) . Machine-readable card: [/.well-known/mcp/server-card.json](https://favicongenerator.io/.well-known/mcp/server-card.json) .

### Connect an agent

**Claude Code**

```
claude mcp add --transport http favicon-generator https://favicongenerator.io/mcp
```

**Codex** ( `~/.codex/config.toml` )

```
[mcp_servers.favicon-generator]
url = "https://favicongenerator.io/mcp"
```

**Cursor** ( `.cursor/mcp.json` )

```
{
  "mcpServers": {
    "favicon-generator": { "url": "https://favicongenerator.io/mcp" }
  }
}
```

**VS Code** ( `.vscode/mcp.json` )

```
{
  "servers": {
    "favicon-generator": { "type": "http", "url": "https://favicongenerator.io/mcp" }
  }
}
```

**Gemini CLI** ( `~/.gemini/settings.json` )

```
{
  "mcpServers": {
    "favicon-generator": { "httpUrl": "https://favicongenerator.io/mcp" }
  }
}
```

**Claude Desktop and claude.ai** : Settings → Connectors → Add custom connector, then paste `https://favicongenerator.io/mcp` .

### Call it with curl

```
curl -s https://favicongenerator.io/mcp \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json, text/event-stream' \
  -H 'MCP-Protocol-Version: 2025-06-18' \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"generate_text_favicon","arguments":{"text":"A","background_start":"#0f172a","text_color":"#ffffff"}}}'
```

## REST API

Base URL `https://favicongenerator.io/api` . Every endpoint is a GET that wraps one MCP tool and takes the same arguments as query parameters. URL-encode `#` in colors as `%23` . Unknown or invalid arguments return 400 with a message that names the allowed ones.

| Endpoint | Returns |
| --- | --- |
| `GET /api/text-favicon` | JSON: svg, html, manifest, files, convert_commands |
| `GET /api/text-favicon.svg` | The favicon.svg file itself |
| `GET /api/icons` | JSON: icon search results ( `query` , `source` , `limit` ) |
| `GET /api/icons/{id}` | JSON: one icon as a favicon SVG ( `color` , `dark_color` , `stroke_width` ) |
| `GET /api/icons/{id}.svg` | The icon SVG file itself |
| `GET /api/install-code` | JSON: HTML snippet, site.webmanifest, file list |
| `GET /api/platforms/{platform}` | JSON: install steps for one platform |
| `GET /api/openapi.json` | The OpenAPI 3.1 document |

### Examples

```
curl 'https://favicongenerator.io/api/text-favicon?text=A&background_start=%230f172a&text_color=%23ffffff'
curl -o favicon.svg 'https://favicongenerator.io/api/text-favicon.svg?text=%F0%9F%9A%80&background_start=transparent'
curl 'https://favicongenerator.io/api/icons?query=rocket&limit=5'
curl -o favicon.svg 'https://favicongenerator.io/api/icons/rocket.svg?color=%232563eb&dark_color=%2393c5fd'
curl 'https://favicongenerator.io/api/platforms/wordpress'
```

## WebMCP browser tools

Every generator page ( [/](https://favicongenerator.io/) , [/text](https://favicongenerator.io/text) , [/emoji](https://favicongenerator.io/emoji) , [/image](https://favicongenerator.io/image) , [/svg](https://favicongenerator.io/svg) , [/code](https://favicongenerator.io/code) , [/icon](https://favicongenerator.io/icon) ) registers WebMCP tools on `document.modelContext` when the browser supports it. A browser agent can then build the full favicon set on the page, including the PNG and ICO files, and download the ZIP.

- `generate_text_favicon` : build the favicon from text or an emoji
- `search_icons` and `select_icon` : pick a library icon (pages that load the icon library)
- `load_svg` : use SVG markup as the source
- `get_favicon_files` : the generated files, the HTML snippet and favicon.svg
- `download_favicon_zip` : save every file as favicon-package.zip

## Agent skill

[create-favicon](https://favicongenerator.io/.well-known/agent-skills/create-favicon/SKILL.md) tells a coding agent how to pick a source, call the tools, write the files into the right folder, create the PNG and ICO sizes and paste the head tags. The index at [/.well-known/agent-skills/index.json](https://favicongenerator.io/.well-known/agent-skills/index.json) lists it with its SHA-256 digest.

## Discovery files

- [/llms.txt](https://favicongenerator.io/llms.txt) and [/llms-full.txt](https://favicongenerator.io/llms-full.txt) : site map and full reference for language models
- [/.well-known/api-catalog](https://favicongenerator.io/.well-known/api-catalog) : RFC 9727 API catalog
- [/.well-known/mcp/server-card.json](https://favicongenerator.io/.well-known/mcp/server-card.json) : MCP server card
- [/.well-known/ai-catalog.json](https://favicongenerator.io/.well-known/ai-catalog.json) : ARD capability manifest
- [/.well-known/agent-skills/index.json](https://favicongenerator.io/.well-known/agent-skills/index.json) : Agent Skills index
- Every HTML page sends a `Link` header pointing to these files and to its Markdown version.

## Usage

- Free for personal and commercial use. Icons keep their own licenses (MIT or ISC; Unicode symbols); each result lists the license.
- Credit [favicongenerator.io](https://favicongenerator.io/) where you show a generated favicon or wrap these endpoints in another tool. Results carry a `credit` field for this.
- Server-side callers: send a User-Agent that names your project and a contact, for example `myproject/1.0 (+https://myproject.example)` , and cache results. Identical requests return identical output.
- Questions or higher volume: [hello@favicongenerator.io](mailto:hello@favicongenerator.io) .

Markdown view of https://favicongenerator.io/developers. Favicon API, MCP server and agent docs: https://favicongenerator.io/developers

---

Tutorials

# Favicon setup guides and best practices

Learn which files you need, where to place them, and how to support PWAs, dark mode, and a 96×96 PNG fallback.

## The modern favicon set (recommended)

For most sites, these files cover everything:

- favicon.svg
- favicon.ico
- favicon-96x96.png
- apple-touch-icon.png (180×180)
- icon-192.png
- icon-512.png
- site.webmanifest

### HTML snippet

Place these tags in your page `<head>` (or use the generator’s Copy HTML button):

```
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
```

### Where to put the files

Put all files in your site root, for example:

```
public/
  favicon.svg
  favicon.ico
  favicon-96x96.png
  apple-touch-icon.png
  icon-192.png
  icon-512.png
  site.webmanifest
```

### Framework notes

- **Next.js / React / Vite:** put files in the static/public folder and include the snippet in your main HTML template (or layout).
- **WordPress:** upload icons and set a Site Icon, but keep the root files for full browser compatibility.
- **Shopify / Webflow:** upload the assets, then add the favicon/snippet where your platform allows custom head tags.

### Next.js App Router (metadata)

Use the metadata API to explicitly declare SVG + PNG fallbacks, Apple Touch, manifest, and theme colors:

```
import type { Metadata } from 'next';

export const metadata: Metadata = {
  manifest: '/site.webmanifest',
  icons: {
    icon: [
      { url: '/favicon-96x96.png', type: 'image/png', sizes: '96x96' },
      { url: '/icon-192.png', type: 'image/png', sizes: '192x192' },
      { url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' },
    ],
    shortcut: '/favicon.ico',
    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
  },
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0f172a' },
  ],
};
```

### Troubleshooting

- **Not updating?** favicons are aggressively cached — try a hard refresh and clear cache.
- **Looks blurry?** use a simpler shape and verify your source is high-resolution (512×512+ for images).
- **Dark mode mismatch?** ensure both theme-color meta tags are present and your colors have enough contrast.

**Generate your favicon package:**

Markdown view of https://favicongenerator.io/tutorials. Favicon API, MCP server and agent docs: https://favicongenerator.io/developers

---

Modern Favicon Generator

# Generate SVG, PNG, ICO & PWA Icons in Seconds

Create a complete favicon set from text, emoji, images, or SVG. Includes SVG, ICO, Apple Touch, PWA icons, and a 96×96 PNG fallback. Runs locally in your browser with dark mode support.

### Installation

First, use the download button to download the files listed below. Place the files in the root directory of your website.

- favicon.svg
- favicon.ico (contains 16×16 + 32×32)
- favicon-96x96.png (96×96)
- apple-touch-icon.png (180×180)
- icon-192.png
- icon-512.png
- site.webmanifest
- favicon-code.html (optional)

Next, click **Copy HTML** (or copy from the HTML Snippet box above) and paste it into the `<head>` of your HTML.

Need help? Read the [tutorials](https://favicongenerator.io/tutorials) for framework-specific install notes.

## Modern favicon best practices

Modern favicon setup is simple: use SVG as the primary icon, add PNG/ICO fallbacks, and include Apple Touch + PWA icons. This generator outputs the full set in one download.

SVG keeps icons crisp at any size, while PNG/ICO provide compatibility and reliable rendering in search results and legacy contexts. Keep files lightweight and use high-contrast shapes for small sizes.

### Why this setup works

- **Scales cleanly** from 16×16 to 512×512
- **Compatible** with modern browsers and fallbacks
- **Dark mode ready** with light/dark colors
- **Search-result friendly** with a 96×96 PNG
- **Lightweight** assets for fast load

**Browser support (modern browsers)**

| Browser | SVG Support | Dark Mode | Recommended Format |
| --- | --- | --- | --- |
| Chrome / Edge (modern) | ✅ Full | ✅ Yes | SVG + PNG fallback |
| Firefox (modern) | ✅ Full | ✅ Yes | SVG + PNG fallback |
| Safari (recent) | ✅ Good | ⚠️ Limited | SVG + PNG fallback |
| Legacy / embedded | ⚠️ Limited | — | ICO or PNG |

## Recommended favicon file set

This file set works across modern frameworks and static sites. Place it in your root or `/public` folder and use the generated HTML snippet.

### Perfect File Structure

```
/public
  ├── favicon.svg              # Primary icon (modern browsers)
  ├── favicon.ico              # Fallback (IE/Safari/Shopify/Webflow)
  ├── favicon-96x96.png        # Google SERP fallback (96×96)
  ├── apple-touch-icon.png     # 180×180 (iOS standard since iOS 8)
  ├── icon-192.png             # 192×192 (Android/PWA)
  ├── icon-512.png             # 512×512 (PWA splash screens + WordPress Site Icon)
  └── site.webmanifest         # PWA configuration
```

**Essential Favicon Sizes (Priority Order)**

| Size | Purpose | Priority | Notes |
| --- | --- | --- | --- |
| SVG | Modern browsers, scalable, dark mode | High | Keep lightweight |
| 16×16 | Browser tabs, bookmarks | High | Keep lightweight |
| 32×32 | Retina tabs, Windows taskbar | High | Keep lightweight |
| 96×96 | Search results / fallback | Recommended | Keep lightweight |
| 180×180 | Apple touch icon (iOS/iPadOS) | High | Keep lightweight |
| 192×192 | Android home screen, PWA | High | Keep lightweight |
| 512×512 | PWA splash screens + WordPress Site Icon | High | Keep lightweight |

### Platform support guide

Different platforms have slightly different requirements. Use this quick guide to pick the right file and placement.

**Platform-Specific Favicon Requirements**

| Platform | Required Files | Upload Method | Notes |
| --- | --- | --- | --- |
| **WordPress** | icon-512.png | Settings → Site Icon | Upload the 512×512 PNG. WordPress generates the rest. |
| **Webflow** | favicon.ico + icon-512.png | Project Settings → Favicon | Upload ICO for browsers, PNG for dashboard display |
| **Wix** | Any square PNG | Site Settings → Favicon | Wix converts uploads. Use a square PNG for best quality |
| **Shopify** | favicon.ico | Online Store → Themes → Customize | Use favicon.ico for broad compatibility |
| **Squarespace** | Any square PNG | Design → Browser Icon | Upload a square PNG; Squarespace converts |
| **Next.js / React** | All files from ZIP | Drop in /app or /public | Place files in /app or /public. Add the HTML snippet when needed |
| **Static HTML** | All files from ZIP | Copy files + paste HTML snippet | Use the HTML snippet from the download for compatibility |
| **PWA (Progressive Web App)** | icon-192.png + icon-512.png + site.webmanifest | Root directory + manifest link | Include the manifest and both icon sizes |

#### Platform Pro Tips:

- **WordPress:** Upload icon-512.png in Site Icon.
- **Webflow:** Add favicon.ico plus a 256×256 PNG for dashboard previews.
- **Shopify:** Use favicon.ico for best compatibility.
- **Custom HTML:** Paste the snippet and use absolute paths.
- **PWA:** Keep 192×192 and 512×512 icons in the manifest.

### Next.js / React quick setup

For Next.js (App Router), place files in `/app` or `/public` . For Vite/React, place files in `/public` and add the HTML snippet to `index.html` .

#### Next.js Quick Start:

1. Download the ZIP from this Favicon Generator
2. Place files in `/app` or `/public`
3. Add the snippet if your setup does not auto-detect icons

#### Next.js App Router (metadata):

```
import type { Metadata } from 'next';

export const metadata: Metadata = {
  manifest: '/site.webmanifest',
  icons: {
    icon: [
      { url: '/favicon-96x96.png', type: 'image/png', sizes: '96x96' },
      { url: '/icon-192.png', type: 'image/png', sizes: '192x192' },
      { url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' },
    ],
    shortcut: '/favicon.ico',
    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
  },
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0f172a' },
  ],
};
```

#### Vite/React Projects:

1. Place all favicon files in `/public` directory
2. Use absolute paths: `/favicon.svg` not `./favicon.svg`
3. Copy the HTML snippet from this generator into `index.html`

#### PWA Requirements:

Installable PWAs expect both 192×192 and 512×512 icons in the manifest. This generator includes both.

## Dark mode-ready icons

Dark mode is common across browsers and OS themes. Provide light and dark colors so your favicon stays readable in tabs, bookmarks, and search results.

The SVG output can include light/dark styles via CSS media queries, and the HTML snippet sets theme-color for each mode.

### Dark mode tips

- **Use high contrast** at 16×16 and 32×32 sizes.
- **Test both themes** in your browser.
- **Keep shapes simple** for clarity at small sizes.

### AI & CLI Automation

AI tools can help you draft a simple SVG quickly. Generate a clean icon, then paste it into the SVG tab or code editor to produce the full favicon package.

#### AI Prompt Examples (Copy & Use These)

**For Claude Code / AI Agents:**

`"Use the Favicon Generator at [your-url] to create a complete favicon package. I need an SVG with dark mode support, colors #6366f1 (light) and #93c5fd (dark), letter 'A', Inter font, with all PNG sizes for Next.js deployment."`

**For Design Generation:**

`"Create a minimalist SVG icon representing [your concept], suitable for a 32×32 favicon, with bold shapes and high contrast. Output as optimized SVG code."`

**For CLI Automation:**

`npx sharp-cli input.png -o favicon-{size}.png --resize {size}` `curl -X POST https://your-favicon-api.com/generate \ -d '{"text":"A","colors":{"light":"#2563eb","dark":"#93c5fd"}}'`

If you already automate design assets, this generator can be the final packaging step for web-ready favicon files.

## Performance & SEO

Favicons do not directly change rankings, but they improve recognition in tabs, bookmarks, and search results. A clear, consistent icon helps users find your site quickly.

Keep assets lightweight and simple. Small, optimized files load fast and render crisply at tiny sizes.

### Performance checklist

- **Keep files small** so icons load instantly.
- **Use simple shapes** that remain clear at 16×16.
- **Ship only what you need** to avoid extra bytes.

**Tip:** SVG and PNG should be optimized. The generator outputs lightweight files by default.

### Helpful references

If you want to dive deeper, these resources cover favicon and PWA guidance:

- **W3C** - Web standards
- **MDN Web Docs** - Favicon and manifest docs
- **Next.js Docs** - App Router metadata
- **web.dev** - Performance and PWA guidance
- **WHATWG** - HTML specifications
- **Can I Use** - Browser compatibility

## Ready to ship?

Favicon setup should be quick. Use the generator above, download the ZIP, and drop the files into your project. The HTML snippet is ready to paste.

Need guidance for a specific platform? Check the tutorials for step-by-step instructions.

**Ready to create your favicon?** Scroll up and use the generator.

Markdown view of https://favicongenerator.io/. Favicon API, MCP server and agent docs: https://favicongenerator.io/developers