Skip to content
Documentation

Favicon & App Icon Generation

FieldValue
TypeSkill Resource
Source~/.copilot/skills/generators/references/favicons.md
DescriptionNot specified

Source Content

Favicon & App Icon Generation

Generate favicons, Apple/Android app icons, and PWA splash screen images from a logo, an emoji, or a text slogan. All outputs are optimized for visibility at small sizes and tested against platform limits.

Favicon Specifications

Standard Sizes

  • 16×16px: Classic favicon size, shown in browser tabs
  • 32×32px: Standard browser favicon, taskbar icons
  • 96×96px: Google TV favicon
  • favicon.ico: Multi-resolution ICO file (contains 16×16 and 32×32)

Best Practices

  • Use simple, recognizable designs that work at small sizes.
  • Ensure good contrast for visibility at 16×16.
  • Test on both light and dark backgrounds.
  • Avoid too much detail — it won’t be visible at small sizes.
  • Transparent PNG backgrounds for favicons work best; solid backgrounds for app icons.

App Icons (PWA/Mobile)

Sizes

  • 180×180px: Apple touch icon (iOS Safari)
  • 192×192px: Android Chrome icon
  • 512×512px: Android Chrome high-res icon, PWA splash screens

Best Practices

  • Use square images with no transparency (or solid background for emoji icons).
  • Avoid text that becomes unreadable at smaller sizes.
  • Design must be recognizable as your brand at 192×192 and 512×512.
  • Consider safe area: iOS rounds corners, Android may apply masks.

Generation Methods

From a Logo Image

Use an existing PNG, JPG, or SVG logo file:

Terminal window
python scripts/generate_favicons.py <source_image> <output_dir> all --validate

Arguments:

  • source_image: Path to your logo (PNG, JPG, JPEG, WebP, or SVG)
  • output_dir: Where to save the generated icons (typically public/ or static/)
  • all (or favicon, app): Generate all icon types, only favicons, or only app icons
  • --validate: Check file sizes, dimensions, and format compliance (required for production)

Output:

  • favicon-16x16.png, favicon-32x32.png, favicon-96x96.png, favicon.ico
  • apple-touch-icon-180x180.png (or apple-touch-icon.png)
  • android-chrome-192x192.png, android-chrome-512x512.png

From an Emoji

Get smart suggestions based on your project, or render a specific emoji:

Get suggestions:

Terminal window
python scripts/generate_favicons.py --suggest "your project description" <output_dir> all --validate

The script will propose 4 emoji options. Reply with the emoji you want to use.

Generate from a specific emoji:

Terminal window
python scripts/generate_favicons.py --emoji "🚀" <output_dir> all --validate --emoji-bg "#ffffff"

Arguments:

  • --emoji: The emoji character (e.g., "🚀", "📦")
  • --emoji-bg: Background color for the emoji (default: white #ffffff); use transparent for transparent background
  • Other arguments same as image mode

From Text (Limited)

While favicons from text are less common (and harder to read at 16×16), the system supports generating app icons from a text slogan. For full social media images with text, see references/og-images.md.

HTML Tags (Favicon)

Once generated, add these tags to your <head>:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="icon" href="/favicon.ico">

Framework Integration

The generator will detect your framework and offer to insert these tags in the right location:

  • Next.js: app/layout.tsx (via Metadata API) or public/favicon.ico
  • Astro: src/layouts/Layout.astro or public/
  • SvelteKit: src/app.html
  • Nuxt: nuxt.config.ts or app.vue
  • Gatsby: gatsby-config.js or public/
  • Plain HTML: <head> of your HTML file

Validation

Run scripts/verify_assets.py <output-dir> after generation to audit the finished set:

Terminal window
python scripts/verify_assets.py public/

Checks:

  • File presence: all expected sizes are present
  • Dimensions: each file matches its declared size (16×16 is exactly 16×16, etc.)
  • Format: PNG and ICO files are valid, properly encoded
  • File sizes: stay within safe limits (favicons <100KB total)
  • Naming conventions: lowercase, no spaces, consistent format

Output example:

✅ favicon-16x16.png (1,200 bytes)
✅ favicon-32x32.png (2,400 bytes)
✅ favicon-96x96.png (6,800 bytes)
✅ favicon.ico (5,000 bytes)
✅ apple-touch-icon-180x180.png (18,000 bytes)
✅ android-chrome-192x192.png (22,000 bytes)
✅ android-chrome-512x512.png (55,000 bytes)

Common Pitfalls

  1. Too much detail at 16×16: Favicons need to be bold, simple shapes. Test zoomed in and out.
  2. Transparent backgrounds on app icons: App icons should have a solid background (white, or a brand color).
  3. Wrong file format: Use PNG for transparency, JPG for photos. Avoid CMYK; use RGB.
  4. Not validating: Always run --validate or verify_assets.py before deploying.
  5. Forgetting the .ico file: Browsers still expect favicon.ico at the root; don’t skip it.
  6. Testing only in one browser: Favicons render differently in Chrome, Firefox, Safari, and Edge. Test all.

Troubleshooting

“Image too large”: Resize your source image to at least 512×512 before running the generator.

“Emoji didn’t render”: If emoji rendering fails, install optional dependency: pip install pilmoji.

“FileNotFoundError: font”: The system tried to fall back to a default font. Install DejaVu fonts: brew install dejavu-fonts (macOS) or apt-get install fonts-dejavu (Linux).

“Contrast too low” (WCAG validation): If you’re using emoji or text, ensure the emoji/text color contrasts against the background at ≥ 4.5:1. Provide a higher-contrast emoji or use a different background color with --emoji-bg.