How to Create a Favicon From a Logo (All Sizes Explained)

To create a favicon from a logo, start with a square logo (SVG, or a PNG at 512x512 or larger). Export a favicon.ico, ideally with 16, 32 and 48px versions inside, then add a 180x180 Apple icon and 192/512 PNGs for the manifest, and link them in your HTML. That's five files (ICO, SVG, Apple icon and two manifest PNGs), not a dozen. Here is how to make each one and where it goes.

The short answer: the favicon files you need

The modern minimal set is one ICO, one SVG, one Apple touch icon and two manifest PNGs. Separate 16/32/48 PNG files and Microsoft tile images are unnecessary when you have a multi-size ICO.

Many generators hand you a ZIP with a dozen files, most of which no browser asks for. A 512x512 master is plenty, so you never need to go bigger.

Favicon sizes explained: what each one is for

favicon.ico (16, 32, 48)

ICO is a container that holds several bitmaps in one file. The usual quality bundle is 16, 32 and 48px; add 256 only if you care about large Windows icons.

It's still worth having. Crawlers, feed readers and link-preview bots commonly fetch /favicon.ico from the site root by default. Chromium behaves differently: in a published request test, it fetched /favicon.ico only when the page declared no icon. With an SVG declared, it requested only the SVG, and it preferred the ICO over standalone PNG links.

Skip the standalone 32x32 PNG. Some guides list it, but that test showed it going unused when an ICO is present. The test only covered Chromium, so Firefox and Safari behaviour is untested.

favicon.svg

SVG favicons work in Chrome 80+, Firefox 41+ and Edge. Safari support is more recent and patchy, and SVG favicons don't work in Safari on iOS. Treat SVG as a supplement, never a replacement for the ICO.

apple-touch-icon (180x180)

180x180 is the Retina iPhone size (60pt at 3x). One 180px file is enough: iOS scales it for other devices, including iPad.

Manifest icons (192 and 512)

Android Chrome and installed web apps read icons from the web app manifest. The 192px file is the launcher icon and the 512px file is the install/splash icon.

What Google Search needs

Google reads the icon from your home page. Any valid favicon format works, including ICO, PNG and SVG. It must be square and at least 8x8px. Google recommends larger than 48x48, in multiples of 48, and you get one icon per hostname. If the icon is unsuitable, Google swaps in a generic globe.

Prepare your logo before you export

Square, large and transparent

The best source is an SVG. Otherwise use a square PNG at 512x512 or larger. Only downscale: going from 1024px to 16px keeps edge detail, going from 32px to 16px doesn't, and scaling up just makes blur.

If your logo isn't square, crop or pad it first with Tool Cloud's image crop and resize tools.

Keep the PNG transparent and in sRGB. Don't flatten it or add a background "just in case".

Can a favicon be a JPG? Yes, but PNG or SVG is cleaner. JPG has no transparency, so a JPG to ICO conversion gives you a filled square, and compression artifacts show up at tiny sizes.

Simplify for 16 pixels

A full logo with a tagline turns to mush in a browser tab. What works:

• One bold mark with strong contrast
• Two or three flat colours
• At most one or two bold characters, no wordmark

Test at actual size. If you can't recognise it in half a second, simplify more.

Tip: use two images for the best ICO

For maximum quality, use simplified artwork for the 16 and 32 sizes and more detailed artwork for 48 and 256. Build two ICOs, then use the simplified one as favicon.ico and the detailed one for Windows shortcuts. It's optional, and a single well-simplified logo is fine for most sites.

Convert your logo to ICO and the rest of the pack

Option 1: generate a favicon pack

Open Tool Cloud's Favicon Generator, upload your square logo and download the ZIP of standard favicon sizes. Use the files that match the table above, and create any missing ones (such as the SVG or the 192/512 PNGs) separately. Ignore any files your HTML won't reference.

Option 2: convert a logo to a single ICO

If you only want favicon.ico, use the Image to ICO converter. Upload your logo and convert, then rename the result to favicon.ico. Check which sizes the ICO contains; if it lacks a 16 or 32px version, use the generator above instead.

Making the 180, 192 and 512 PNGs

Resize your square master to 180x180, 192x192 and 512x512 and name them apple-touch-icon.png, icon-192.png and icon-512.png.

For the Apple icon, use an opaque background with the logo centred and padded. iOS doesn't respect transparency and rounds the corners itself, so don't pre-round them. Always supply your own solid background rather than relying on what iOS fills in.

Where each file goes in your HTML

The HTML snippet

Upload all files to your site root, then add this to the <head>. The sizes attributes follow a write-up on how Chrome chooses icons:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

A few notes:

• Use rel="icon". rel="shortcut icon" is legacy; "shortcut" is unregistered and redundant.
• Browsers choose by type, not position, so order isn't critical. The type="image/svg+xml" attribute lets browsers that don't support SVG skip it and use the ICO.
• Give the ICO a concrete size and the SVG sizes="any". Putting any on the ICO can make Chrome prefer it over the SVG.

The web app manifest

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chrome's install criteria want both the 192px and 512px icons. Avoid "purpose": "any maskable" on a single file. For a maskable icon, make a separate file with the artwork inside the centre safe zone (about 409x409 of the 512 canvas).

Add a favicon in WordPress, Squarespace, Shopify and Wix

Platforms rename menus, so check what your dashboard says.

• WordPress: Appearance, Customize, Site Identity, Site Icon. Upload a 512x512 PNG.
• Squarespace: Design, Browser Icon. A 300x300 square PNG works (ICO is also accepted).
• Shopify: Theme Settings, Favicon. Upload a square 512x512 PNG.
• Wix: Settings, Website settings, Favicon (this may require a premium plan).

Why your favicon looks blurry or won't update

Blurry or filled-square icons

Blur usually comes from upscaling a small raster or from an over-detailed logo at 16px. Fix it with an SVG plus 32px or larger in the ICO, and never scale a 16x16 up. A solid square behind your logo means the source had no transparency, often a JPG.

Old icon still showing

Browsers cache favicons for days or weeks. Try these in order:

1. Hard refresh the page.
2. Open /favicon.ico directly and refresh there.
3. Add a query string, such as /favicon.ico?v=2.
4. Check in a private window.
5. Confirm the file returns HTTP 200, and clear your CDN cache.

iOS home-screen icons are cached per shortcut, so existing shortcuts won't change and users must re-add the site. For a rebrand, use a new filename.

Google Search not showing it

Updates take days to weeks, and changing the icon's URL can delay them. Make sure your home page references the icon with rel="icon" and that it meets the size rules above. There's no documented hard KB limit; Google's rules are about dimensions.

In practice

Start from a square master of 512px or more and simplify it for tab size. Upload the files, then paste the HTML snippet and manifest into your site, and double-check the manifest link is there. Finally, look at the result at 16px: if the mark isn't clear, simplify it again.

Frequently asked questions

Do I still need a favicon.ico in 2026?

Yes. Browsers, feed readers and link-preview bots request /favicon.ico from the site root regardless of your HTML tags, so it is cheap insurance. Bundle 16, 32 and 48px in one file.

Can a favicon be a JPG?

Technically yes, but PNG or SVG gives a much cleaner result. JPG has no transparency and compression artifacts, and photos carry too much detail for 16x16 pixels.

What size should a favicon be for Google Search?

Google needs a square image of at least 8x8px and recommends larger than 48x48px. SVG is not supported there, so keep an ICO or PNG declared with rel=icon on your homepage.

Do I need separate 16x16, 32x32 and 48x48 PNG files?

Generally no. A multi-size ICO covers those sizes, and a Chromium request test found standalone PNGs unused when an ICO was present. Firefox and Safari were not tested.

Why isn't my new favicon showing?

Browsers cache favicons aggressively for days or weeks. Try a hard refresh, open /favicon.ico directly, add a ?v=2 query string, or check in a private window.