How to Create Perfect Favicons for Websites

A favicon is the small icon that appears in your browser tab, bookmarks bar, and on the home screen when someone saves your site to their device. Though tiny, it is one of the most visible brand touchpoints your website has — users see it constantly while browsing.

🖼️

Favicon Generator

Upload any image and generate all favicon sizes — browser tabs, Apple touch icon, PWA icons — as a ready-to-use ZIP.

Try it free →

Why You Need More Than One Favicon Size

Modern browsers and devices each have their own icon requirements. A single 16x16 ICO file is no longer sufficient. Apple devices need a 180x180 touch icon for the home screen. Android and PWA installations need 192x192 and 512x512 PNG files. Windows uses 48x48 for taskbar shortcuts. Covering all these means generating at least seven distinct files from your logo.

The Complete Favicon Size Guide

16x16px — Classic browser tab icon (low-DPI displays)
32x32px — Standard browser tab (most modern displays)
48x48px — Windows site shortcut
96x96px — Google TV and high-DPI shortcuts
180x180px — Apple touch icon (iOS home screen)
192x192px — Android home screen and PWA manifest
512x512px — PWA splash screens and app store previews

Best Favicon Formats: PNG vs ICO vs SVG

Modern browsers support PNG favicons directly — you no longer need ICO format. PNG is recommended for all modern use cases. SVG favicons are gaining support (Chrome, Firefox, Edge) and scale perfectly at any size; Safari still requires a PNG fallback. ICO format is only needed for IE11 and older browser support.

Branding Tips for Favicons

At 16px, complexity disappears entirely. Use your logo mark — not your full wordmark — and test it on both dark and light browser themes. A transparent background lets the icon adapt naturally; a solid background gives more control but can look jarring in dark-mode browsers. Keep the design bold with strong contrast.

Test your favicon in both light and dark browser themes before shipping. Chrome's dark mode makes transparent-background icons with light elements invisible.

PWA Icons and Web App Manifest

If your site is a Progressive Web App, your site.webmanifest must reference icon paths. Add the 192x192 and 512x512 icons with purpose: 'any maskable' for adaptive icon support on Android. The maskable purpose means the launcher can apply a shape mask without clipping important content — keep your logo within the inner 80% of the canvas.

📦

Website Asset Pack Generator

Generate your complete website asset pack — favicons, PWA icons, OG images, manifest JSON, and HTML snippets — all from your logo.

Try it free →

Frequently Asked Questions

Do I need a separate favicon for dark mode?

You can use the prefers-color-scheme media query inside an SVG favicon to switch between light/dark variants. PNG favicons don't support this natively, but a transparent-background PNG with a mid-tone icon usually works on both themes.

Why does my favicon not update after changing it?

Browsers cache favicons aggressively. Hard-refresh (Ctrl+Shift+R / Cmd+Shift+R) or open an incognito window to see the updated icon. In production, add a cache-busting query string: href='/favicon.png?v=2'.

Can I use my full logo as a favicon?

Only if it reads clearly at 16px. Most wordmark logos become illegible at small sizes. Use your logo mark or icon-only version instead. If your brand doesn't have one, create a simple lettermark from your brand's initials.

What is the difference between a favicon and an Apple touch icon?

The favicon (16-48px) appears in browser tabs and bookmarks. The Apple touch icon (180x180) is used when a user saves your site to their iOS home screen — it is displayed as an app icon. Both are needed for a complete setup.

🖼️ How to Create Perfect Favicons for Websites