OpenSkillIndex← back to search
claude-code

Joelclaw favicon

Generate emoji-based favicons, Apple touch icons, and OG images using emojico. Use when adding or updating favicons for any project. Never use a default emoji — always ask Joel which emoji to use.

install
source · Clone the upstream repo
git clone https://github.com/joelhooks/joelclaw
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/joelhooks/joelclaw "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/favicon" ~/.claude/skills/joelhooks-joelclaw-favicon && rm -rf "$T"
manifest: skills/favicon/SKILL.md
source content

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.