Png2ico

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:

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

If anything is missing:

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:

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

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:

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

# 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
• Source: owenmorgan/claude-skills
• License: MIT

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