Favicons are very tiny images that are used to identify websites. And, in case you are wondering, the word ‘favicon’ simply stands for favorites icon.
If you look in your browser bookmarks list, for example, your eye will no doubt be drawn to the listings that are preceded by tiny images. Hence the name ‘favorites icon’ or favicon. They provide a quick way for your readers to find your site in their favorites list. As such, favicons provide a great way to build your brand identity. You can also see it to the left of the address bar, provided the website actually has a favicon. So, how do you go about getting one for your site?
Setting Up Your Own Favicon
Favicon dimensions are 16px x 16px and the filename usually has the extension ico, such as seen in favicon.ico, the image that I have used on this blog. Some themes do handle other extensions such as .png and .gif but for the purposes of this tutorial, we will stick to the onnvention of the .ico extension.
You can easily see some examples in your browser. Just load some sites and then look at the tabs at the top- of your browser.
The Genesis Default Favicon
If you are using a Genesis theme, as I am for this blog, then you might be wondering how you already have a favicon showing up for your site. In fact, when I first started using Genesis themes, I naively thought it was somehow picking up my initial. You see the favicon image is by default a G, standing for Genesis of course.
To display your own branded favicon, it is just a matter of replacing the default.
Steps to Make a Favicon for Your Site
- Decide on the image that best represents your site. In many cases, this is taken from part of the logo or is the logo in miniature form.
- Create your image file using an image editor such as:
- GIMP (free)
- Any other editor that can save a file as type ico .
- An online favicon generator such as favicon.cc.
Save the file as type ico.
If your editor doesn’t provide the option to save as an ico file, then simply save it as a png file. Then convert the image to an ico image using a converter such as convertico.com.
Steps to Upload Your Favicon
If Your Site Has a Default Favicon Already
- Using an FTP program such as FileZilla or the File Manager on your server, find where the default faviicon is currently stored.
It will probably be one of the following:
- Replace the existing favicon file with yours.
- Empty your cache, refresh your browser and you should now see your new favicon.
- If for any reason you cannot see your favicon (perhaps the default is stored in more than 1 place) then you can follow the code option in the next section.
If Your Site Has No Favicon
- Upload your favicon.ico file to your image directory.
If you are using WordPress, just click on Media from the dashboard and then upload.
- Find the image in your media library and get its URL.
Paste it into notepad so that you can easily retrieve it for copying shortly.
- You will need the following line of code.
Replace the URL path to your favicon.ico in the following line of code with the URL that you saved in notepad.<link rel=”shortcut icon” href=”URL path to your favicon.ico“>
- Insert this line of code into your header or footer HTML.
Or, if you have a Genesis theme, you can just insert the line of code into the header or footer section of the Genesis Theme Settings.
Viewing Your New Favicon
- Clear your cache.
- Refresh your browser and you should now see your new favicon.
An Easier Solution for WordPress Sites
If you are reluctant to tackle the code behind your site, then you can opt for a plugin instead.
The All in One Favicon Plugin is one such option.