How to Make a Favicon (2026): Sizes, Formats and How to Add It to Your Site

How to make a favicon: start from a simple square image (your logo mark or one letter) at 512×512 pixels, then export it as a favicon.ico (16, 32 and 48 px inside), a 180×180 Apple touch icon and 192 and 512 px PNGs for Android. Upload the files to your site's root folder and add the link tags, or use your store builder's favicon setting.

A favicon is the small icon in browser tabs, bookmarks, phone home screens and next to your site name in Google's mobile results. It is tiny, but it is often the first piece of your brand a shopper sees, and a missing one makes a store look unfinished. This guide covers the sizes you need, which file format to use, how to design an icon that reads at 16 pixels, and how to add it in Shopify, WordPress and Wix.

What size should a favicon be?

There is no single favicon size; you need a small set, all made from one square master image of at least 512×512 pixels. Browsers pick the size that fits the place they show it.

Favicon sizes, Google's favicon guidelines and the store-builder settings were checked in October 2026. Marketplaces change their rules, so confirm the current requirements in your seller dashboard before you upload a large batch.

If you only make one file, make the 512×512 PNG. It is what most store builders ask for, and they scale it down themselves.

Should a favicon be ICO, PNG or SVG?

Use favicon.ico as the safe default, add PNGs for phones, and treat SVG as an optional extra. Each format has a job:

Google's search documentation lists ICO, PNG, GIF, JPEG, BMP, TIFF and PPM as accepted favicon formats, so keep a raster version even if you also serve an SVG.

How do you design a favicon that works at 16 pixels?

Simplify until it reads as a blur: a 16-pixel icon has room for one shape and two colors at most.

• Use a mark, not the full logo. The first letter of your brand, a monogram or the symbol part of your logo. Words become grey smudges at tab size.
• High contrast. A dark letter on a light square, or the reverse. Check it in both a light and a dark browser tab, since many shoppers use dark mode.
• Fill the square. Leave only a little padding. Thin marks with big margins look tiny next to other tabs.
• Square, rounded or circle? Any works in a browser tab. iOS rounds the corners of the Apple touch icon itself, so give that one a solid background rather than transparency.
• Brand colors. Use your main brand color for the background or the mark so the icon matches your store. Our guide to choosing brand colors covers how to pick them.

How to make a favicon for free

You can make every file in a couple of minutes with a free browser tool, without design software. Our free favicon generator works like this:

1. Pick a source. Upload a PNG, SVG, JPG or WebP logo, or type a letter or two, or paste an emoji.
2. Style it. Choose square, rounded or circle, a color or transparent background, padding and font. A live preview shows the icon in a light and a dark browser tab and at every size.
3. Download the ZIP. You get favicon.ico (16, 32 and 48 px inside), favicon-16x16.png, favicon-32x32.png, a 180 px apple-touch-icon.png, 192 and 512 px Android icons, site.webmanifest and a text file with the HTML code.
4. Install it using the steps for your platform below.

The tool runs in your browser and your logo is never uploaded. If your logo isn't square, pad it to a square first with the square image maker so nothing gets squashed.

How do you add a favicon in Shopify?

In Shopify, the favicon is a theme setting: upload one square image and Shopify handles the rest.

1. From your Shopify admin, go to Online Store > Themes.
2. Next to your live theme, click Customize.
3. Click the gear icon for Theme settings, then open Logo or Favicon (the name depends on your theme version).
4. Under Favicon image, click Select image and upload your square PNG.
5. Click Save.

Shopify recommends a 32×32 px square and scales larger uploads down to 32×32, so use bold, simple artwork. Editing an unpublished theme won't change the live store until you publish it.

How do you add a favicon in WordPress?

WordPress calls the favicon a Site Icon, and on WordPress 6.5 and later it lives in Settings > General.

1. In your dashboard, go to Settings > General.
2. Find Site Icon and choose or upload an image.
3. Crop it if prompted, then click Save Changes.

WordPress recommends a square of at least 512×512 px. On older versions or some classic themes the setting is under Appearance > Customize > Site Identity. WooCommerce stores use the same WordPress setting.

How do you add a favicon in Wix?

In Wix, the favicon is in your site's website settings and needs a Premium plan with a connected domain.

1. In your site's dashboard, go to Settings.
2. Click Website Settings.
3. Under Favicon, click Upload Image and choose your file.
4. Click Save.

Wix's help page asks for a square that is a multiple of 48 px (48, 96, 144 and so on) unless you upload an SVG, so a 192 or 480 px PNG works well. Menu names in Wix change from time to time; if you can't find the option, search "favicon" in your dashboard.

How do you add a favicon to a custom website?

Upload the files to your site's root folder and paste the link tags into the <head> of every page.

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="manifest" href="/site.webmanifest">

The site.webmanifest file lists the 192 and 512 px icons for Android. Browsers also look for /favicon.ico at the root by default, so keep that file there even if you add others.

What are Google's favicon guidelines?

Google shows your favicon next to your site in search results if it is square, crawlable and represents your brand.

• The icon must be square (1:1). Google's minimum is 8×8 px, but it recommends larger than 48×48 px so it looks sharp.
• Both the favicon file and your home page must be crawlable; don't block them in robots.txt.
• Use one favicon per hostname, referenced with rel="icon" (or apple-touch-icon) on the home page.
• Keep the URL stable. Changing it often can delay updates.
• The icon should represent your brand. Google replaces inappropriate icons with a default one.

After a change, Google can take days or weeks to show the new icon in results. Browsers also cache favicons heavily, so test in a private window before assuming it didn't work.

Favicon checklist

1. Master image is square and at least 512×512 px.
2. The design is one simple mark or letter, readable at 16 px.
3. It looks right in both light and dark browser tabs.
4. favicon.ico sits at the site root, or the image is uploaded in your store builder's setting.
5. Apple touch icon (180 px) has a solid background.
6. The home page and icon aren't blocked from crawling.
7. You checked it in a private window and on a phone.

Your favicon is one piece of a consistent brand. For the rest, see how to create a brand kit, and for other site graphics, our website image sizes guide.

Frequently asked questions

What size should a favicon be?

Make a square master at 512×512 px, then export 16, 32 and 48 px versions in favicon.ico, a 180×180 Apple touch icon and 192 and 512 px PNGs for Android. Store builders usually take one square PNG and resize it for you.

Can I use a PNG as a favicon?

Yes. All modern browsers accept PNG favicons through a link tag, and Shopify, WordPress and Wix all accept PNG uploads. Keep a favicon.ico at the site root too, since some browsers and tools look for it by default.

Why is my favicon not showing?

Usually browser caching: open the site in a private window to check. Also confirm the file is at the path in your link tag, that it is square, and, in Shopify, that you edited the published theme. Google Search can take days or weeks to update.

How do I make a favicon from my logo?

Crop your logo to its simplest part, such as the symbol or first letter, place it on a square canvas, and export the standard sizes. A free favicon generator does the resizing and gives you every file plus the HTML code.

Do I need an SVG favicon?

No. An SVG favicon is a nice extra for modern browsers because it stays sharp and can adapt to dark mode, but you still need ICO or PNG files as a fallback, and Google Search doesn't list SVG among its accepted formats.

Can I add a favicon to my Etsy or Amazon shop?

No. Marketplace shop pages show the marketplace's own icon in the browser tab. A favicon only applies to a website you control, such as a Shopify, WordPress or Wix store.