---
title: Favicon
description: Generate a favicon set from your logo or a monogram and wire it through App Router files.
order: 4
---

# vibe21-web-favicon

Creates the favicon set for the site. Source is your logo, or a monogram from the site name and the primary color.

## When to use it

Use it when the site still has the default Next.js icon, or when you want to replace the current set.

Need Node.js and pnpm. If either is missing, run [vibe21-system-check](/docs/vibe21-system-check) first.

## How to run it

```
/vibe21-web-favicon
```

The agent asks one question at a time:

- your own logo, or a monogram
- the iOS home-screen background (transparent icons become a black square on iOS)
- the app name, short name, and iOS title

If a favicon set already exists, it asks whether to replace it.

## What happens

- Assets land in the App Router files (`app/favicon.ico`, `app/icon0.svg`, `app/icon1.png`, `app/apple-icon.png`) and in `public/` for the web-app icons.
- `app/manifest.json` is written. No manual `<link>` tags.
- The master image and settings stay under `assets/favicon/` and `.vibe21/`.
- `vibe21.json` records the favicon choices. `vibe21.md` is updated.

Then it offers [vibe21-web-preview](/docs/vibe21-web-preview).