Favicon Generator

Generate favicons in all standard sizes from any image. Download as a ZIP with all sizes included.

Free to use. Runs in your browser.

Upload a square image or logo to generate a complete favicon set, ICO, PNG at 16/32/180/192/512, Apple touch icon, and a manifest.json snippet for PWAs.

Drop an image or click to upload

PNG, JPG, SVG, any size

What Is a Favicon?

A favicon (favourite icon) is the small icon that appears in browser tabs, bookmarks, and mobile home screens next to your website's name. It's one of those tiny details that makes a website look professional, without one, browsers show a generic blank icon that makes your site look unfinished.

Modern websites need favicons in multiple sizes: 16×16 for browser tabs, 32×32 for taskbar shortcuts, 180×180 for Apple devices, and 192×192 or 512×512 for Android PWAs. This generator creates all standard sizes from a single source image, packaged in a ZIP for easy deployment.

Required Favicon Sizes

Size	Used For	HTML Tag
16×16	Browser tabs, address bar	link rel="icon" sizes="16x16"
32×32	Taskbar shortcuts, retina tabs	link rel="icon" sizes="32x32"
48×48	Windows site pinning	link rel="icon" sizes="48x48"
180×180	Apple Touch Icon (iOS)	link rel="apple-touch-icon"
192×192	Android Chrome, PWA manifest	manifest.json icons
512×512	PWA splash screen, large displays	manifest.json icons

What this means for you: At minimum, you need a 32×32 favicon.ico and a 180×180 apple-touch-icon. For PWAs, add the 192 and 512 sizes to your manifest.json.

Tips for Great Favicons

Keep It Simple

At 16×16 pixels, fine details disappear. Use a bold, recognisable shape, a single letter, geometric logo, or simplified icon. Text-heavy logos won't work at this size.

Use a Square Source

Start with a square source image (at least 512×512). Non-square images get squashed during generation. Crop to square before uploading for best results.

Test on Dark Mode

Many browsers show favicons on both light and dark backgrounds. Ensure yours has enough contrast to be visible in both. Consider adding a subtle border or background if needed.

PNG Over ICO

Modern browsers support PNG favicons. ICO format is only needed for legacy IE support. Use PNG for crisp rendering on high-DPI screens.

Favicon Formats Compared

Format	Browser Support	Transparency	Best For
.ico	All browsers (including IE5+)	Yes	Maximum compatibility
.png	All modern browsers	Yes	Crisp rendering on retina
.svg	Chrome, Firefox, Edge	Yes	Scalable, supports dark mode media query
.webp	Limited	Yes	Not recommended for favicons

The modern best practice is to use an SVG favicon as the primary (it supports dark mode via CSS media queries inside the SVG), with a 32×32 PNG fallback for Safari and older browsers.

Related Tools

Image Resizer

Resize images to exact dimensions

Image Compressor

Reduce image file sizes

Image to PNG

Convert images to PNG format

Placeholder Image Generator

Create sized placeholder images

Colour Palette Generator

Generate colour schemes for branding

Meta Tag Generator

Generate meta tags including favicon links

How to use this tool

Upload an image or logo to use as your favicon

Preview it at multiple sizes (16×16, 32×32, 192×192)

Download the favicon package with all required formats

Common uses

Creating browser tab icons for new websites
Generating PWA icons in all required sizes
Producing Apple Touch icons for iOS home screens
Converting logos to ICO format for legacy browser support

Share this tool

Frequently Asked Questions

What sizes does this generator create?

It generates 8 sizes: 16×16, 32×32, 48×48, 64×64, 128×128, 180×180 (Apple Touch), 192×192, and 512×512 (PWA). All are packaged in a ZIP along with a 32×32 favicon.ico.

What source image should I use?

Start with a square image at least 512×512 pixels. PNG works best. Non-square images get squashed, so crop to square first.

Are the favicons uploaded anywhere?

No. All generation happens in your browser using the Canvas API. Your image never leaves your device.

Do I need an ICO file?

Only for legacy Internet Explorer support. Modern browsers all support PNG favicons. The ZIP includes a 32×32 ICO file just in case.

What's an Apple Touch Icon?

The 180×180 PNG that iOS devices use when someone adds your site to their home screen. Without it, iOS takes a screenshot of your page instead.

What sizes do I need for a PWA?

At minimum, 192×192 and 512×512. These go in your manifest.json icons array. The 512×512 is also used for PWA splash screens on Android.

How do I add favicons to my website?

Place the files in your site's root directory and add link tags in your HTML head: <link rel='icon' sizes='32x32' href='/favicon-32x32.png'> and <link rel='apple-touch-icon' href='/favicon-180x180.png'>.

Why does my favicon look blurry in browser tabs?

Browser tabs display at 16×16 pixels. Fine details and text disappear at this size. Use a bold, simple shape for the best result. Test at 16×16 before committing.

Can I use an SVG as my source?

Yes. Upload any image format your browser supports, PNG, JPG, SVG, WebP. The tool converts everything to PNG at each target size.

How often should I update my favicon?

Only when your branding changes. Favicons are heavily cached by browsers, so users may not see updates immediately. Some browsers cache favicons for weeks.

Does the favicon affect SEO?

Favicons appear in Google search results next to your URL. A recognisable favicon improves click-through rates. Google recommends a multiple of 48×48 pixels.

What makes a good favicon?

Simplicity. At 16×16 pixels, only bold shapes and high contrast survive. A single letter, geometric logo mark, or simplified icon works best. Avoid text-heavy logos.

Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.