Favicon

Name: Favicon
Author: joelhooks

joelhooks/joelclaw

31 installs
61 repo stars
Updated August 4, 2026
joelhooks/joelclaw

Generate a full favicon set, Apple touch icons, and OG image from an emoji using emojico, and wire them into Next.js or TanStack Start.

About

Uses the emojico CLI to produce complete favicon and icon sets from an emoji and adds the framework metadata. A developer uses it when adding or updating a project's site icon.

emojico <emoji> --out ./public --all generates ico, PNGs, touch icons, and OG image
Wiring snippets for Next.js App Router and TanStack Start head config

Favicon by the numbers

31 all-time installs (skills.sh)
Ranked #1,321 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/joelhooks/joelclaw --skill favicon

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/joelhooks/joelclaw/favicon.svg)](https://skillselion.com/skills/joelhooks/joelclaw/favicon)

Installs	31
repo stars	★ 61
Last updated	August 4, 2026
Repository	joelhooks/joelclaw ↗

What it does

Generate a full favicon set, Apple touch icons, and OG image from an emoji using emojico, and wire them into Next.js or TanStack Start.

Files

SKILL.mdMarkdownGitHub ↗

Favicon Generation with emojico

Generate complete favicon sets from emoji. Never pick a default emoji — always ask Joel which emoji to use for the project.

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. Always ask Joel to pick the emoji 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.