# Favicon
> Generate favicons and app icons for Next.js projects. Creates all required sizes, formats, and configures metadata.
- Skill: `andrehfp/favicon` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add andrehfp/favicon`
- Raw SKILL.md: https://api.skillmd.com/api/skills/andrehfp/favicon/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: andrehfp (https://skillmd.com/u/andrehfp)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/andrehfp/favicon
---
# 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(
(
{/* First letter or initials of app name */}
S
),
{ ...size }
);
}
```
Create matching `apple-icon.tsx`:
```typescript
// app/apple-icon.tsx
import { ImageResponse } from "next/og";
export const runtime = "edge";
export const contentType = "image/png";
export const size = { width: 180, height: 180 };
export default function AppleIcon() {
return new ImageResponse(
(
S
),
{ ...size }
);
}
```
### A2: Emoji-Based Icon
Best for: Fun apps, MVPs, quick prototypes.
```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(
(
{/* Choose emoji that represents the app */}
🚀
),
{ ...size }
);
}
```
### A3: SVG Icon (Scalable, Dark Mode Support)
Best for: Technical apps, developer tools.
```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(
(
{/* Simple geometric shape or symbol */}