Favicon Generator
Generate favicons for your website from any image. All standard sizes: 16×16, 32×32, 64×64, 192×192, 512×512, apple-touch.
What is a favicon?
A favicon (favorite icon) is the small image associated with a website – shown in browser tabs, bookmarks, browser history, mobile home screens (when ‘add to home screen’ is used), and search engine results. Originally invented by Microsoft for IE5 in 1999 (the famous favicon.ico file), favicons have evolved significantly. Modern sites need MULTIPLE favicon sizes: 16×16 (browser tab), 32×32 (retina tab), 180×180 (Apple touch icon for iPhone home screen), 192×192 (Android home screen), 512×512 (PWA app icon). Different platforms use different sizes – skipping any causes blurry or missing icons. This tool generates ALL standard sizes from a single source image plus the HTML code to embed them properly.
How to use this tool
- Upload source image — Square image works best (1:1 aspect ratio). 512×512 or higher source gives sharpest results. PNG with transparency ideal.
- View all generated sizes — 8 sizes generated: 16×16, 32×32, 48×48, 64×64, 96×96, 180×180, 192×192, 512×512. Each shown as preview.
- Download each PNG — Click Download on each size. Save all to your website’s root directory.
- Add HTML to your site — Tool generates <link> tags – paste into your <head> section.
Favicon sizes explained
- 16×16: Classic browser tab favicon (mandatory)
- 32×32: Retina/HiDPI browsers, taskbar shortcuts
- 48×48: Windows site tile small (web shortcuts)
- 96×96: Some Android contexts
- 180×180: Apple Touch Icon (iPhone & iPad home screen)
- 192×192: Android Chrome home screen, PWA splash
- 512×512: PWA manifest, app splash screens, large displays
HTML to include:
<link rel="icon" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" href="/favicon-16x16.png" sizes="16x16"> <link rel="apple-touch-icon" href="/favicon-180x180.png"> <link rel="icon" href="/favicon-192x192.png" sizes="192x192"> <link rel="icon" href="/favicon-512x512.png" sizes="512x512"> <meta name="theme-color" content="#0066ff">
Examples
- Personal blog: Simple logo, all 8 sizes generated, deployed to /favicon.* on website root
- SaaS landing page: Square logo with subtle background, 192px+ versions critical for PWA install
- E-commerce: Simplified logo (avoid text – illegible at 16px), distinct color for tab recognition
- Brand consistency: Match favicon color/style to your overall brand identity
- Mobile-first site: 180px Apple Touch Icon mandatory for iOS users adding to home screen
Tips & best practices
- Use a square source image (1:1) for best results – rectangular images get cropped
- Source minimum 512×512 – downsizing is fine, but upscaling looks pixelated
- Simplify design – text is unreadable at 16×16, logos work better
- High contrast colors – favicon must be visible against light and dark browser themes
- PNG with transparent background works on all browser themes
- Test on actual devices – phone screens vs desktop look different
- Update theme-color meta tag with brand color – colors browser chrome on mobile
- Validate with realfavicongenerator.net for advanced testing across all platforms
Limitations & notes
This tool generates PNG only – doesn’t create the legacy ICO file format. Most modern browsers accept PNG, but very old browsers (pre-2014) need ICO. For ICO support, use desktop tools (GIMP can export ICO). Doesn’t generate the manifest.json file needed for PWA – create that separately. Doesn’t generate maskable icons (special icons that adapt to circular/squared shapes on Android) – use realfavicongenerator.net for those.
Frequently Asked Questions
Do I need all 8 sizes?
Practically yes – different platforms use different sizes. Skipping 180×180 = no Apple Touch Icon (iPhone home screen looks bad). Skipping 192×192 = no Android home screen icon. The 16×16 alone is no longer enough.
What’s the difference between favicon.ico and PNG?
favicon.ico = legacy Windows icon format, supports multiple sizes in one file. PNG = modern format, one size per file. Modern browsers prefer PNGs. ICO needed only for very old browsers (IE9 and below). Use PNG.
Where do I put the favicon files?
Website’s ROOT directory. So URLs become: https://yoursite.com/favicon-16×16.png, etc. Most CMS platforms have a ‘favicon upload’ feature in admin settings. For static sites, place files directly in root folder.
Why isn’t my favicon showing up?
Common causes: (1) Browser caching old favicon – hard refresh (Ctrl+Shift+R). (2) Files not in root directory – check URLs work directly. (3) Incorrect HTML <link> tags. (4) File extension mismatch (file is .png but HTML says .ico). Always test with direct file URL first.
Can I use just one favicon size?
Yes, but browsers will scale it which looks blurry. A 32×32 favicon scaled to 180×180 for iPhone is pixelated. Better to provide multiple sizes – browsers pick the best fit. Modern best practice: provide at least 4-6 sizes.
What about for Progressive Web Apps (PWA)?
PWAs need a manifest.json file referencing icons. Include 192×192 and 512×512 PNGs at minimum. The 512×512 is used as splash screen background. This tool generates the PNGs – create manifest.json separately listing them.
Why does the favicon look different on Mac vs PC?
Browser rendering differences. Safari may apply rounded corners or specific theming. Chrome may render with different anti-aliasing. Test on both, but accept some variation – most users won’t notice.