How do I install the Favicon skill?

Run npx skillmds@latest add joelhooks-joelclaw/favicon in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Favicon safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Favicon?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Favicon free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Favicon?

joelhooks (@joelhooks-joelclaw) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Favicon by joelhooks-joelclaw — Agent Skill

Name: Favicon
Rating: 4.2 (5 reviews)
Author: joelhooks

File contents

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

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

---name: favicondescription: 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.--- # 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.

Frequently asked questions

Favicon