How to Add an Icon to Browser Tabs with WordPress

If you look at the browser tab open for this page right now, you’ll see the Compete Themes logo next to the title. This image is called a “favicon” (short for “favorite icon”).

Adding a favicon with WordPress used to be a pain due to caching and cross-browser support issues. However, WordPress 4.3 made it incredibly easy with the Site Icon feature.

How to add a Favicon with WordPress

The first step is to visit the Customizer (Appearance > Customize). Once there, click on the Site Identity section at the top.

screenshot of the site identity section
Showing off the awesome Founder theme

In the Site Identity section, you’ll see an option to upload a “Site Icon”. WordPress calls it a “site icon“, but the rest of the world refers to this as a favicon 😉

This is where you’ll add your favicon, but before you move on you’ll need an image to upload.

Create your favicon

WordPress recommends a square 512 x 512px image. If you don’t already have an image, go ahead and create one now using your favorite graphics program.

Any image smaller than 512 x 512px will get stretched, or pixellated, and non-square images are okay, but they will get cropped.

Tip: Make sure to export your image as a PNG, so the background can be transparent. Otherwise, you’ll end up with a white square in the background of the image.

Upload your favicon

Now that you have your image, return to the Site Identity section in the Customizer, and click the Select Image button.

Press the Upload Files tab in the top-left corner, and drag-and-drop your favicon image into the popup. Once the image loads, press the Select button in the bottom-right corner.

GIF of a favicon being added

If you upload an image that is not perfectly square, you will be asked to crop the image before you can select it. Once you save & publish in the Customizer, your favicon will be added.

Admire your beautiful browser tab image

Your site icon will immediately show up in browser tabs on laptops, tablets, and mobile devices.

While there have been some useful plugins for adding favicons over the years, the WP team did a fantastic job integrating this feature into the Customizer. It couldn’t be easier.

Have any questions about favicons with WordPress? Post in the comments below.

Related Posts

4 Comments

  1. Rand Winburn Rand Winburn

    Ben: My favicon does not show up on my home page. It does show on posts pages. How can I get it to show up on my home page.

    • Ben Sibley Ben Sibley

      Hey Rand,

      I just checked your site and was able to see the Favicon on the homepage. This likely means the favicon is cached in your browser. Try clearing your browser’s cache and checking the site again to see if it then appears.

  2. Rand Winburn Rand Winburn

    Got it. Thanks again, Ben!

  3. Sarah Sarah

    THANK YOU!! I searched all over to find this information and no one provided such an easy solution like you have. I appreciate it! 🙂 My website site now has a favicon!!

Post a comment

Your email address will not be published. Required fields are marked *