What sizes does a favicon actually need in 2026?

Six sizes cover every modern device: 16 × 16 (browser tab), 32 × 32 (Retina browser tab), 48 × 48 (Windows taskbar), 180 × 180 (Apple touch icon for iOS home screen), 192 × 192 (Android Chrome PWA), and 512 × 512 (Android Chrome high-density). The old 64 × 64 and ICO bundle formats are deprecated for new sites - the 6-size PNG approach above covers all current browsers and operating systems.

Why so many sizes? Can I just use one favicon.ico?

You could, but the result will look soft on Retina screens, blurry on iOS home screens, and undersized on Android PWA installs. Different display contexts use different size files. Browsers tab use 16-32 px. iOS home screen uses 180 px. Android Chrome PWA uses 192 - 512 px. Each context picks the closest size match. Providing all six means each device gets a pixel-perfect render.

What's the best source image size to upload?

256 × 256 pixels or larger, square aspect ratio. The tool downscales to each favicon size, and downscaling produces sharper results than upscaling. A 512 × 512 source is ideal because it downscales cleanly to every required favicon size including the large 512 × 512 PWA icon.

Should I use SVG, PNG, or JPG for my favicon source?

PNG with transparency is the best general choice. SVG is even better if your logo is vector-based (rasterizes to crisp PNG at any size). JPG works if your favicon is a photograph, but most favicons are logos and JPG compresses them poorly (visible artifacts around sharp edges). Avoid JPG for any favicon with sharp logos or text.

Where do I put the favicon files on my site?

Upload them to the root of your website so they live at /favicon-16x16.png, /favicon-32x32.png, /apple-touch-icon.png, etc. Then add the HTML snippet (provided in the tool) inside the of your HTML so browsers know which file maps to which size and context.

Do I still need favicon.ico for old browsers?

Only if your audience includes Internet Explorer or very old browsers (pre-2010 Safari, etc.). For any modern site, the PNG-based approach above is sufficient and produces sharper results across all current browsers and devices. If you really need .ico support, generate it separately - most favicon-ico converters require a different tool because the .ico format bundles multiple sizes into one file.

What's the difference between favicon-32x32 and Apple touch icon (180x180)?

Different operating systems use them for different things. Browser favicons (16-48 px) appear in tabs, bookmarks, and browser history. Apple touch icon (180 × 180) is specifically iOS - when a user adds your site to their iPhone or iPad home screen, iOS uses this icon as the app-like shortcut. Android Chrome PWA icons (192 × 192, 512 × 512) play the same role on Android. Each operating system requires its specific size for the home screen / PWA install behavior.

Can my favicon have transparency?

Yes, and it's recommended for most logos. PNG with transparent background works correctly in browser tabs (the browser's tab background shows through). For Apple touch icon (180 × 180), iOS applies a rounded-corner mask but does not require transparency - your icon can fill the entire square if you want. For Android Chrome PWA icons (192 × 192, 512 × 512), the system can apply its own mask depending on the launcher, so center your important content with some padding so it survives the mask.

Should the favicon match my logo exactly?

Usually a simplified version works better than the full logo. At 16 × 16 or 32 × 32, fine details of a complex logo become unreadable. Most major brands use a simplified mark or single letter for their favicon. Test by shrinking your design to 16 × 16 in any image editor - if it's still recognizable as your brand, it works. If it becomes mush, simplify the design until it reads at small size.

Do PWAs (progressive web apps) need anything extra?

Yes - a web app manifest file (manifest.webmanifest or manifest.json) that lists your icons and tells the browser the app is installable. The favicon files this tool generates fit directly into the manifest's 'icons' array. Most PWA tutorials include manifest setup; the favicons themselves are the same files as listed above.

Is generating favicons in the browser actually safe and private?

Yes. This tool runs entirely in your browser using the HTML5 Canvas API. Your source image is never uploaded to any server - all the resize operations happen on your device. The generated favicon files only exist in your browser's memory until you download them. No tracking, no analytics on your image, no storage.

Does the tool generate a favicon.ico file?

Not in this version. It generates 6 PNG files at standard sizes, which is what current browsers and operating systems actually use. If you specifically need a favicon.ico, several free tools handle just that one format. PNG-based favicons render sharper on Retina/high-DPI displays than ICO files anyway, so most modern sites don't include .ico in their favicon setup.

Favicon Image Resizer

Generate all 6 standard favicon sizes from one image. 16 × 16, 32 × 32, 48 × 48, Apple touch icon (180 × 180), and Android Chrome PWA (192 × 192, 512 × 512). Ready-to-paste HTML included. Runs in your browser, no upload.

Upload your logo or icon

A square image (256 × 256 or larger) gives the cleanest results. SVG, PNG with transparency, or JPG.

Files never leave your browser · ⌘V to paste a screenshot

Why six sizes?

A single favicon.ico file used to be enough. That was 2005. By 2026, browsers, operating systems, and PWA installers all expect different sizes for different contexts. Browser tabs render at 16-32 px. Windows taskbars at 48 px. iOS home screens at 180 px. Android Chrome PWA installs at 192-512 px.

Each context picks the closest size match from what your site provides. If you only provide 16 × 16, Android Chrome will upscale to 512 × 512 for PWA installs - resulting in blurry, pixelated icons. If you only provide 512 × 512, browser tabs downscale to 16 × 16 with anti-aliasing artifacts that make small text in your logo unreadable.

Six sizes covers every modern display context: browser tabs, browser tabs at Retina/high-DPI scaling, Windows taskbar, iOS home screen, Android PWA, and Android PWA at high-density. This tool generates all six from one source image - upload once, download a complete favicon set.

Designing favicons that read at 16 × 16

The hardest size is 16 × 16. Your logo will be rendered as a 16-pixel-wide image and most designs fail at this scale. Three things make a favicon work at 16 × 16:

Bold silhouette. The shape of your logo should be recognizable even as a solid color block. If your logo has thin lines or fine details, they disappear at 16 × 16.
Single dominant color. Multi-color logos compete for attention at small sizes. A simplified single-color version reads cleaner.
High contrast. Light icons on dark browser tabs (or dark icons on light tabs) need clear differentiation from the background.

Most major brand favicons follow this. Notice that Twitter (X), Facebook (f), Instagram (camera silhouette), and YouTube (play triangle) all use simplified single-element marks rather than full logos. The full logo is what people see on your site; the favicon is what they see in 50+ tabs of their browser, and recognition matters more than fidelity.

PWA and home screen considerations

The 180 × 180 (Apple touch) and 192 × 192 / 512 × 512 (Android Chrome) sizes serve a special purpose: when a user adds your site to their phone home screen, the icon appears as a square tile alongside their installed app icons. The OS may apply a rounded-corner mask (iOS) or its own theme overlay (Android).

Design implications:

Fill the canvas or pad with safe zone. iOS applies a rounded corner mask. If your icon hits the corners exactly, the rounding can crop a few pixels. Center your design with ~10% padding to be safe.
Background color matters. Apple touch icons cannot be transparent in some iOS versions - if transparency is unsupported, the background renders as black. Set an explicit background color that matches your brand.
Test on a home screen. Add your site to your phone home screen via "Add to Home Screen" in browser. If the icon looks wrong, redesign the source and regenerate.

Frequently Asked Questions

You Might Also Need

Resize Image

Resize any image to exact pixel dimensions

Convert Format

Convert between JPG, PNG, WebP, SVG, etc.

Compress Image

Reduce file size while keeping quality

Circle Crop

Crop image to a circle with transparent background

iPhone Wallpaper Resizer

Resize to iPhone native resolutions

Android Wallpaper Resizer

Resize to standard Android resolutions