Favicon Generator

Generate a favicon.ico containing 16x16, 32x32, 48x48 sizes plus 180x180/512x512 PNG icons from your image.

When should you use this?

Use this when you need to generate the small icon that shows in a browser tab (a favicon) in multiple sizes from a single image.

When shouldn't you use this?

If the source image is too complex or detailed, fine details get lost at very small sizes like 16x16 pixels; a simple, clean icon design works better for a favicon.

Step-by-step

Pick your source image in the Logo/image field. A square image of at least 512x512 pixels gives the cleanest result.
Click Generate favicon and download.
Find the three downloaded files: favicon.ico, apple-touch-icon.png and favicon-512.png.
Upload favicon.ico to the root folder of your site, and reference the PNG files with the matching link tags in your page's head section.

Example

You've built a site for your handmade soap brand, and the logo has the brand name next to a small leaf drawing. Upload the full logo and the text becomes unreadable at 16x16. Instead, prepare a square image with just the leaf and you get an icon people can recognise in a browser tab. The apple-touch-icon.png is what shows when an iPhone user adds your site to their home screen, and the 512-pixel PNG is used if you add a web app manifest.

What is a favicon and which sizes are needed?

A favicon is the small icon that represents your site in browser tabs, bookmarks and search results. Modern browsers support PNG or SVG; sizes such as 16×16, 32×32, 180×180 (Apple touch icon) and 192×192 are used for different devices. The icon should be simple to stay readable at small size.

Tips for favicons

Use a single letter or a simple shape instead of a complex logo; detail vanishes at 16 pixels.
Start from a square source image.
Add the icon in the head with a link tag and place the file in your site's root.
After a change the browser may cache the old icon; do a hard refresh.

Things to keep in mind

An icon with a transparent background can disappear on dark browser tabs. If your symbol is dark, consider a light outline or a solid background.
You may keep seeing the old favicon after uploading the new one, because browsers cache it for a long time. A private window shows what visitors actually get.
Your site's icon also appears in Google search results, and it can take a while for the search engine to pick up the new one.
Thin lines in the source image vanish at small sizes. Bold shapes with strong contrast read better.

Frequently asked questions

Is my image uploaded anywhere?

No, processing happens entirely in your browser via the Canvas API — your image never leaves your device.

Will there be quality loss?

Some quality loss during format conversion or compression is normal, more noticeable with lossy formats like JPG.

Which formats are supported?

JPG, PNG, and WebP formats are supported.