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