tulqr
🖼️IMAGE

Favicon Generator

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

📁
Drop image here or click to upload
PNG, JPG, SVG, WebP — square images work best
INCLUDED IN ZIP
16×16Browser tab (classic)
32×32Browser tab (HD)
48×48Windows site icon
96×96Google TV / shortcuts
180×180Apple touch icon
192×192Android / PWA icon
512×512PWA splash / store
HTML<head> snippet
JSONmanifest icons snippet

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. Though tiny, it's one of the most visible brand touchpoints your website has — users see it constantly while browsing.

Modern browsers and devices require multiple favicon sizes. A single 16×16 ICO file isn't enough anymore — Apple devices need 180×180 touch icons, Android and PWA installations need 192×192 and 512×512 PNG files, and Windows needs 48×48 for shortcuts.

The Complete Favicon Size Guide

Use this checklist: 16×16 and 32×32 for browser tabs, 48×96 for Google/Windows shortcuts, 180×180 for Apple touch icons (required for iOS home screen), 192×192 for Android home screen and PWA manifest, and 512×512 for PWA splash screens and app store previews.

Branding Tips for Favicons

At 16px, complexity disappears. 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 to any browser theme; a white or solid background gives more control but can look jarring in dark-mode browsers.

PWA Icons and Web App Manifest

If your site is a Progressive Web App, your site.webmanifest must reference icon paths. The generated ZIP includes a manifest snippet with the correct JSON structure. Add the 192×192 icon with purpose: "any maskable" for adaptive icon support on Android.

Frequently Asked Questions

What format should a favicon be?
Modern browsers support PNG favicons directly — you don't need ICO format anymore. PNG is recommended for all modern use cases. ICO format is only needed for very old browser support (pre-2015).
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, cache-busting query strings on the link tag help: href="/favicon.png?v=2".
Do I need a separate favicon for dark mode?
You can use the prefers-color-scheme media query in SVG favicons to switch between light/dark variants. PNG favicons don't support this, but a transparent-background PNG with a mid-tone icon usually works acceptably on both themes.
What's the difference between a favicon and an Apple touch icon?
The favicon (16–48px) appears in browser tabs and bookmarks. The Apple touch icon (180×180) is used when a user saves your site to their iOS home screen — it's displayed as an app icon. Both are needed for a complete setup.
Can I use an SVG as a favicon?
Yes — modern Chrome, Firefox, and Edge support SVG favicons via <link rel="icon" type="image/svg+xml">. However, Safari doesn't support SVG favicons, so always include PNG fallbacks.