Favicon Generator (ICO/PNG)
Create website favicons instantly with our Favicon Generator. Upload any image to generate favicons in multiple formats and sizes—16×16 PNG, 32×32 PNG, and combined ICO file. Perfect for web developers, designers, or anyone building a website who needs properly formatted favicon files. The tool automatically resizes and optimizes your image for each size, ensuring crisp display across all browsers and devices. Download all formats at once or individually as needed. All processing happens locally in your browser using HTML5 canvas—no uploads, complete privacy. Supports JPG, PNG, and most common image formats as input. Ideal for new websites, rebranding projects, or updating outdated favicons. Fast, free, and produces professional-quality results ready for immediate use in your website's root directory or HTML head.
How it works: Upload an image, then export favicon PNG files in several small sizes. For best results, start with a square image that has a simple, recognizable design.
What Is a Favicon Generator?
A favicon generator converts an image into the small icon files used across browsers, devices, and platforms. Favicons appear in browser tabs, bookmarks, browser history, Google search results, Progressive Web App (PWA) installations, Apple home screen shortcuts, and Android Chrome shortcuts. Without a proper favicon, browsers display a default generic icon — a missed branding opportunity.
Modern favicon implementation requires multiple image sizes and formats: a classic 16×16 or 32×32 ICO file for browser tabs, larger PNGs for Retina/HiDPI displays, a 180×180 PNG for Apple touch icons, and 192×192 or 512×512 PNGs for Android PWA manifests. This tool generates all the required sizes from a single uploaded image.
How to Use This Favicon Generator
- Upload your source image (PNG, JPG, or SVG). Square images (1:1 ratio) work best; non-square images will be cropped or padded.
- The generator creates all required sizes automatically: 16×16, 32×32, 48×48, 180×180, 192×192, and 512×512.
- Download the zip package containing all favicon files.
- Place the files in your website's root directory (or a /favicon/ subfolder).
- Add the HTML link tags shown below to your page's
<head>section.
Worked Example: Favicon HTML Implementation
Add these tags inside your <head> element:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <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="/site.webmanifest"> <meta name="theme-color" content="#ffffff">
The site.webmanifest file references the 192×192 and 512×512 icons for PWA installation. The theme-color meta tag sets the browser chrome color on mobile.
Favicon Size and Format Guide
| Size | Format | Used By | Priority |
|---|---|---|---|
| 16×16 | ICO / PNG | Browser tabs, bookmarks bar | Required |
| 32×32 | ICO / PNG | Retina tabs, Windows taskbar | Required |
| 48×48 | ICO | Windows site icons | Recommended |
| 180×180 | PNG | Apple touch icon (iOS/Safari) | Required for iOS |
| 192×192 | PNG | Android Chrome PWA install icon | Required for PWA |
| 512×512 | PNG | PWA splash screen, Google search | Required for PWA |
| Any size | SVG | Modern browsers (CSS scaling) | Optional but future-proof |
A multi-size .ICO file can contain 16×16, 32×32, and 48×48 images in one file, which is the most compatible single-file approach for traditional browsers.
Key Concepts: ICO vs. PNG vs. SVG Favicons
ICO format is the original favicon format, supported by every browser since IE5. A single ICO file can embed multiple resolutions (16, 32, 48px), letting the browser pick the best size. ICO is required for maximum compatibility — particularly for older browsers and Windows taskbar icons. However, ICO does not support sizes above 256×256.
PNG favicons are supported by all modern browsers and are preferred for high-resolution (Retina) displays, where a 32×32 PNG renders crisply on a 64×64 physical pixel screen. PNG supports full alpha transparency, which ICO technically supports but with less consistent browser rendering. Most modern favicon implementations use ICO for 16/32px and PNG for larger sizes.
SVG favicons are supported by Chrome, Firefox, and Edge (not Safari as of 2024). An SVG favicon scales perfectly to any size and can even include media queries for dark mode. Using SVG plus ICO fallback is increasingly popular: <link rel="icon" href="/favicon.svg" type="image/svg+xml"> followed by ICO fallback. For maximum browser support today, continue generating PNG and ICO files.
Tips for a Great Favicon
Start with a square image at least 512×512 pixels. Higher resolution source images produce crisper downscaled versions. Vector formats (SVG, AI) are ideal since they scale without quality loss. Rasterize your SVG at 512×512 or 1024×1024 before uploading if you experience color or rendering issues.
Keep it recognizable at 16×16. At the smallest size, only the simplest shapes are legible. Avoid text, thin lines, or complex details — they become unreadable. Use a bold initial letter, a simplified logo mark, or a distinctive shape. Test your favicon by looking at the browser tab at actual size before publishing.
Clear browser cache after updating. Browsers aggressively cache favicons, sometimes for days or weeks. After updating your favicon, force a refresh with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac), or open an incognito window. For site visitors, the old favicon may persist until their cache expires. Adding a version query string to favicon URLs can force a cache bust.
Frequently Asked Questions
What is a favicon?
A favicon (short for 'favorite icon') is a small image displayed in browser tabs, bookmarks, browser history, and mobile home screen shortcuts. It was introduced by Internet Explorer in 1999 as 'favorites icon' — hence the name. Every professional website should have one; browsers display a generic grey globe icon for sites that don't provide one.
What size should a favicon be?
You need multiple sizes: 16×16 and 32×32 for browser tabs (ICO or PNG), 180×180 for Apple touch icons (PNG), and 192×192 and 512×512 for Android PWA icons (PNG). Always start from a high-resolution (512×512 or larger) square source image for best results when downscaling.
What is the difference between favicon.ico and favicon.png?
favicon.ico is the original format that browsers look for by default at /favicon.ico. It can contain multiple resolutions in one file and works in all browsers without any HTML link tag. favicon.png requires an explicit HTML link tag but supports larger sizes and full transparency. Modern best practice is to provide both: a .ico for compatibility and PNG files for modern browsers.
How do I add a favicon to my website?
Place your favicon files in the root directory of your website. Add link tags in your HTML head: <link rel='icon' href='/favicon.ico'> for basic support, plus additional tags for PNG sizes and Apple touch icons. If using a CMS (WordPress, Wix, Squarespace), look for a 'Site Identity' or 'Favicon' setting in the theme or customizer panel.
Why isn't my new favicon showing up?
Browsers cache favicons aggressively. After updating, hard-refresh with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac). Test in a private/incognito window to see the new favicon without cache interference. If still not updating, try appending a query string: favicon.ico?v=2. Server-side, set appropriate cache-control headers for favicon files.
What image format should I use as the source for my favicon?
A square PNG or SVG at 512×512 pixels or larger is ideal. PNG with transparent background allows the favicon to work on any browser chrome color. JPEG works but lacks transparency. SVG is perfect if available. Avoid heavily compressed images, as compression artifacts become very visible at small sizes.
Do I need a favicon for SEO?
Google displays favicons next to search results on mobile and in some desktop layouts. A missing or low-quality favicon is a minor negative signal in terms of brand trust and click-through rates, but is not a direct ranking factor. More importantly, a branded favicon improves brand recognition when users have multiple tabs open and helps distinguish your site in bookmarks.
What is an Apple touch icon?
An Apple touch icon (apple-touch-icon.png, 180×180px) is displayed when a user adds your website to their iPhone or iPad home screen. Without it, iOS uses a screenshot of the page. Specify it with: <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>. It also appears in iOS Safari's Reading List and Handoff features.