What’s a Favicon and How Do I Get One?
If, like me, it hadn’t even occurred to you to possess an image in the browser tab when your website is displayed, then you’re a super computer newb. This is why I’m here to explain this amazing process to you in user-friendly terms.
Because everyone in cyber land who writes about these things is far from a computer newb, it can require herculean mental stamina to figure them out. I did the mental weightlifting for you.
A favicon is short for “favorites icon,” and is the tiny graphic image you see on each browser tab in browsers such as Chrome, Internet Explorer, Firefox, Opera, and Safari. It also shows up in other places: a bookmark list, in certain feed readers, and with the site’s title in the address bar.
Having one means it’s simple to identify which tab is your website, making it quicker for your viewers to locate, particularly when multiple tabs are open. It also lends credibility to your site and helps with branding your work.
How to Get Your Own Favicon
1. Choose an image.
A favicon must be 16 X 16 pixels and have an extension of “ico.” You can choose whatever image you want, and Favicon Generator will do all the work of making your image into the right dimensions and ico file.
2. Save your favicon to a computer folder.
By keeping it named favicon.ico, you can easily use the code I’ve supplied without having to make any changes. Save it so you’ll know where to find it for uploading.
3. Upload your favicon.ico into your root directory.
This means going into cPanel. For directions on how to do this, see my post How to Change Your WordPress Username. You will need to know your username and password, so ask your web hosting company for this information. It’s good to have!
4. Once in cPanel, follow these steps or this path:
Click on the public_html folder.
Click on websitename.com folder. (Whatever your website’s name is.)
Click on wp-content (or wordpress first, if that comes up) folder.
Click on themes folder.
Click on your themename folder. (The name of the particular theme you use for your site.)
Click on images folder.
At the top click on upload and find your favicon.ico in your computer folder to upload.
Check that it’s there in the images folder. It should be in alphabetical order.
5. Copy and paste this code into your header.php.
In your WordPress dashboard, go to Appearance, Editor, and then Header (which should be on the right side). Once you’re in the Header, scroll down until you see code that starts with <link rel=. Copy and paste the following code at the bottom of all the other link code so that both lines of code have their own line:
<link rel=”icon” href=”../favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”../favicon.ico” type=”image/x-icon” /
6. Check that the file names match.
If you named your ico file something other than favicon.ico, then be sure to change the code so it has the correct name (i.e., myfaviconrocks.ico in place of favicon.ico).
If you ever decide to change your favicon, be sure to erase any of the code that pointed to the old favicon image.
7. Hit Update File at the bottom of the page.
Otherwise your changes won’t be saved. You really are a computer newb, aren’t you?
8. Your favicon should now show up in the browser tab.
I generally work in Chrome, and my favicon immediately showed up in the second tab I had open to my site – the one I wasn’t working on but was just using to check for success. Hitting the reload or refresh button seemed to work for others, but mine still doesn’t display on the site when I am working in the dashboard.
When Your Favicon Doesn’t Display
Your favicon might not display in your WordPress site when you are working from the dashboard. It might not display in the address bar. It should, however, display in the browser tab when you are on the site.
Weird tip for Internet Explorer: I read that by dragging the site name down from the address bar several times, the favicon would eventually appear.
WordPress Plugin Note: I chose not to install a plugin because all of them gave me a warning that they weren’t tested for compatibility with the latest version. The only one that didn’t say that had a different warning that I discovered elsewhere. It’s important to research any plugin you use.