Add a Favicon to WordPress

What a WordPress site icon is

The favicon of a WordPress site is its Site Icon: one square image that WordPress turns into the browser tab icon, the bookmark icon and the phone home-screen icon. You upload it once and WordPress writes the smaller sizes, so there is no separate 16 by 16 file to prepare.

• Site Icon is the WordPress setting that stores the image and generates the derivative sizes.
• Favicon is the general browser name for the same picture, in the tab and in bookmarks.
• Apple touch icon is the 180 by 180 version a phone uses when the site is saved to the home screen.

WordPress has carried the Site Icon setting since version 4.3, so a supported install always has the field. Only its location changes with the theme, which is the reason half the guides on this topic disagree with each other.

Prepare a square image before you upload

One rule decides whether the result looks right: the file has to be square. A wide logo banner that the browser crops becomes an unreadable strip at tab size, and no setting can repair that after the upload.

• At least 512 by 512 pixels, because WordPress needs that size for the home-screen tile.
• A 1:1 ratio, as PNG with a transparent background or as a flat JPG.
• A mark that fills the frame, with no wordmark or tagline.
• Two colours at most, because a detailed icon turns to mud at 32 pixels.

Name the file something you will recognise later, such as favicon-512.png. You upload it through wp-admin, so do not place it in a folder by hand and expect WordPress to find it.

Add the favicon on a classic theme

Classic themes keep the control in the Customizer. The whole job is one upload and one Publish click.

1. In wp-admin open Appearance, then Customizer.
2. Select Site Identity in the left panel.
3. Click Select Site Icon, or Change Image when one is already set.
4. Upload the square file or choose it from the Media Library, then click Select.
5. Crop to the square when the crop tool opens, or pick Skip Cropping if the image is already square.
6. Click Publish.

You know it worked when the Site Identity panel shows your image in the icon frame and a hard refresh of the site puts it in the browser tab. If the image uploads but the frame keeps the WordPress logo, the file was smaller than 512 pixels on a side.

Add the favicon on a block theme

Block themes move the same field to a different screen. From WordPress 5.9 the Site Icon sits in Settings, then General, and the Site Editor can also set it from the header.

1. Open Settings, then General, and find Site Icon.
2. Click Change Image, upload the square file and select it.
3. Alternatively open Appearance, then Editor, and select the Site Logo block in the header.
4. In the block settings sidebar turn on Use as site icon, then Save.

You know it worked when Settings, General shows the image next to Site Icon and the tab updates after a hard refresh. If Appearance, Editor is missing too, the theme is not a block theme and the Customizer route above is the right one.

Add a favicon in code when the theme hides the setting

Some themes strip the Site Identity section out. A child theme can print the icon tags itself, and the parent theme stays untouched so an update cannot wipe the change.

1. In File Manager open wp-content/themes and find the child theme folder. If there is none, create one with a style.css that names the parent theme.
2. Open or create functions.php in that child folder.
3. Add a function hooked to wp_head that echoes a link tag: add_action( 'wp_head', function () { echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/favicon-32x32.png' ) . '" sizes="32x32">'; } );
4. Upload favicon-32x32.png and favicon-180x180.png into the child theme folder beside functions.php.
5. Save, then reload the site and view the source.

You know it worked when the page source shows your own link tag with the child theme path. A PHP error after saving means a missing semicolon or quote; restore the previous functions.php from the file manager trash before trying again.

Why the old favicon still shows

The new file can be live while your tab still shows the old icon, because three caches hold it: the browser, the caching plugin or CDN, and the search index. Clear them in that order and stop when the tab changes.

1. Open the site in a private window. If the new icon appears there, only your browser cache is stale.
2. Purge the caching plugin, then the CDN cache if one sits in front of the site.
3. Hard-refresh the tab with Ctrl and F5, or Cmd and Shift and R on a Mac.

For the caching layer itself, the steps are in clear the WordPress cache. Search results are slower than the tab: Google keeps the icon it has until it recrawls the page, so a change can take days to appear there.

Confirm the icon is live

View the page source and read the head. A working Site Icon adds link tags that point at files in wp-content/uploads with sizes such as 32 by 32 and 192 by 192, plus an apple-touch-icon at 180 by 180.

1. Load the homepage and press Ctrl and U, or type view-source: before the address.
2. Search the source for rel="icon".
3. Open one of the file URLs it lists. The image should load, not return a 404.

No icon tags at all means the Site Icon was never saved. Tags that point at an old filename mean the cache is still serving the previous page, which is the section above. Tags that 404 mean the upload was deleted from the Media Library.

When to email support

Email support@webji.services when the Site Identity panel never appears, an upload fails with a permissions error, or the server keeps returning the old file after every cache clear. Include the domain, the theme name and the image size so the first reply can act on it.

Email support is 24/7 in Hindi and English, and the average first reply is under 60 minutes. The office phone is not a support line. On WordPress hosting the Site Icon file is served from the same account, so no extra setup is needed to publish it.