How to Add a Favicon to Your Website (HTML, WordPress & Shopify)

A favicon is a small detail that makes a site look finished. Without one, browsers show a generic blank icon in the tab, and your site is harder to spot among a dozen open tabs or a long list of bookmarks. The good news: adding one takes about five minutes, whatever your site is built with.

Step 1: Create your favicon files

Start with a square image at least 512 × 512 px — your logo mark, an initial, or a simple shape. Then export:

• favicon.ico containing 16, 32, and 48 px sizes
• apple-touch-icon.png at 180 × 180 px
• icon-192.png and icon-512.png if your site uses a web app manifest

The quickest way is the free Pixlory Favicon Maker: upload your image, crop it to a square, then download favicon.ico and all the PNG sizes you need. Not sure which sizes you need? Our favicon sizes guide explains each one.

Step 2: Add the favicon to your site

Plain HTML sites

1. Upload favicon.ico and apple-touch-icon.png to the root folder of your site (the same folder as your home page's index.html).
2. Add these lines inside the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

3. Save, upload, and reload your site.

Most browsers also check /favicon.ico automatically, but adding the <link> tags makes it explicit and lets you control exactly which file is used.

WordPress

WordPress calls the favicon a Site Icon and generates the different sizes for you.

1. Prepare a square image of at least 512 × 512 px.
2. In classic themes, go to Appearance → Customize → Site Identity and choose Select site icon.
3. In block themes, depending on your WordPress version, look for Site Icon under Settings → General, or open the editor and use the Site Logo block's "Use as site icon" option.
4. Crop if asked, then Publish or Save.

If a plugin or your theme also outputs favicon tags, you may end up with two different icons. Use only one method.

Shopify

1. In your Shopify admin, go to Online Store → Themes and click Customize on your live theme.
2. Open Theme settings (the gear or brush icon) and find the Logo or Favicon section — the exact name depends on your theme.
3. Upload a square image. Shopify recommends a small square image such as 32 × 32 px, but uploading a larger square (for example 512 × 512 px) keeps it sharp on high-resolution screens.
4. Click Save.

Other site builders

Wix, Squarespace, Webflow, and most other builders have a favicon or "browser icon" field in the site settings. Upload a square PNG of at least 512 × 512 px and the builder handles the rest.

Step 3: Check that it works

Open your site in a new tab and look at the tab icon. Then check it on your phone, and try adding the site to your home screen to see the apple-touch-icon.

My favicon isn't showing — how do I fix it?

Browsers cache favicons aggressively, so the old icon (or no icon) often sticks around after you change it. Try these in order:

1. Hard refresh the page: Ctrl + Shift + R on Windows, Cmd + Shift + R on Mac.
2. Open the icon directly at yoursite.com/favicon.ico. If you get a 404, the file is in the wrong folder.
3. Add a version number to the link so browsers fetch the new file: href="/favicon.ico?v=2".
4. Check for duplicates. View your page source and search for rel="icon". If there are several, remove the old ones.
5. Wait for Google. The favicon in search results only updates when Google recrawls your site, which can take days or weeks.

Final checklist

• Square image, at least 512 × 512 px to start
• favicon.ico (16, 32, 48 px) in the site root
• apple-touch-icon.png (180 × 180 px)
• Only one set of favicon tags in your <head>
• Tested in a fresh tab and on mobile

Create all of your favicon files in seconds with the free Pixlory Favicon Maker — no sign-up, and your image never leaves your browser.