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