Favicon & App Icon Generator: how to use it
Create favicon and app icon PNG files in 16, 32, 48, 180, 192 and 512 pixel sizes from any logo, and learn how to add them to your website.
A favicon is the tiny icon in a browser tab, bookmark list and search result. Modern sites also need larger icons for phone home screens and installable web apps. This generator turns one logo into square PNG icons in the standard sizes, using your browser only.
Start with a simple, bold, square logo. Fine text and thin lines disappear when an image is shown at 16 pixels, so the cleaner your artwork, the better the result.
How to use the Favicon & App Icon Generator
- Select your logo image. A square picture at least 512 x 512 pixels works best.
- Pick the Preview/download size: 16, 32, 48, 180 (Apple touch icon), 192 or 512 pixels.
- Leave Fit image into a square canvas ticked to keep the whole logo visible with padding. Untick it to crop the logo to fill the square.
- Press Generate icon and check the preview at actual size.
- Press Download selected PNG, or use the size links to download the other sizes.
Tips for better results
- Download at least 32, 180, 192 and 512. That covers browser tabs, iPhones and Android installs.
- Check the 16-pixel preview. If your logo is unreadable there, simplify it or use only the symbol instead of the full wordmark.
- A transparent background works well on tabs. For app icons on phones, a solid background colour often looks neater.
- Name files clearly, for example favicon-32.png and apple-touch-icon.png.
Adding the icons to your site
Place the files in your site's root folder and add lines like these inside the head of your pages: a link with rel="icon" type="image/png" sizes="32x32" pointing to the 32-pixel file, a link with rel="apple-touch-icon" pointing to the 180-pixel file, and 192 and 512-pixel icons in your web app manifest. This generator outputs PNG files, which every current browser accepts for favicons.
Frequently asked questions
Do I need an .ico file?
Not for modern browsers. A 32 x 32 PNG referenced with a link tag works everywhere current.
Why does my icon look blurry?
The source was probably small or detailed. Use a larger, simpler logo.
Is my logo uploaded?
No. The icons are drawn in your browser.
Open the Favicon & App Icon Generator →
Related guides and tools
Image Converter
Convert images between JPG, PNG and WebP in your browser.
Read the guide · Open the toolImage Resizer
A practical guide to resizing photos to exact pixel dimensions in your browser, including aspect ratio, enlarging and the right size for web and forms.
Read the guide · Open the toolImage Compressor
Learn how to reduce the file size of JPG, PNG and WebP photos in your browser without uploading them, and how to choose the right quality setting.
Read the guide · Open the tool