What is a Favicon?
A favicon is the tiny symbol that resides next to your website URL. The name favicon is taken from two words. Favorite + Icon = Favicon. They show up on the tabs of open windows on your browser and in your favorites or bookmark list. They look like this.
Favicons are useful in identifying your site quickly if many windows on your browser are open or in a list of bookmarks. A unique favicon is a great branding tool sort of like the golden arches of McDonalds. An icon can make your web site look more professional and provide instant identification once it becomes associated with your site.
If you use the popular WordPress platform your favicon probably looks like this.
If you do not have a favicon.ico image your site will show up with a blank square next to the title.
Create your own Favicon
If you want to create your own Favicon you will need to design a small 16 x 16 pixel image and load it onto your server to overwrite the Favicon. Some websites will display larger favicon sizes but since the majority of websites display the smaller size you want to make sure it looks good at the smallest size.
You can create an image in GIMP or any photo imaging program that allows you to save an image as an “ico” file. Photoshop doesn’t let you save an image as an ico file unless you have a plugin. A workaround is to save it as favicon.gif or favicon.jpg and then rename it to favicon.ico before you upload it. But the file will be huge! Photoshop does not reduce the image to as small a file size as GIMP does. So you may want to create the image in Photoshop and then upload it into GIMP or Faviconer.com to save as an ico file so that it is tiny.
Several online sites such as Faviconer.com or Dynamic Drive allow you to create a favicon for free. The hardest part you may find in creating your favicon is keeping the image simple enough to show up at 16 x 16 pixels. If you use GIMP or Photoshop it’s often easier to work with a larger image and then reduce it. Just make sure that you view it at the correct size before you upload it or you may have an unpleasant surprise. That image that looks so great at 45 x 45 pixels looks like a smudge of finger-paint or worse at 16 x 16.
Uploading your Favicon to WordPress
The first thing you have to do is find where your present favicon is located. Each child theme will have its own favicon as well as often being located in the root directory. You can either upload the same file (overwriting the present favicon.ico) into the different locations or change the coding in the Header or header.php file
What to do when your Favicon does not show up
Once your file is uploaded it may not show up right away. There are a couple of reasons for this.
- Your favicon file is not loaded in the correct location. If you have more than one theme make sure it is in the root of the theme that is active.
- Your browser is caching the favicon file. This is a common problem and while you can try clearing your cache it may that the cache is not in your system but cached on the internet for the browser you are using. You may have to wait several days or even longer for it to show up. Try using other browsers such an Internet Explorer and see if it is showing up there. If it does than it may be just a waiting game for other browsers to catch up.
- You are not using the correct code for your browser. Not all browsers recognize all code. If you have this line of code:
<link rel=”shortcut icon” href=”http://www.yourdomain.com/favicon.ico” type=”image/x-icon”>
And it doesn’t work; add this second line of code:
<link rel=”icon” href=”http://www.yourdomain.com/favicon.ico” type=”image/x-icon”>
There are a couple of other solutions that may force your browsers to accept the change.
The easiest way is to delete the old favicon.ico and refresh your website. Make sure the favicon does not show. Then load up the new favicon. If it still doesn’t work you can try renaming the favicon.ico to favicon2.ico and change the code to reflect the new change. If it loads it up than change the code back to the favicon.ico and the image back to favicon.ico.
Final Wrap Up
Hopefully changing your favicon will be a simple process and it will show up without pulling out your hair or pushing a fist through your screen. If you are using WordPress you can find more help here.