In today’s tutorial, I’ll show you how you can easily and quickly set or change a favicon on your WordPress site. Read on to learn how!
What is a Favicon?
It’s likely that you already know what a favicon is, as you’re want to either set or change your WordPress site’s existing favicon.
However, for those of you that don’t know, a favicon acts as your website’s badge on web browsers and in mobile device home screens. If you have a bookmark bar, take a look at it right now. You’ll see an array of favicons displayed next to your bookmarked websites.
A favicon is the small image shown next to your website name in a web browser URL bar or bookmark bar.
What are we waiting for? Adding or changing a favicon can be done directly in the WordPress admin panel.
Log in to your WordPress site to add a favicon.
Add a New Favicon Using WordPress Customizer
Once you have signed in to WordPress, look over at the left hand side menu (usually with a black background).
Click on Appearance > Customize
You’re now looking at the Customize page in WordPress.
From here, click on Site Identity over in the left-hand menu. It’s the first link.
Now, the page won’t change, just the menu. You’re now looking at the Site Identity page in WordPress.
From here you can change your WordPress site’s title and tagline, but we’ll leave that tutorial for another day.
Under Tagline is a section called Site Icon. That’s another way of saying WordPress favicon!
Click the Select site icon button under the Site Icon section.
You’ll be looking at a popup window inside of WordPress, from which you can select or upload an image to act as your WordPress favicon.
A WordPress favicon is recommended to be 512 x 512 pixels. WordPress will scale the image down so it is the correct size when shown on your site.
Upload or Select an Image to Use as Your WordPress Favicon
Select or upload an image by dragging and dropping it inside of the window, then click the Select button in the lower right-hand corner of the popup.
Once you have selected the image to use as your site’s favicon, the last step is to double check that you are happy with it from the preview window.
Once you are happy with the look and feel of your brand new favicon, click the Publish button in the top left-hand corner.
Finally, let’s check to see that replacing or adding a favicon has taken effect. Load up a new browser tab or window and navigate to your site.
You may have to clear your browser’s cache or wait some minutes before you see any changes.
I saved my site to my bookmarks, so I could see the favicon displayed next to my WordPress site’s name. Like so:
So there you have it! Simple, quick, elegant, and no plugins used as promised. That was how you can change or add a favicon to your WordPress site.
See you next time!