0,00 USD

No products in the cart.

Monday, April 12, 2021

How to Add a Favicon in WordPress

Zip wants his website to show the little icon that appears in the browser tab. Here's how to add a favicon (and site icon) in WordPress.

Home » WordPress and Blogging » Sloth Makes a Blog » Blog Basics » How to Add a Favicon in WordPress

Zip has now added a logo to his website header. He’s now ready to add a favicon. What’s a favicon? It’s that little image that appears in your browser tab to identify the website that’s open in the tab. Here’s more about it and how to add a favicon in WordPress as well as a site icon that will appear to represent your site on various devices.

How to add a favicon in WordPress

For most themes, if you launch the customizer, you’ll find the ability to add a site icon somewhere under “Site Identity.” For some premium themes that I’ve used, you’ll find a separate theme panel in your WordPress admin where you can add one. Some themes, such as Newspaper allow you to upload a bunch of different image sizes that will appear on various devices.

However, in the free theme that Zip is using right now, he just finds the one area in the customizer:

Favicon in WordPress customizer How to Add a Favicon in WordPress

As it says, the site icon should be square and at least 512 x 512 pixels in size. I prefer a transparent .png image — the background shows black here, but no background shows in the actual browser tab.

Now, this image will show if someone adds his site to their home screen on their phone. The small “favicon” image will show in people’s browser tabs.

My Favicon isn’t Showing!

Zip’s favicon shows right away, but right now his site is very basic, running few plugins. It’s been my experience that, usually, when the favicon does not show it’s been when I’m changing the icon and an old one has been cached. If you have caching on your website, clearing your caches and waiting a bit may be the answer.

However, I had one stubborn website where the favicon just did not want to appear. If that happens, you can add your own.

Uploading a Favicon

The favicon vs. the site icon is a tiny 16 by 16-pixel image that you can set yourself. Create an image called favicon.ico and upload it to the root of your website.

If Zip needed to do this, he’d either use and FTP program or go into his file manager in cPanel. He’d then upload his favicon.ico file to the root of his website (the public_html directory.)

Note that some graphics programs like Canva will not let you create an image that tiny. Still, you can create your site icon in Canva and then resize it down elsewhere.

Resizeimage.net is one site I’ve used a few times to convert or resize images They did NOT ask me to log in or to install any browser bars (which I never do.) Use that, or another tool, to create a 16px square image, rename it to favicon.ico and upload it to your public_html directory.

You can also use a website like Favicon and App Icon generator to create a full set of browser icons. Then download them to your computer and upload them to your root directory as described above. However, you’ll also need to add some code to the head of your website. We haven’t yet come to how to do that in this tutorial series. If you’re using a premium theme you may find an area to easily insert header or footer scripts in your theme panel. If not, you can use a plugin like Insert Headers and Footers to easily insert the code to the head of your website.

Now that Zip’s learned how to add a favicon in WordPress, what’s next? He’s done quite a bit in basic design. I think next we will, perhaps, talk about post formats in WordPress.

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it.

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Care to share?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

Coffee Image for Email Subscribe
Get Caffeinated!

OK, we can't send you caffeine--or even coffee-- but we can send you new content. Subscribe to our email list and get new posts delivered to your inbox. If you don't specify preferences, you'll be signed up for a weekly digest of new posts in all categories, as well as occasional promotional emails and surveys. However, if you would like to customize the frequency and type of content you receive, you can sign up here.

Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Notify of
Inline Feedbacks
View all comments

You may also be interested in:

Recently Popular

Share this
Send this to a friend