First let me tell you what a favicon is, favicon is a small 16 x 16 icon which appears next to the address bar when someone visits a site, this icon can be your brand logo or anything you want it to be and it adds that professional look to your website.

Many people find it difficult to create or make and then add a custom favicon to their websites, but actually its not really that difficult at all.

Remember this:

First the basics, favicon’s are 16 by 16 pixels size and they are and should be saved in the .ico format[windows icon] – your favicons can be images, random pixels colored or a animated text, its all up to you on what you would want your favicon to look like.

Favicons are also the icons that will appear next to your sites or blogs url when someone bookmarks it, so favicons are like magnets, make sure your favicon tempts the user to click on your site, it defines your website and its identity from others – so it should be unique, but don’t worry its not something serious in fact many sites don’t have favicons so its not a necessity [even my site has a random icon as a favicon - yea i know, i am too lazy but i am letting it stay their for some time]. If you are making money online with a serious business then adding a favicon can help you with branding. Favicon can be a small version of your blogs logo as well.

How to create a favicon?

When i say ‘Create’ then that means simply just make a favicon out of a pre-existing image.

So before you want to create a favicon decide on what your favicon icon is going to be, if its a simple image or your brand logo that you want to minimize to the 16×16 .ico format and use as a favicon then its just as easy as 1,2,3.

Tools to create a favicon:

Use the following free sources which i find very useful

1. From a pre existing logo: To create a favicon from a pre-existing logo or image go to favicon generator.

2. Designing your own Favicon: By using random colors and using your imagination you can make a favicon easily by using this favicon maker.

3. Animated Favicons: If you want to have an animated favicon then use this animated favicon creator to make one using GIF & animated texts.

How to make a custom favicon with photoshop?

Their are still some hardcore web savvy people that are not satisfied with the work done by those tools or using existing images and want to create their own unique identity, for such people who want their own custom favicon made form scratch, i recommend using photoshop. If your not used to photoshop then do it the easy way, but if you are well experienced with it then you can make amazing favicons in minutes.

Step 1: Making custom icon in photoshop.

Since 16 x 16 is very small, you will need to start a new project with canvas set at 64 x 64, then make the design that you want on it. Once done re size it to 16 x 16 and make sure it fits your expectations with that size, if not then do all the necessary changes and keep tweaking it till you get what you desire, try not to blur the the image in the process.

If your finding difficulties with photoshop try finding guides on the net for photoshop and how to work with it. If you don’t have photoshop however then i can recommend a alternative to it known as GIMP and it is a free tool.

Step 2: Saving your custom photoshop icon.

After your done with your icon its time to save it, we know that we don’t want the icon in normal formats like .jpg, .png etc, but we need it as .ico, for this you will need a photoshop plugin, which can be downloaded from here. Using this plug-in you can save your image as ‘windows icon’, i.e .ico format from the ‘save as’ screen.

Well in just 2 easy steps you have your own custom favicon ready. Wasn’t that easy?

How and where to add your favicon.ico icon on your website.

Everything seems to be done, you have your icon ready and now its time to put it in action. This is very important since for your favicon to function properly its necessary that it goes in the right directory of your website.

So upload your favicon [it should be .ico format] to the ‘Main root directory’ of your website using FTP, this is your ‘public_html’ directory or the default directory on which all your website files are located, this can be different on your server depending on what host you are using but these are based on my experience with hostgator which i use for this blog.

I would recommend Filezila FTP software for this as i use it myself and very easy to get used to it.

Notes:

1. In case your having blogs, forums or any sort of script installed on your domain then the favicon should always be uploaded in the default directory irrespective of the type of website, since its not dependent on your site structure but it functions along with your domain. For example if my blog sameerjoad.com is installed on a folder called ‘sameer’ within my public or root folders then i will need to upload the favicon to the folder sameer itself. Don’t edit the name from favicon.ico to anything else as it will not work.

2. If you have sub-domains to your main domain, then under the default domain category access the ‘subdomain’ category or whatever the name of the sub-domain is, and upload a favicon for it in the sub-domains ‘public_html’ directory, doing this you can have different favicons for your main domain as well as your sub-domains!

3. It may take up to 24 hrs for your browser to recognize the new favicon which you just added, so be patient after your done uploading, if it still don’t show up i would recommend clearing your cache and refreshing the web page.

If you are using a free domain or free hosting then you will need ftp access in order to do this, you cannot add custom favicon’s to a site you don’t have FTP access to. Consider buying a .info domain on godaddy for as low as $0.99 for a year.

That’s all for favicons, if you find any issues or problems regarding it or need any help feel free to ask me. And please do not steal other websites favicons or break any copyrights, have fun experimenting with your site. Don’t forget to share this post, subscribe to my RSS feeds & follow me on twitter @sameerjoad till then have a great day,

SJ