Favicon generator — PNG icons and multi-size ICO

Turn an image into PNG icons from 16 to 512 pixels and an ICO containing 16, 32, 48, 64 and 256 px sizes. Preview your favicon and download the files.

Create standard icon sizes from one image without cropping its edges.

or drop one image anywhere on this page

favicon.ico includes 16, 32, 48, 64, and 256 px frames. PNG downloads use their displayed size; 180 px is saved as apple-touch-icon.png.

Choose an image.

Create ICO and PNG favicons

What to know

One source image produces two kinds of output. The favicon.ico button writes a single ICO file with five frames at 16, 32, 48, 64 and 256 px, and eight PNG buttons write separate files at 16, 32, 48, 64, 180, 192, 256 and 512 px. The 180 px PNG is saved as apple-touch-icon.png and the others as favicon-16.png, favicon-32.png and so on.

The source is first fitted into a 512 x 512 square without cropping. A wide logo is scaled down until its width fits and the empty bands above and below stay transparent, so nothing at the edges is cut off. That is convenient, but a square source with a little margin gives larger-looking tab icons than a banner-shaped one.

Input can be PNG, JPG, WebP, GIF, SVG, AVIF or BMP, one image at a time; dropping a second one replaces the first. An animated GIF contributes a single still frame, and an SVG is rasterized at the 512 px size, which keeps vector logos crisp.

A typical site setup uses favicon.ico at the root for browsers that ask for it by default, the 180 px apple-touch-icon.png for iOS home screens, and the 192 and 512 px PNGs in a web app manifest. Preview tiles at every size sit on screen, so you can check how the mark survives at 16 px before downloading anything.

Worked example

Use a simple mark that stays recognizable at 16 × 16 pixels. This generator fits the whole source into a square without stretching it, leaving transparent space when the source is not square. PNG downloads are individual images; ICO contains multiple sizes in one file.

Input

PNG / JPG / WebP / GIF / SVG / AVIF / BMP

Output

ICO: 16, 32, 48, 64, 256 px
PNG: 16, 32, 48, 64, 180, 192, 256, 512 px

Download the files and publish them on your website, then reference the icon from your HTML. Generating a favicon does not install it on your site. Check the small preview before publishing; fine text may not be readable.

Create a favicon ICO from your logo, then connect it to your site

A favicon needs to remain recognizable in a small browser tab. Start with a simple square-friendly mark, inspect the small previews, download the files and connect them through your website settings or HTML. Generating a file is only the first part of installing an icon.

Choose a source that survives a 16-pixel preview

A wide logo with a long company name can become unreadable in a browser tab. Try a short lettermark or recognizable symbol, and check its contrast against light and dark surroundings. Avoid relying on fine lines that disappear when reduced.

This generator fits the whole source proportionally inside a square. A wide source therefore leaves transparent space above and below, making the visible mark smaller. Crop unnecessary margins in the source when appropriate, then check the 16px and 32px previews instead of judging only the largest output.

Know what your PNG and ICO downloads contain

Each PNG download is one image size. Available PNG sizes are 16, 32, 48, 64, 180, 192, 256 and 512 pixels. The ICO download combines 16, 32, 48, 64 and 256 pixel versions in one file.

Choose the output that your site’s icon setting requires. Generating a PNG or ICO does not create a web app manifest or install the icon on your hosting service. If your site builder has a dedicated icon upload field, use its requirements rather than assuming that every downloaded size must be uploaded.

Install the file and verify the public address

Upload the chosen icon to your website or its icon settings. If you manage the HTML, reference the public icon address in the page head, for example with a link whose rel is icon and whose href points to your favicon file. Confirm that this exact file address loads before investigating the browser display.

If the old icon remains, check a newly opened tab or another browser as well as the current cached page. If the filename or location changed, update the reference too. Search results may need a later crawl to reflect the change, and a working browser-tab icon does not guarantee immediate search-result display.

Keep the icon consistent with the page people will visit

Use a mark that actually represents your service. Consistency between the tab icon, website header and product helps visitors recognize that they have reached the intended site. Do not replace a recognizable logo with unrelated visual detail solely to fill a larger canvas.

After installation, review the small version again on the live site. A successful download confirms that a file was generated; checking the live tab confirms a different step. Keep the original design so future changes can start from a clear source rather than a repeatedly reduced icon.

Continue with the task you need

  • Too much empty space around the source logo

    Adjust the source framing before generating the icon. Crop the source image

  • Need another image size for your website

    Set the required pixel dimensions. Resize a logo image

Choose a specific task 7
Related tools 13
How to use Favicon generator — PNG icons and multi-size ICO
  1. Choose or drop one image, ideally a square PNG or SVG of 512 px or more.
  2. Look through the preview tiles from 16 to 512 px and check that the 16 px one is still readable.
  3. Press Download favicon.ico for the multi-size ICO.
  4. Download the 180 px and 192 px PNGs too, then add them to your page head and manifest.

Quick answers

Which files do I actually need for a website?

A favicon.ico at the site root, an apple-touch-icon.png of 180 px for iOS, and 192 and 512 px PNGs if you publish a web app manifest. The other sizes are optional extras.

Why does my wide logo look small in the tab?

The whole image is fitted inside a square, so a wide logo uses only a thin band. Make a square version of the mark for the best result.

What happens to an animated GIF?

Only one still frame is used. Favicon files here are static images.

What are the names of the downloaded files?

favicon.ico for the ICO, apple-touch-icon.png for the 180 px PNG, and favicon-16.png, favicon-32.png and so on for the rest.

What sizes are included in the generated favicon.ico?

The ICO combines 16, 32, 48, 64 and 256 pixel versions. PNG files are available separately at the sizes shown in the preview.

Why does my logo look small inside the favicon?

The entire source is fitted proportionally inside a square. A wide logo or large source margins leave less space for the visible mark. Try a simpler, square-friendly source and inspect the smallest preview.

Does downloading an ICO install it on my website?

No. Upload it to your site and connect it through your site settings or HTML. Check that the public icon address loads and that the page references that address.