ICO/Favicon Generation Guide: Website Icons and PWA Icons

Why Do You Need a Favicon?

A favicon is the small icon displayed in browser tabs, bookmark bars, and phone home screens. A professional website must have one — otherwise:

The browser tab shows a default blank icon, reducing brand recognition
Users can't quickly find your site in bookmarks
PWA installations lack an app icon

Favicon Size Specifications

Different platforms and contexts require different sizes:

Size	Purpose	Format
16×16	Browser tab (smallest)	ICO/PNG
32×32	Browser tab (standard)	ICO/PNG
48×48	Windows taskbar	ICO
180×180	Apple Touch Icon (iOS)	PNG
192×192	Android Chrome	PNG
512×512	PWA launch icon	PNG

About the ICO Format

ICO is a container format — a single ICO file can contain multiple icon sizes. The browser automatically picks the most appropriate size. That's why an ICO file is only a few dozen KB yet works across all scenarios.

Using the ICO Generation Tool

Step 1: Prepare Source Image

Choose a high-resolution square image as the source. Recommendations:

At least 512×512 (1024×1024 preferred)
Simple graphic that remains recognizable when tiny
Avoid small text — unreadable at 16×16

Step 2: Upload and Generate

Open ICO Generator
Upload the source image (PNG, JPG, SVG supported)
Select needed sizes (default: all — 16, 32, 48, 180, 192, 512)
Click "Generate"

Step 3: Download Files

The tool produces two outputs:

favicon.ico — multi-size ICO containing 16×16, 32×32, 48×48
favicon-*.png — individual PNG files for each size

Referencing Favicon in HTML

Place the files in your site root or public/ folder, then add to <head>:

<!-- ICO (legacy browser support) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG (modern browsers) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

Framework Configuration

Framework	How to Configure
Next.js	Place in `app/` directory, auto-detected
Vite	Place in `public/` directory
Nuxt	Place in `public/` or `assets/`
Create React App	Place in `public/` directory

PWA Icon Configuration

PWA requires icon declarations in manifest.json:

{
  "name": "My App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Maskable Icon Notes

PWA maskable icons must have full content within the safe zone (inner 80%). The outer 20% may be cropped by the OS into a circle or other shape.

Design Tips

Tip 1: Simplify the Graphic

A favicon is only 16×16 pixels — complex designs become a blurry mess. Keep only the core element:

❌ Full logo + text
✅ Core graphic or first letter

Tip 2: Use SVG as Source

SVG vector source images stay sharp at any size. Convert SVG to PNG with Format Convert before generating ICO.

Tip 3: Dark Mode Support

Modern browsers support the media attribute for dark mode favicons:

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Common Issues

Generated ICO doesn't show in browser?

Verify the file path is correct
Clear browser cache (Ctrl+Shift+R to force refresh)
Check that link tags are inside <head>

ICO file is larger than a single PNG?

ICO contains multiple sizes, so it's naturally bigger. A typical 16+32+48 ICO is about 15-30 KB — perfectly acceptable.

Do I need both ICO and PNG?

Yes, provide both. ICO supports legacy browsers; PNG offers better rendering quality in modern browsers.

ICO Generator — One-click multi-size ICO + PNG
Image Resize — Adjust source image to target size
Format Convert — SVG to PNG and other format conversions

Summary

Favicons may be small, but they're a crucial part of website branding. The ICO Generator lets you quickly produce a full set of ICO and PNG files from a single source image, covering browser tabs, Apple Touch Icons, Android Chrome, and PWA launch icons. Remember: high-res simple source, multi-size ICO, and complete HTML references.