What image should I upload for the best favicon?

A square PNG with a transparent background at least 512×512 pixels gives the best results. The image will be scaled down to all required sizes, so start as large and sharp as possible. Avoid uploading an image smaller than 512×512 as the scaled-down versions may look blurry.

Does my website need all these favicon sizes?

Technically you can get by with just a favicon.ico and one PNG, but modern browsers and devices request specific sizes. Providing the full set ensures your icon looks sharp on retina displays, Android home screens, iOS devices, and in Windows taskbar pinned sites. Missing sizes cause browsers to scale up a smaller image, which can look blurry.

Why is favicon.ico a container file with multiple sizes?

The ICO format supports multiple image frames at different resolutions in a single file. This lets the operating system pick the best size for the context — 16×16 for a browser tab, 32×32 for the taskbar. This tool encodes 16, 32, and 48px PNG data into the ICO container using pure JavaScript with no server upload.

My favicon is not updating after I replaced it. Why?

Browsers cache favicons aggressively, often for days. To force an update, hard-refresh the page (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac) or open the site in an Incognito/Private window. If the problem persists, you can append a version query string to the favicon link: href="/favicon.ico?v=2".

Do I need a web manifest if I am not building a PWA?

The site.webmanifest is primarily required for PWA features like the "Add to Home Screen" install prompt on Android. If you are not building a PWA, you can skip including the manifest link tag. However, including it does not harm non-PWA sites and enables future PWA upgrades without additional favicon work.

What is the apple-touch-icon and why is it 180×180?

When an iPhone or iPad user taps "Add to Home Screen" in Safari, iOS uses the apple-touch-icon as the home screen app icon. iOS currently renders this at 120×120 on standard displays and 180×180 on retina displays (@3x). Providing 180×180 ensures it looks sharp on all modern Apple devices. iOS applies rounded corners and the shine effect automatically — do not add them to your source image.

Can I use a JPEG image for a favicon?

Yes, but PNG is strongly preferred. JPEG does not support transparency, so your favicon will have a white or coloured background that may clash with dark browser themes. PNG with transparency adapts to any browser background. If you only have a JPEG, upload it and the tool will generate all sizes — just be aware the background will not be transparent.

Free Favicon Generator — All Sizes, ICO + PNG + Manifest

Generate a complete favicon package from any image. All sizes, favicon.ico, Apple touch icon, Android icons, web manifest, and the HTML snippet to install them.

Drop images here, or click to browse

PNG, JPG, WEBP, GIF, SVG+XML · max 5 MB · single file only

How it works

1Upload a square PNG or JPG (up to 5 MB). Non-square images are center-cropped automatically.
2Click "Generate Favicons" — all sizes are created in your browser.
3Preview how the favicon looks in a browser tab.
4Download the ZIP containing all PNG files, favicon.ico, site.webmanifest, and INSTALL.html.
5Upload the files to the root of your website.
6Paste the HTML snippet from INSTALL.html into the <head> of your pages.

Frequently asked questions

What Is a Favicon?

A favicon (short for "favorites icon") is the small image displayed in a browser tab next to your page title. It also appears in bookmarks, browser history, home screen shortcuts on mobile devices, and in the taskbar when a browser window is pinned. The name comes from Internet Explorer 5, released in 1999, which first introduced the concept of a site-specific icon stored at /favicon.ico.

In those early days, a favicon was a single 16×16 pixel ICO file placed at the root of the web server. Browsers would automatically request it and display it in the address bar. Over the next two decades, the web expanded to mobile devices, high-DPI retina screens, and progressive web apps — and the humble favicon evolved into a family of icons covering dozens of sizes and use contexts.

Today a complete favicon set covers small browser tab icons, larger taskbar icons, Apple home screen icons (Apple Touch Icons), Android launcher icons, and PWA splash screen icons. Generating all of these manually would take significant time — this tool automates the entire process from a single source image.

All Favicon Sizes and What They Are Used For

Different browsers and operating systems request different icon sizes. Here is a breakdown of every size generated by this tool and where each one is used:

File	Size	Used by
favicon.ico	16, 32, 48px	All browsers (legacy fallback, IE, older Firefox)
favicon-16x16.png	16×16	Browser tab, bookmarks bar
favicon-32x32.png	32×32	Chrome, Firefox address bar, Windows taskbar
favicon-48x48.png	48×48	Windows site shortcuts, ICO layer
favicon-96x96.png	96×96	Google TV, older Android browsers
apple-touch-icon.png	180×180	iOS Safari "Add to Home Screen", iPadOS
favicon-192x192.png	192×192	Android Chrome, web app manifest
favicon-512x512.png	512×512	Android PWA splash screen, Google Search
site.webmanifest	—	PWA metadata, Android home screen install prompt

favicon.ico vs PNG: The Modern Approach

The original favicon format is ICO, a container format that can hold multiple images at different sizes in a single file. A modern favicon.ico typically contains 16×16, 32×32, and 48×48 PNG data, allowing the browser to pick the most appropriate size. The ICO format is understood by every browser ever made, making it the most reliable fallback.

However, ICO has limitations: it cannot exceed 256×256 pixels in practice, and it is not supported natively as an <img> src in all contexts. Modern browsers prefer PNG icons declared with explicit <link> tags because PNG supports full alpha transparency, loads faster, and scales cleanly at higher resolutions.

The recommended approach today — used by this tool — is to provide both: afavicon.ico at the root for legacy browsers and explicit PNG links for modern ones. Chrome, Firefox, Edge, and Safari will all pick the most appropriate PNG size from the <link> tags and ignore the ICO file entirely.

How to Install Favicons

After downloading the ZIP from this tool, upload all files inside it to the root directory of your website (the same folder as your index.html). Then paste the HTML snippet from INSTALL.html into the<head> section of every page.

Plain HTML: Open your HTML file, find the<head> tag, and paste the snippet inside it. Save and reload the page. The favicon should appear within one browser refresh.

Next.js: In Next.js 13+ with the App Router, place the favicon files in the app/ directory. Next.js will automatically serve favicon.ico from there. For the PNG sizes, add them to public/ and reference them in your root layout.tsx using the Next.js Metadata icons field.

WordPress: Go to Appearance → Customize → Site Identity → Site Icon. Upload your 512×512 PNG and WordPress will generate the required sizes automatically. Alternatively, upload all files via FTP and add the<link> tags to your theme'sfunctions.php usingwp_head.

Shopify: Go to Online Store → Themes → Customize → Theme Settings → Favicon. Upload a square PNG (at least 32×32) and Shopify handles the rest. For advanced control over all sizes, upload viatheme.liquid in the code editor.

Favicon vs App Icon: What Is a PWA Icon?

A Progressive Web App (PWA) is a website that can be installed on a device like a native app. When a user taps "Add to Home Screen" on Android Chrome, the browser creates a launcher shortcut using the icons declared in thesite.webmanifest file. The 192×192 and 512×512 PNG files serve this purpose.

The 512×512 icon is particularly important: Google uses it in the PWA install prompt and as the splash screen image shown while the app loads. Without it, the install experience looks unpolished. Both icons must be listed in the manifest and the manifest must be linked in the page <head> with<link rel="manifest" href="/site.webmanifest">.

On iOS, Safari does not use the web manifest for home screen icons — it reads the Apple Touch Icon instead. The 180×180apple-touch-icon.png is what appears on iPhone and iPad home screens when a user saves the site. Apple recommends no rounded corners in the source file — iOS applies the rounding automatically.

Tips for Creating a Good Favicon

Start with a square image. All favicon sizes are square. If your source image is not square, this tool will center-crop it automatically, but you may lose important parts of the image at the edges. For best results, prepare a square version of your logo before uploading.

Use a PNG with transparency. Favicons are displayed on different backgrounds — white in Chrome, dark in Firefox's dark mode, coloured on bookmarks bars. A PNG with a transparent background adapts to all of these. A white background will look fine in most cases but will appear as a white square on dark browser chrome.

Keep it recognizable at 16×16 pixels. At 16×16, fine details disappear. Simple, bold icons with high contrast work best. If your full logo has text alongside an icon, consider creating a favicon version that uses only the icon glyph. After generating, check the 16×16 preview in this tool to confirm it is still legible.

Test across browsers. After installing, open your site in Chrome, Firefox, Safari, and Edge to verify the icon appears correctly. Clear your browser cache if the old icon persists — browsers aggressively cache favicons. Use Incognito mode or hard-refresh (Ctrl+Shift+R) to see the updated icon immediately. You can also use the Image Compressor to reduce the PNG file sizes before uploading if needed.

Keep going

Image to SVG Converter

Convert PNG and JPG images to scalable SVG vectors automatically

Try now

Image Compressor

Compress JPG, PNG, and WebP images without losing quality.

Try now

Image Resizer

Resize images to exact dimensions or social media presets.

Try now

Image Format Converter

Convert images between JPG, PNG, WebP, AVIF, and HEIC formats.