How to Create a Favicon: A Complete Guide for Web Developers and Designers
A favicon is the small icon that appears in browser tabs, bookmarks, and — depending on the browser — the address bar. Despite being tiny (typically 16×16 or 32×32 pixels), a favicon has a real impact on professionalism, brand recognition, and user experience. Getting one right involves more than just shrinking a logo.
What Exactly Is a Favicon?
Favicon stands for "favorites icon," a name that dates back to Internet Explorer's bookmarking system. Today it's a standard part of how browsers identify websites visually. When someone has 10 tabs open, your favicon is often the only thing identifying your site at a glance.
Modern browsers support multiple favicon formats and sizes, including:
- ICO — the original format, widely supported across all browsers and Windows systems
- PNG — clean, transparent-friendly, and the preferred format in most modern implementations
- SVG — scalable vector format supported by newer browsers; remains sharp at any size
- WebP — newer format with good compression, though browser support is still inconsistent for favicons specifically
For maximum compatibility, most developers provide at least an ICO file for legacy browsers and a PNG or SVG for modern ones.
Step-by-Step: How to Create a Favicon
1. Start With the Right Source Image
Your favicon needs to look recognizable at very small sizes. A detailed illustration or full logo with text often becomes unreadable when compressed to 16×16 pixels. A clean, bold symbol or monogram works better than a full wordmark.
Best practices for your source image:
- Use a square aspect ratio (1:1) from the start
- Work at a minimum of 512×512 pixels — this gives you room to scale down cleanly
- Prefer SVG or high-resolution PNG as your working file
- Keep the design simple: solid shapes, limited colors, no fine detail
2. Choose Your Creation Method 🎨
There are three main paths:
Option A: Online Favicon Generators Tools like Favicon.io, RealFaviconGenerator, and Favicon Generator let you upload an image or enter text and export a full favicon package. Most generate the full set of sizes and formats automatically, including the site.webmanifest file for PWA support.
Option B: Image Editing Software Photoshop, GIMP, Figma, and Sketch all allow you to export PNG files at custom sizes. GIMP also supports direct ICO export. This approach gives you precise control over how the image renders at each size — useful if your logo needs manual touchups to stay readable at 16px.
Option C: Code-Based SVG Favicons If your design is simple and geometric, writing an SVG directly gives you a favicon that scales perfectly. SVG favicons are increasingly supported, but you'll still want PNG fallbacks for broader compatibility.
3. Export the Right Sizes
Different contexts call for different favicon dimensions:
| Size | Use Case |
|---|---|
| 16×16 px | Browser tab (default) |
| 32×32 px | Browser tab (high-DPI / taskbar) |
| 48×48 px | Windows site shortcuts |
| 180×180 px | Apple Touch Icon (iOS home screen) |
| 192×192 px | Android home screen (PWA) |
| 512×512 px | PWA splash screen |
If you're only building a simple website and don't need PWA support, a 16×16 and 32×32 PNG plus an ICO file covers most scenarios.
4. Add the Favicon to Your Website
Once you have your files, place them in your site's root directory and reference them in your HTML <head> section: