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

npm install -g emojico

Verify: emojico --help

Usage

# 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:

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:

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.