---
name: favicon
description: "Generate favicons and app icons for Next.js projects. Creates all required sizes, formats, and configures metadata."
allowed-tools: Read, Glob, Grep, Write, Edit, Bash, WebFetch
---
# Favicon Generator
Generate complete favicon sets for Next.js projects.
## Workflow
### Step 1: Auto-Detect App Information
**IMPORTANT:** Before asking the user anything, scan the codebase to extract:
```bash
# Check these files in order:
```
#### 1. Package.json
```typescript
// Read package.json for name and description
{
"name": "my-app", // App name
"description": "..." // App description
}
```
#### 2. Next.js Metadata (app/layout.tsx)
```typescript
// Look for metadata export
export const metadata: Metadata = {
title: "App Title", // App name
description: "...", // App description
};
// Or metadataBase, applicationName
```
#### 3. README.md
```markdown
# App Name <- Extract from H1
Description paragraph <- Extract first paragraph
```
#### 4. Tailwind Config (tailwind.config.ts)
```typescript
// Look for custom colors in theme.extend.colors
theme: {
extend: {
colors: {
primary: "#6366f1", // Brand color
brand: { ... }
}
}
}
```
#### 5. CSS Variables (app/globals.css)
```css
:root {
--primary: #6366f1; /* Brand color */
--brand-color: ...;
}
```
#### 6. Existing Favicon/Icons
```bash
# Check if icons already exist
public/favicon.ico
public/apple-touch-icon.png
app/icon.tsx
app/icon.png
```
### Step 2: Present Findings & Confirm
After scanning, present what was found:
```
I found the following from your codebase:
App name: Striggo
Description: A study platform for professional certification exams
Brand color: #8b5cf6 (from Tailwind config)
Existing icons: None found
Should I generate a favicon based on this? Or would you like to customize?
```
Only ask questions if:
- App name is missing or unclear
- No brand colors found (suggest based on app type)
- User wants to override detected values
### Step 3: Choose Generation Method
Based on user input, choose one of these approaches:
---
## Option A: Generate from Description (No Source Image)
### A1: Text/Initial-Based Icon
Best for: Professional SaaS apps, clean minimal branding.
```typescript
// app/icon.tsx
import { ImageResponse } from "next/og";
export const runtime = "edge";
export const contentType = "image/png";
export const size = { width: 32, height: 32 };
export default function Icon() {
return new ImageResponse(
(