PNG Favicon Generator: Six Sizes and the HTML Tags

Upload one image and download favicon PNGs at 16, 32, 48, 180, 192 and 512 pixels, each already named the way the link tags expect.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Fill in the settings to see your result here.

Your result appears here instantly — nothing is uploaded.

Quick answers

What size is a favicon?: The classic browser tab favicon is 16x16 pixels, with 32x32 used on high-density screens and in taskbars. A modern site also supplies 180x180 for the iPhone and iPad home screen, and 192x192 and 512x512 for Android and installable web apps.
Can a favicon be a PNG instead of an ICO file?: Yes. Every current browser accepts a PNG favicon declared with a link tag such as rel="icon" type="image/png". An ICO file only matters for very old browsers and for requests made straight to /favicon.ico when a page has no icon tag.
What size is apple-touch-icon.png?: 180x180 pixels. That is the size iPhones use when a site is added to the home screen, and iPads scale it down. iOS does not show transparency in this icon, so it should have a solid background.
What image should I start from to make a favicon?: A square image of at least 512x512 pixels, because every size is scaled down from it. A smaller source still works, but the 512x512 file will be an enlargement and look soft. Simple shapes with strong contrast survive the 16x16 size best.
Where do I put favicon files on my site?: In the root folder, next to your home page, so each file answers at an address like /favicon-32x32.png. The generated tags use those root paths. If you store the files elsewhere, edit the href values to match.
Does this tool create a favicon.ico file?: No. It produces six PNG files and nothing else. If you need favicon.ico for legacy browsers, convert the 32x32 or 48x48 PNG with a tool that writes the ICO container format.

Why use Favicon Generator

Upload a logo or any other image and this tool draws it at six square sizes: 16x16, 32x32, 48x48, 180x180, 192x192 and 512x512 pixels. Each one downloads as a PNG with its conventional filename, such as favicon-32x32.png or apple-touch-icon.png, and a block of five link tags is ready to copy into the head of your page. A source that is not square is scaled to fit and centred, with a background colour you choose filling the rest. The work is done by your browser on your own device. The output is PNG only: there is no favicon.ico, SVG icon or web manifest file.

Favicon sizes this generator creates and where each one is used

All six files are square PNGs. The filename is what you get on download.

Size	Filename	Used for	In the generated tags
16x16	favicon-16x16.png	Browser tabs on standard-density screens	Yes, rel="icon"
32x32	favicon-32x32.png	Tabs on high-density screens, taskbars and shortcut lists	Yes, rel="icon"
48x48	favicon-48x48.png	Desktop shortcuts and site icons shown beside search results	No, add your own tag if you want it
180x180	apple-touch-icon.png	iPhone and iPad home screen	Yes, rel="apple-touch-icon"
192x192	android-chrome-192x192.png	Android home screen icon	Yes, rel="icon"
512x512	android-chrome-512x512.png	Splash screens and install prompts for web apps	Yes, rel="icon"

To use the 48x48 file, add: <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

The favicon HTML code the tool gives you

These five lines go between <head> and </head> on every page. The paths assume the files sit in the site root.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

How a non-square image is fitted into each icon

The image is scaled by the smaller of size / width and size / height, then centred. Whatever is left over is filled with the background colour.

Square 512x512 logo

Source 512 x 512, background white

The logo fills every icon edge to edge. The 512x512 file is drawn at original size and the other five are scaled down.

Wide 1200x600 wordmark

Source 1200 x 600, background white

In the 32x32 icon the artwork is 32 x 16 px with 8 px bars above and below. In the 180x180 icon it is 180 x 90 px with 45 px bars.

A wordmark this wide is only 8 px tall at 16x16. Crop to a square symbol first.

Portrait 800x1000 illustration

Source 800 x 1000, background #0f172a

In the 192x192 icon the artwork is 153.6 x 192 px with 19.2 px bars of the dark colour on the left and right.

16:9 screenshot, 1920x1080

Source 1920 x 1080, background white

In the 512x512 icon the artwork is 512 x 288 px with 112 px bars above and below. At 16x16 it is 16 x 9 px.

What is not included: favicon.ico, SVG, the manifest and transparency

The background colour is painted across the whole square before the image is drawn, so the icons are never transparent. A logo on a transparent background comes out on white unless you pick another colour. That suits the apple-touch-icon, which needs a solid background anyway, but it means a tab icon cannot blend into a dark browser theme. Choose the colour your logo is meant to sit on.

No favicon.ico is produced. Browsers ask for /favicon.ico on their own when a page declares no icon, so without the link tags, or on pages such as raw PDF or image URLs that have no head section, visitors see the default blank icon.

No site.webmanifest is written either. Android and installable web apps read their icons from that file, so if you want the 192 and 512 pixel icons used on install, create a manifest that lists them: an icons array with one entry per file, each giving src, sizes and type image/png, then link it with rel="manifest".

The files download one at a time, not as a ZIP, and there is no SVG output or separate dark-mode icon.

Making a logo readable at 16x16

Use the symbol or first letter, not the full name. Text set smaller than about 10 px tall turns into a smudge.
Leave little or no padding in the source. At 16 pixels, a 10 percent margin on each side costs you roughly 3 of them.
Prefer two or three flat colours with strong contrast over gradients and thin outlines.
Pick a background that differs from both light and dark tab bars, or accept white and check it in both themes.
Start from 512x512 or larger. A crisp large source gives the browser more to average when it scales down.
After deploying, reload with the cache bypassed. Browsers hold on to favicons longer than most files.

Using Favicon Generator

1
Under Source image (square works best), choose your logo or icon. Files up to 30 MB are accepted.
2
Set Background for non-square/transparent areas. It defaults to white and is painted behind the image in every size.
3
Check the six previews, paying most attention to 16x16 and 32x32, where fine detail disappears first.
4
Download each PNG. The filenames are already the ones the generated tags refer to.
5
Copy the block labelled HTML to add inside <head> and paste it into your page template.
6
Upload the PNG files to the root folder of your site, so that /favicon-32x32.png and the others resolve.

Answers to common questions

Why do I need so many favicon sizes?

Each place an icon appears asks for a different pixel size. A tab uses 16 or 32 pixels, an iPhone home screen uses 180, and an Android install uses 192 and 512. Supplying each size means the device picks a file made for the job instead of stretching a small one.

Do I need to rename the downloaded files?

No. They download as favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, android-chrome-192x192.png and android-chrome-512x512.png, which are the names the copied tags point to.

Can I upload a JPG, WebP or SVG as the source?

JPG, PNG, WebP and GIF sources work in every current browser, and the output is always PNG. SVG and other less common formats depend on whether your browser can decode them; if it cannot, you get a message that the file could not be read as an image.

Is my logo uploaded to a server?

No. The file is read and resized by the canvas feature in your own browser, and the six PNGs are created on your device. Nothing is sent anywhere.

Why does my new favicon not show up?

Usually caching. Force a reload, open the icon address directly to confirm the file is there, and check that the href paths in the tags match where you uploaded the files. Some browsers only refresh a tab icon after the tab is closed and reopened.

Why does my icon look blurry at the small sizes?

Scaling a detailed image to 16 or 32 pixels averages many source pixels into each output pixel, so thin lines and small text blur away. Simplify the artwork, remove padding, and generate again from the simplified version.

Can I make a favicon from a photo?

Yes, any image works, but photos rarely read well at tab size. Crop tightly to one recognisable subject and make it square first so that no background bars are added.