How to add a site icon in HTML

A site icon and a favicon are the same thing. The steps below cover a hand-built site first, then WordPress.

Add a favicon to an HTML site

1. Make the files. The generator further down gives you favicon.ico, PNGs at 16, 32, 180, 192 and 512 pixels, and a site.webmanifest file, in one zip.
2. Upload them to the root folder of your site, the same folder as your home page, so they load at addresses like https://example.com/favicon.ico.
3. Paste these tags inside the <head> of every page. If your site uses a shared header or layout file, paste them there once.

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

1. Publish, then open your site in a private window to see the icon.

The first line is the one Google's documentation uses. The PNG lines give browsers sharper choices: when there are several rel="icon" links, MDN says the browser picks one from their type, sizes and media. The apple-touch-icon line is for iPhones and iPads, which don't use rel="icon" for Home Screen icons. The manifest line points Android and Chrome to the 192 and 512 pixel icons.

Use rel="icon", not rel="shortcut icon". MDN says shortcut is non-conforming and authors shouldn't use it any more.

The shortest version that works

If you only want one file, put favicon.ico in your root folder. MDN notes that browsers request /favicon.ico on their own, and Apple's guide says iOS looks for /apple-touch-icon.png in the same way. Linking them explicitly is still better, because it protects you if those conventions change, and Google needs a link tag on your home page to pick up the icon for search results.

Add a site icon in WordPress

WordPress has its own Site Icon setting, and its documentation recommends using it instead of editing theme files. You don't need the HTML tags.

In WordPress 6.5 or later:

1. Upload a square image of at least 512 × 512 pixels to the Media Library. PNG is the recommended format; from the generator's zip, use android-chrome-512x512.png.
2. Go to Settings, then General.
3. Click Choose a Site icon and select the image.

In WordPress 4.3 to 6.4:

1. Go to Appearance, then Customize.
2. Click Site Identity.
3. Under Site Icon, click Select Image, then upload your square image of at least 512 pixels.

Favicon not showing?

Work through these in order:

• Open the icon directly. Visit https://yoursite.com/favicon.ico in your browser. If you get an error page, the file isn't where the tag says it is.
• Check the tag's place and path. The <link> must sit inside <head>, not in the body. A path starting with / means the site root; without it, the browser looks next to the current page.
• Clear the old icon. Browsers keep favicons for a long time. Open the site in a private window, or clear the browser's cache.
• Give Google time. Google says picking up a new favicon can take from several days to several weeks. The icon must be square, linked from your home page and not blocked by robots.txt for Googlebot-Image. Google shows one icon per hostname, and doesn't guarantee to show it at all.
• On WordPress, if you added tags by hand and also set a Site Icon, remove the hand-written tags so the two don't compete.

For the sizes and formats behind each file, see favicon specs. For the iPhone icon, see the Apple touch icon guide.