What is a Favicon?
A favicon (short for "favorite icon") is the small square image that represents your website - the icon you see in a browser tab, bookmarks bar, browser history, and search results. Beyond the classic 16×16 browser tab icon, a modern favicon is really a whole package: separate icons sized for iOS home screens, Android home screens and PWAs, and Windows tiles, each with its own expected size and file name.
Why Every Website Needs a Favicon
- ·Makes your site recognizable among a dozen open browser tabs.
- ·Reinforces your brand every time someone bookmarks or revisits your site.
- ·Looks correct when someone adds your site to their home screen or installs it as a PWA.
- ·Signals a finished, professional site rather than an unfinished project - a missing favicon shows up as a blank, generic page icon that every visitor sees.
How to Create a Favicon
Creating a favicon used to mean manually resizing your logo into half a dozen files by hand. This favicon maker automates the whole thing - upload your logo once and this website favicon generator produces every required size automatically.
Upload your logo
PNG, JPG, WebP or SVG - ideally square and at least 512×512px for the sharpest results.
Customize
Choose a background, padding and rounded corners, and set a theme color for browsers and Windows tiles.
Download
Grab the full favicon package as a ZIP, or copy the HTML tags straight into your site's <head>.
Required Favicon Sizes
Every platform expects its own icon size, and this generator produces the full set in one pass - here's exactly what each file is for.
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 & 48px combined | Legacy browsers, Windows shortcuts, the universal fallback |
| favicon-16x16.png | 16×16 | Browser tabs |
| favicon-32x32.png | 32×32 | Browser tabs & taskbar |
| favicon-48x48.png | 48×48 | Windows site icons |
| apple-touch-icon.png | 180×180 | iOS / iPadOS home screen |
| android-chrome-192x192.png | 192×192 | Android home screen & PWA |
| android-chrome-512x512.png | 512×512 | Android splash screen & PWA |
| mstile-150x150.png | 150×150 | Windows Start tile |
| site.webmanifest | — | PWA metadata - name, icons, colors |
| browserconfig.xml | — | Windows tile configuration |
ICO vs PNG vs SVG Favicons
ICO is the original favicon format - a single file that bundles multiple resolutions together, and it's still the most universally supported fallback, including by very old browsers and Windows itself.
PNG favicons are simpler: one file, one size, with full transparency support. Modern browsers pick whichever PNG size best matches how the icon is displayed, which looks sharper than scaling a single ICO frame up or down.
SVG favicons are vector, so they render crisply at any size - but browser support is less consistent than PNG or ICO. In practice, shipping all three - favicon.ico as a fallback, sized PNGs for crisp rendering, and optionally an SVG - covers every browser and device without any guesswork.
How to Add a Favicon to HTML
Upload the generated files to your website's root directory - the same folder as your homepage - then paste the HTML tags this tool generates into the <head> section of your pages, or into your site's shared layout or template so you only need to add it once.
How to Add a Favicon in WordPress
Most WordPress themes read the favicon from Appearance → Customize → Site Identity, where you can upload a "Site Icon" and WordPress generates the sizes it needs automatically. If your theme or a caching plugin doesn't pick it up, you can also upload the files this tool generates directly to your theme's root folder and add the HTML tags to your theme's header.php, or via a plugin like Insert Headers and Footers.
How to Add a Favicon in Next.js
In the Next.js App Router, drop favicon.ico or icon.png directly into your app/ directory and Next.js serves and links it automatically - no manual tags needed. For the full package this tool generates, place the files in your public/ folder instead and add the HTML tags to the metadata export in app/layout.tsx (or a <head> block if you're on the Pages Router) - the same way this site links its own favicon.
Best Practices
- ·Start from a square, high-resolution source image (512×512px or larger) so every generated size stays sharp.
- ·Keep the design simple - fine detail disappears at 16×16px, so a bold, simplified mark reads better than a complex logo.
- ·Use a transparent background unless you specifically need a solid brand color behind the icon.
- ·Regenerate and re-upload whenever your logo changes - browsers cache favicons aggressively, so give it time (or a hard refresh) to show up.
- ·Keep favicon.ico at your site's root even if you're using the newer PNG-based tags, since some browsers and services still request it directly by that exact path.
Frequently asked questions
A complete favicon package should include 16×16 and 32×32 for browsers, 180×180 for Apple devices, and 192×192 and 512×512 for Android devices and PWAs. This generator produces all of those, plus a 48×48 size for Windows and a 150×150 Windows tile icon, so you're covered everywhere.
Upload a square PNG or SVG of at least 512×512 pixels. A square source avoids any cropping or distortion, a high resolution keeps every generated size sharp - including the large 512×512 Android/PWA icon - and PNG or SVG both support transparency, unlike JPG.
Yes. It remains the standard fallback for compatibility - some older browsers, Windows shortcuts, and services that check for a favicon only look for /favicon.ico directly, regardless of what PNG-based tags you've added to your HTML.
Yes. Choose Transparent for the background and the generated icons keep their alpha channel. Transparent favicons work well with both light and dark browser themes, since there's no background box to clash with the surrounding UI.
Upload the generated files to your website's root directory - the same folder your homepage lives in - so paths like /favicon.ico and /site.webmanifest resolve correctly. Then add the generated HTML tags to the <head> section of your pages, or your site's shared template.
Not directly - a favicon isn't a ranking factor Google scores your page on. But it does improve branding and user recognition, and can increase click-through rates, since search engines display favicons next to results on both mobile and desktop.
Generate a new package with this tool and re-upload the files to your site, overwriting the old ones at the same paths. If your browser still shows the old icon afterward, that's almost always caching - see "Why isn't my favicon updating?" below.
Yes - modern browsers support an SVG favicon link tag, and SVG favicons scale perfectly at any size. Support isn't universal though, so it's normally added alongside, not instead of, the PNG and ICO files this tool generates.
Almost always browser caching - favicons are cached more aggressively than regular images, sometimes for weeks. Try a hard refresh, clear your browser's cache for the site, or open the page in a private/incognito window. If you're using a CDN, you may also need to purge the cached favicon files there.
A web app manifest (site.webmanifest) is a JSON file that tells browsers how your site should behave if someone adds it to their home screen or installs it as a Progressive Web App - it lists the icons to use, your app's name, and colors like the theme and background color.
You can technically point every platform at a single image, but it won't look as sharp - iOS, Android and Windows each expect a specific size and can crop or pad a mismatched icon oddly. Generating the full set, like this tool does, is what actually guarantees a crisp icon everywhere.
At least 512×512 pixels, and square. That matches the largest icon this tool generates - the Android/PWA 512×512 icon - so nothing gets upscaled and blurry; everything smaller is generated by scaling down, not up.
Yes, heavily - often more aggressively than other images on a page, sometimes for weeks at a time. That's expected behavior for performance, but it's also why a favicon update can take a while to show up for returning visitors.
Yes - this is a completely free favicon generator. It works entirely in your browser and doesn't require an account or any software installation.
Yes. Every icon is generated directly in your browser using the Canvas API - your image is never uploaded to a server, so it stays entirely on your device.