🌐 Web Design Guide

How to Create a Favicon for Your Website (All Sizes)

📅 2026⏱ 4 min read✍️ Mian Hassam

A favicon is the small icon that appears in browser tabs, bookmarks, and home screens. Getting it right means providing multiple sizes for different contexts — from the 16×16 tab icon to the 512×512 PWA splash screen icon.

Why You Need Multiple Favicon Sizes

16×16 — Browser tab (classic favicon)
32×32 — Windows taskbar, browser shortcuts
48×48 — Windows desktop shortcut
180×180 — Apple Touch Icon (iOS home screen)
192×192 — Android home screen (PWA)
512×512 — PWA splash screen

Step 1 — Start With a Square Image

Your favicon source should be a square image, at least 512×512 pixels. PNG works best — it supports transparency and is lossless. An SVG is even better as it scales perfectly to any size.

Step 2 — Generate All Sizes

Instead of manually resizing, use the MultiMian ImageKit Favicon Generator. Upload your square image and it instantly generates all 8 sizes as a ZIP file:

🌐 Generate Favicons Free →

The ZIP also includes an HTML snippet and a manifest.json icons entry ready to paste into your project.

Step 3 — Add to Your HTML

Place these tags inside your <head>:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Step 4 — Update Your manifest.json

For PWA support, add the icons to your manifest.json:

"icons": [
  { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]

Tips for a Good Favicon

Keep it simple — complex logos become unreadable at 16×16
Use a single letter, icon, or simple symbol for small sizes
Test against both light and dark browser themes
Use SVG as the primary icon for perfect scaling at any size