Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Look at the browser tab right now.
See the image left of the page title?
That’s called the “favicon.”
Your favicon shows up in:
- Browser tabs
- Bookmark bars
- Mobile apps
And recently, it even started showing up in the Google search results!
Needless to say, your favicon is a very important part of your website. That’s why in this tutorial, you’ll learn the three easy steps to add your own favicon to WordPress
Watch the video
You can watch the video tutorial if you prefer that over the written blog post below:
Subscribe to the Compete Themes Youtube channel
How to add a Favicon with WordPress
The first step is to visit the Live Customizer (Appearance > Customize).
Inside the Customizer, click on the Site Identity section at the top.
In the Site Identity section, you’ll see an option at the bottom called, “Site Icon.”
This is where you’ll add your favicon, but before you move on you’ll need an image to upload.
Create your favicon image
WordPress recommends a square image that is 512px x 512px. If you know how to use a graphics editor like GIMP, Photoshop, or Sketch, you can create this image yourself.
If you’re not sure how to create the image on your own, then check out favicon.io. It’s a free site that will allow you to quickly create a custom favicon image.
Click on the “Generate from Text” button and you’ll be taken to a simple editor screen.
You can change the text, colors, font, and font sizes in just a minute to create your own image.
It won’t be the most professional image, but it will look nice. Not to mention, having a simple favicon image is way better than having no favicon at all.
When you download your favicon, you’ll get a zip file. There’s one image inside that is 512px – make sure to use that one on your site.
Once you have your image, you’re ready to upload it to your site.
Upload your favicon
Now that you have your image, return to the Site Identity section in the Customizer, and click the Select site icon 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 click the Publish button, your favicon will be added.
Admire your beautiful new favicon
Your site icon will immediately show up in browser tabs on laptops, tablets, and mobile devices once published.
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 these days.
If you want to keep improving your site’s design, check out my article on design tips to make your website look better:
9 Simple Design Rules to Make Your Website More Beautiful
Enjoyed this post? Use the buttons below to share it with someone else.
