How to install a favicon in WordPress

A favicon (favorite icon or site icon) is the small icon in the browser tab next to the site title for browsers that support it. It can also be found in the bookmark list next to the page’s name, as well as in the history list. Some browsers use the favicon for the desktop icon as well.

Here’s what the favicon looks like for BryZar:

BryZar favicon

Favicons are great for brand recognition. These are usually either 16 x 16 or 32 x 32 but can be other sizes as well, depending on the platform you use for your website. Though small, these can help to boost your brand awareness, professionalism, and credibility.

Generally, the favicon in ICO format is recognized by more browsers, as are PNG and GIF. However, various platforms may recognize a specific favicon format and size. It’s best to check with documentation before creating your favicon to ensure you have the proper format.

Wikipedia is a great resource to learn more about favicons. For our article, we are just covering the basics, installing a simple favicon in WordPress. More complex favicons would require more research or the assistance of a developer.

How to install a favicon in WordPress

For this tutorial, we are using the default Twenty Twenty-Three theme. Your theme may have other options. We will use the editor for this as it’s the easiest method to upload the favicon.

Step One: Editing the Header

  • In your WordPress admin, navigate to Appearance > Editor:
WordPress theme editor
  • Click in the Header to select it:
Click header in WordPress
  • Click “Edit” to edit the header.
Edit site header in WordPress

Step Two: Adding a Site Logo

  • Click your site title to open options:
Click WordPress site title
  • Click the “Site Title” button:
Click site title button WordPress
  • Choose the “Site Logo” option:
Choose Site Logo WordPress
  • Click the upload icon to upload your logo or choose from an image in your media library.
Upload site logo WordPress

Step Three: Using the Same Icon for the Favicon

  • On the right, enable “Use as Site Icon” if you want to use the same icon for your site icon as you are using for the site logo. See step four below if you want to use a different icon for the site icon.
Use same favicon for WordPress
  • Save the page and clear browser cache if you don’t see the favicon in the browser tab:
View favicon in browser

Step Four: Using a Different Icon for the Favicon (Optional)

  • To use a different icon for your site icon, click “Site Icon settings” on the right:
Use a different favicon in WordPress
  • Click “Select Site Icon” to upload one.
Select site icon editor
  • Upload your chosen icon and Publish to save.

That’s all there is to it! You should see the favicon in your browser tab. If you don’t, try using another browser or clear your browser cache.