# Png2ico

> >

- **Type:** Skill
- **Install:** `agentstack add skill-owenmorgan-claude-skills-png2ico`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [owenmorgan](https://agentstack.voostack.com/s/owenmorgan)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [owenmorgan](https://github.com/owenmorgan)
- **Source:** https://github.com/owenmorgan/claude-skills/tree/main/skills/png2ico

## Install

```sh
agentstack add skill-owenmorgan-claude-skills-png2ico
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# png2ico — Favicon & Icon Set Generator

Generate `favicon.ico` and a complete icon set from a source PNG. Optimised for Next.js App Router but works for any web project.

## Generated files

| File | Size(s) | Purpose |
|------|---------|---------|
| `favicon.ico` | 16/32/48 | Browser tab icon (multi-size ICO) |
| `icon.png` | 32x32 | Browser fallback icon |
| `apple-icon.png` | 180x180 | iOS home screen |
| `icon-192x192.png` | 192x192 | Android home screen / PWA |
| `icon-512x512.png` | 512x512 | PWA splash / install dialog |

## Setup check

Before first use, verify dependencies are installed:

```bash
python3 -c "from PIL import Image; print('ok')" && (magick --version || convert --version)
```

If anything is missing:
```bash
pip install Pillow && brew install imagemagick
```

## Script location

The conversion script is at `${CLAUDE_SKILL_DIR}/scripts/png2ico.py`.

## Workflow

### 1. Detect project context

Check if the current working directory is a Next.js App Router project:

```bash
ls package.json next.config.* app/layout.* 2>/dev/null
```

If `app/layout.tsx` (or `.jsx`, `.ts`, `.js`) exists, this is a **Next.js App Router project**. Set `IS_NEXTJS=true` for later steps.

### 2. Find or confirm the source image

- If the user provided an image path, use it directly.
- If no image was provided AND `IS_NEXTJS=true`:
  - Look for an existing logo or icon in the project: `Glob` for `**/*.png`, `**/*.svg` in common locations (`public/`, `app/`, `assets/`, `src/`).
  - Look for the largest square-ish PNG that could be a logo. Exclude screenshots, photos, and tiny images.
  - If a candidate is found, confirm with the user: "I found `public/logo.png` (512x512) — shall I use this as the source for your icons?"
  - If no candidate is found, ask the user to provide a source image.
- If no image was provided AND `IS_NEXTJS=false`, ask the user to provide a source image.

Ideal source: square PNG, 512x512 or larger.

### 3. Generate the icon set

```bash
python3 "${CLAUDE_SKILL_DIR}/scripts/png2ico.py"  -o 
```

**Output directory:**
- If `IS_NEXTJS=true`: generate to a temporary directory first (so we can place files in the right locations in step 4).
- Otherwise: output to the current directory or user-specified location.

### 4. Next.js integration (only if IS_NEXTJS=true)

**Ask the user:** "This is a Next.js project. Would you like me to configure these icons in your app? This will:
- Replace the default Vercel `favicon.ico` in `app/`
- Add `apple-icon.png` and `icon.png` to `app/`
- Add PWA icons (`icon-192x192.png`, `icon-512x512.png`) to `public/`
- Create or update `app/manifest.ts` with the PWA icon references

Shall I proceed?"

If the user agrees:

#### 4a. Place icon files

- Copy `favicon.ico`, `icon.png`, and `apple-icon.png` into the `app/` directory (overwriting the default Vercel `favicon.ico` if present).
- Copy `icon-192x192.png` and `icon-512x512.png` into `public/`.

#### 4b. Create or update manifest

Check if `app/manifest.ts` or `app/manifest.json` already exists.

**If no manifest exists**, create `app/manifest.ts`:

```typescript
import type { MetadataRoute } from 'next'

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: '',
    short_name: '',
    description: '',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#000000',
    icons: [
      {
        src: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: '/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
  }
}
```

**If a manifest already exists**, update just the `icons` array to include the two PWA icon entries. Preserve all other existing fields.

#### 4c. Verify layout metadata

Read `app/layout.tsx` (or equivalent). Next.js auto-generates `` tags from file-based icons, so typically no code changes are needed. But check:

- If the layout has a `metadata` export with an `icons` property that hardcodes icon paths, update those paths to match the new filenames.
- If there is no explicit `icons` metadata, leave it alone — Next.js file-based metadata will handle it automatically.

### 5. Report the result

Show a summary of all generated/placed files with sizes. If Next.js integration was performed, note which files were placed where and any manifest changes made.

## Options

| Flag | Description | Default |
|------|-------------|---------|
| `-o, --output` | Output directory | Current directory |
| `--only` | Generate only specific files | All files |
| `--no-ico` | Skip favicon.ico (PNGs only) | Generate all |

## Examples

```bash
# Generate all icons in current directory
python3 "${CLAUDE_SKILL_DIR}/scripts/png2ico.py" logo.png

# Output to Next.js app/ directory
python3 "${CLAUDE_SKILL_DIR}/scripts/png2ico.py" logo.png -o app/

# Just the favicon
python3 "${CLAUDE_SKILL_DIR}/scripts/png2ico.py" logo.png --only favicon.ico

# Just the Apple Touch Icon
python3 "${CLAUDE_SKILL_DIR}/scripts/png2ico.py" logo.png --only apple-icon.png

# Skip ICO, PNGs only
python3 "${CLAUDE_SKILL_DIR}/scripts/png2ico.py" logo.png --no-ico
```

## Troubleshooting

- **ICO looks blurry** — source image is too small. Use a 512x512 or larger square PNG.
- **Icons are stretched** — source image is not square. Crop to a 1:1 aspect ratio first.
- **ImageMagick not found** — install with `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux). Pillow fallback will be used but ImageMagick produces better ICO files.
- **Manifest not created** — only generated during Next.js integration (step 4). For non-Next.js projects, create the manifest manually.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [owenmorgan](https://github.com/owenmorgan)
- **Source:** [owenmorgan/claude-skills](https://github.com/owenmorgan/claude-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-owenmorgan-claude-skills-png2ico
- Seller: https://agentstack.voostack.com/s/owenmorgan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.