Favicon

Name: Favicon
Author: joelhooks

ASecurity

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.

64 stars
0 votes
0 copies
4 views
Added May 28, 2026

toolsbashnextjs

Security analysis

A96/100

mediumInstalls packages at runtime which could introduce malicious dependencies

Pro shows the line behind each finding and how to fix it

Scanned September 20, 2026

npx -y skills add joelhooks/joelclaw --skill favicon --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Favicon?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/joelhooks-favicon/badge)](https://www.skillsdirectory.com/skills/joelhooks-favicon)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
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. Use the supplied or established project emoji; ask only when that choice is missing.
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. 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.