# favicon

Creates favicon files from one source image, then updates the web manifest and project HTML. Use it when adding or replacing site icons.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2800 installs · ★ 379
- Author: brianlovin
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/brianlovin/agent-config/tree/HEAD/skills/favicon/SKILL.md
- Updated: 2026-03-25
- HTML: https://affpapa.org/en/nevibecode/skills/favicon

## What it does

The skill validates a PNG, JPG, JPEG, SVG, WEBP, or GIF source, then produces `favicon.ico`, PNG icons, and `site.webmanifest`. When the source is SVG, it also places a copy at `favicon.svg`.

It identifies the project from configuration files and selects a static-assets folder. Supported checks include Rails, Next.js, Gatsby, SvelteKit, Astro, Vite, Angular, and plain HTML. Existing icon files take precedence over framework detection, and an unclear folder layout prompts the user for confirmation.

ImageMagick v7+ with the `magick` command is required; the skill stops until it is installed. It derives the app name from an existing manifest, `package.json`, Rails configuration, or the current directory, preserves existing manifest appearance settings, and updates icon references in HTML or a layout file.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill favicon -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/favicon/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/favicon/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill favicon -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/favicon/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill favicon -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/favicon/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install brianlovin/agent-config favicon
```

2. **Manually: put the files in place**
- File: `.github/skills/favicon/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill favicon -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/brianlovin/agent-config --path skills/favicon
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/favicon/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill favicon -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/brianlovin/agent-config/tree/HEAD/skills/favicon/SKILL.md

## When to use it
- generate a multi-resolution `favicon.ico` file
- create browser and mobile PNG icon files
- update `site.webmanifest` with app details and icons
- replace favicon links in project HTML
- locate the appropriate static-assets directory

## Example prompts
- Generate favicons from `<path to source image>` and update this project's HTML.
- Create `site.webmanifest` and the icon set from `<path to source image>`.
- Check the static-assets folder and replace the current favicons using `<path to source image>`.

## Similar
- [favicon-gen](https://affpapa.org/en/nevibecode/skills/favicon-gen.md) — skill · 2200 installs
- [favicon-generator](https://affpapa.org/en/nevibecode/skills/favicon-generator.md) — skill · 1100 installs
- [web-asset-generator](https://affpapa.org/en/nevibecode/skills/web-asset-generator.md) — skill · 933 installs
- [image-optimization](https://affpapa.org/en/nevibecode/skills/aj-geddes-image-optimization.md) — skill · 656 installs
- [image-manipulation-image-magick](https://affpapa.org/en/nevibecode/skills/image-manipulation-image-magick.md) — skill · 9723 installs
- [app-icon](https://affpapa.org/en/nevibecode/skills/app-icon.md) — skill · 2100 installs

From the same set: [brianlovin/agent-config](https://affpapa.org/en/nevibecode/by/brianlovin/agent-config.md) — 15 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md