# Favicon

> Generate emoji-based favicons, Apple touch icons, and OG images using emojico. Use when adding or updating favicons for any project. Use the supplied or established project emoji; ask only when that choice is missing.

- Skill: `joelhooks-joelclaw/favicon` (Agent Skill)
- Install (CLI): `npx skillmds@latest add joelhooks-joelclaw/favicon`
- Raw SKILL.md: https://api.skillmd.com/api/skills/joelhooks-joelclaw/favicon/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: joelhooks (https://skillmd.com/u/joelhooks-joelclaw)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/joelhooks-joelclaw/favicon

---


# Favicon Generation with emojico

Generate complete favicon sets from emoji. Use the supplied or established project emoji. Ask only when the project has no clear choice.

## When to Use

Triggers: `favicon`, `add favicon`, `update favicon`, `site icon`, `emojico`, `touch icon`, or any request to add/change a site's icon.

## Install

```bash
npm install -g emojico
```

Verify: `emojico --help`

## Usage

```bash
# Generate full set into project's public/ dir
emojico 🧙 --out ./public --all

# Generates:
# public/favicon.ico
# public/favicons/favicon-16x16.png
# public/favicons/favicon-32x32.png
# public/favicons/favicon-48x48.png
# public/apple-touch-icon/apple-touch-icon-{57,60,72,76,114,120,144,152,180}x{...}.png
# public/og-image.png
```

## Wiring Into Frameworks

### Next.js (App Router)

`favicon.ico` in `public/` is auto-served. Add metadata in `layout.tsx`:

```ts
export const metadata: Metadata = {
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon/apple-touch-icon-180x180.png',
  },
}
```

### TanStack Start

Add to `__root.tsx` head config:

```ts
links: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon/apple-touch-icon-180x180.png' },
]
```

## Rules

1. **NEVER use a default emoji.** Use the supplied or established emoji; ask only when the choice is missing and material for the project.
2. **Always use `--all`** to generate the complete set (ico + png + apple + og).
3. **Output to `public/`** in the target app directory.
4. **Wire head tags** after generating — emojico generates files but doesn't modify source.
5. **Prefer dynamic OG images** over the static `og-image.png` for sites with multiple pages — use the emojico OG as a fallback only.