| name | favicon |
| displayName | Favicon Generator |
| description | 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. |
| version | 0.1.0 |
| author | joel |
| tags | ["favicon","seo","branding","emojico"] |
| disable-model-invocation | true |
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
emojico 🧙 --out ./public --all
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. Always ask Joel to pick the emoji 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.
