By Princess Jones
The favicon on your website is the tiny logo that appears on the left side of the tab when it’s open in a web browser. It’s also the image that appears in bookmarks and other saved representations of the website. If you don’t set a custom favicon, you’ll likely have the default favicon of the platform you’re using — like WordPress, Blogger, or Squarespace.
It’s a small thing but it’s something that makes your business’ online presence look unfinished and less professional. It’s the equivalent of showing up to a sales call with the sales tags still on your clothes, hanging out of your sleeve as you gesture during your Powerpoint presentation. Is it relevant to how good of a job you or your business can do for your clients? Not really. Will people still register it and subconsciously (or consciously) judge you? Yep.
Fortunately, it’s an easy fix.
Things to Consider Before You Start
Keep in mind that if you have a premium WordPress theme, it’s possible that your backend has a specific place to set your favicon. Check your theme documentation before changing the code on your site.
Also, any time you change the code on your WordPress site, it’s best to make a child theme. Child themes prevent the changes you make from damaging your site. They also prevent you from losing those changes any time your theme is updated.
And as always with any changes to your website, make sure you have fully functional backup file just in case. It can help you restore your original site should you make any mistakes.
Change Your Favicon
Start with the right image. You need a square image that visitors can see well from very far away. Transparent backgrounds are recommended but not necessary. The recommended size is 16 by 16 pixels but I’ve found that just about any square image will work. Remember that the image shouldn’t have too much intricate detail. It won’t show up when the visitor is looking at the miniaturized image. Try Favicon.cc or FavIcon Generator for help.
When you’re confident you have the right image, rename the file “favicon.ico.” Next, upload your favicon to your WordPress site. You can do so through FTP if you’re set up to do that. You can also just log onto the site, go to Media, and click “Add New.” From there, upload your favicon file.
And now it’s time to tell your WordPress theme how to use that favicon file. Go to Appearance, click Editor, and click Header on the right side of the screen. You’re now in your Header php file. (Remember that you can do this on the theme header file just fine but a child theme is preferable for the reasons I noted above.)
Find the code that starts with <link rel=”shortcut icon” and ends with /favicon.ico” />. (Use the CTRL + F function to search.) If you find that code, replace it with:
<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />
If you don’t find that code, just put it at the bottom before the </header> code. And that’s it. Click Update File to save your changes. When you refresh your site, the new favicon should show up.