Favicon Sizes Explained and How to Add a Favicon to Your Website

The short answer

For most websites you need a 32×32 and a 16×16 PNG for browser tabs, a 180×180 PNG as the Apple touch icon, and 192×192 and 512×512 PNGs if your site has a web app manifest. Make all of them from one square logo with the Favicon Generator, upload the files to your site's root folder, and add the matching <link> tags inside <head>. For Google Search, the icon must be square and Google recommends making it larger than 48×48 pixels.

Which sizes are used where

Size (px)	Where it shows
16×16	Browser tabs and bookmarks on standard screens
32×32	Browser tabs on high-density screens, taskbar shortcuts
48×48	A general-purpose larger icon
64×64 and 128×128	Extra larger sizes, handy as source images for other icon needs
180×180	Apple touch icon, used when someone adds your site to an iPhone or iPad home screen
192×192	Android home-screen icon, listed in a web app manifest
512×512	Splash screens and install prompts for web apps, also listed in the manifest

The Favicon Generator creates all eight of these sizes (16, 32, 48, 64, 128, 180, 192 and 512) as PNG files in one go.

What Google Search needs

Google's favicon guidelines, in Search Central documentation, say the favicon must be square (1:1 aspect ratio) and at least 8×8 pixels, and recommend using one larger than 48×48 pixels so it looks good on different surfaces. In practice:

• Link the icon from your home page with a <link rel="icon"> tag.
• Make sure the icon file is not blocked by robots.txt, because Google has to be able to fetch it.
• Be patient. Changes appear only after Google recrawls your home page, which can take days or weeks.

How to make your favicons

Start with a square image. A logo mark or a single letter works better than a full logo with small text, because at 16 pixels wide words become unreadable. The generator draws your image into a square, so a wide or tall image will be stretched. Crop it square first with Crop Image if needed.

Open the Favicon Generator and click Choose image. A PNG with a transparent background gives you the most options.

Pick a background colour: white, black, transparent, or any colour from the picker. Transparent lets the icon sit on whatever colour the browser tab uses.

Set the padding slider (0 to 30 percent of the icon width; the default is 10). Padding adds space around your logo so it does not touch the edges. Home-screen icons usually look better with some padding; tiny tab icons look better with little or none.

Click Generate all favicon sizes. Previews of the small sizes (16 to 64 px) appear. Look at the 16 px version closely: if you cannot recognise it, simplify the design.

Click a preview to download that single size, or click Download all 8 sizes (PNG). Your browser may ask permission to download several files at once; allow it.

The files are named favicon-16x16.png, favicon-32x32.png and so on, up to favicon-512x512.png.

Adding the favicon to your site

Step 1: rename and upload the files

Upload the PNGs to the root folder of your website (the same folder as your home page). The generator's HTML snippet expects these names:

• favicon-32x32.png and favicon-16x16.png: keep as they are.
• favicon-180x180.png: rename it to apple-touch-icon.png.

Important: the snippet also includes a line for favicon.ico. The generator makes PNG files only, not an ICO file. Either delete that line, or create an ICO file with another tool and upload it as favicon.ico. Modern browsers use the PNG links, so many sites skip the ICO.

Step 2: paste the tags into the head

Copy the snippet from the tool and paste it inside the <head> of every page (or your site's shared layout or theme header). Without the ICO line, it looks like this:

• <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">

The leading slash in /favicon-32x32.png means "from the site root". If you upload the files into a subfolder such as /icons/, change the paths to match.

Step 3 (optional): the web app manifest

If your site has a manifest.json or site.webmanifest file, list the 192 and 512 PNGs in its icons array with their sizes and type. Sites without a manifest can skip the two large sizes.

Using WordPress or a site builder?

Most platforms have their own setting, often called "Site Icon" or "Favicon", where you upload a single square image and the platform creates the sizes. In that case upload your 512×512 PNG there instead of editing HTML.

Troubleshooting

My new favicon does not appear in the browser tab

Browsers cache favicons aggressively. Try a hard refresh, open the site in a private window, or open the icon URL directly (for example yoursite.com/favicon-32x32.png) to confirm it is uploaded. If the URL shows a 404 error, the file is in the wrong folder or has a different name.

The old favicon still shows in Google

Google updates favicons only after recrawling your home page. Check that the <link rel="icon"> tag is on the home page itself, that the image is square, and that robots.txt does not block it. Then wait.

The icon looks blurry or squashed

A squashed icon means the source image was not square. Blurry small sizes usually mean the design has too much fine detail. Use a simpler mark, increase contrast, and reduce padding for the 16 and 32 px sizes.

The icon has a white box around it on dark tabs

You generated it with a white background. Regenerate with the transparent option and a PNG source that has a transparent background.

Related tools

• Convert an SVG logo to a large PNG first with SVG to PNG; see how to convert SVG to PNG at high resolution.
• Generate the rest of your <head> tags with the Meta Tag Generator.