In order to distinguish yourself from other bloggers/webmaster, once you create a website or a blog, there are certain things that you need to apply to your blog or static site in order to have it ready for the public.
Among those things is creating a Favicon for your blog/static site.
What Is A Favicon?
A favicon is a small 16px X 16px icon that is displayed the moment a user starts to load your website/blog.
It is located in the tab your browser creates when you open a website, for example take a look at the tab in your browser this post you are reading right now is displayed in.
Do you see the small image right beside the title of the page? That is a Favicon!
Why Is A Favicon Important?
When a user bookmarks your website or whenever they open their browser address bar and your site shows up there, having a favicon displayed there will remind them of your website and makes them more familiar with your website especially if you designed a favicon that stands out.
What Should My Favicon Look Like?
Anything you want really, the possibilities are endless, however most people, especially businesses and companies create their favicon based on their logo.
In other words their favicon is a mini-version of their logo, this is the case for my blog as well, if you noticed my logo you will see it’s the same as my favicon. You can change the background of the favicon to make it display a bit more clear in the browser tab if you want but still maintain the same logo look.
What Is The Format Of A Favicon?
You can’t use any 16px X 16px image and expect your browser to show it as your favicon, it has to be one of the extensions .ICO or PNG.
If you use another image format, it might not work and even if it does work in 1 browser it won’t work for the others, so just to be safe, use either PNG or ICO extensions.
Which Extension Format Should I Use, PNG Or ICO?
It’s really up to you, however the advantages of using a PNG is that by default it is a transparent image which might work better in browsers with different color themes.
On the other hand if a user have a custom theme installed for their browser and let’s say that theme is dark in color, if you use PNG then your image might not appear clear enough because of a dark background color, thus using ICO with a predefined background color in this case solves this problem.
2 Ways To Create A Favicon
a) Create A Favicon Manually:
This is fun and simple, if you already have an image (such as your logo for example) and would like to turn it into a favicon, you can simply open it in “Photoshop” or if you don’t have Photoshop then you can use “Windows Paint” and simply re-size the image to match 16px X 16px and then save it in either of the extensions above: PNG or ICO.
b) Use An Online Generator:
There are many online generators that you can use to create a custom favicon based on any design you like.
My favorite website for creating a favicon is: http://www.favicon.cc/. This tool gives you so much control over the design, it’s just awesome.
Installing A Favicon On A Static Site
To install a favicon on a static site, all you have to do is paste the following code inside your header tags, but make sure to change the location of the favicon to the one you use.
<link rel="shortcut icon" href="images/favicon.ico" />
Installing A Favicon On A WordPress Blog
This is even easier than on a static site, all you have to do is use the plugin that I use and insert inside its settings page the link to your favicon image on your server or choose 1 of the many favicons it already provides for free and it will take care of the rest automatically.
The plugin I use is: Favicons.
Favicons are a great way to familiarize the user with your website, I highly recommend using them, especially that they’re too easy to create and install. 😀