How to create,make and add a favicon.ico icon to your site
In just 5 Min’s from now you can have a favicon on your site, how? read on.
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/make and then add a custom favicon to their websites, but actually its not really that difficult at all.
Remember this:
OK now 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 coloured 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 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]
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
To create a favicon
use the following free sources which i find very useful
1.from a pre-existing logo or image go to favicon generator, click here
2.by using random colours and using your imagination, then use the easy favicon creator, click here
3.with GIF and animated text and other unique ones, then use the animated favicon creator, click here
How to make a custom favicon with photoshop?
Their are still some hardcore web savvy people that are not satisfied with other’s work and want to create their own unique identity, for such people who wants 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
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.
I would recommend Filezila FTP software for this as i use it myself and very easy to get used to it.
Note:
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.
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 webpage.
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, till then have a good day.
SJ
You might also be intrested in reading these:
Trackbacks/Pingbacks
- How to create,make and add a favicon.ico icon to your site … « Domain Namez - [...] SJ wrote an interesting post today onHow to create,<b>make</b> and add a favicon.ico icon to your site <b>…</b>Here’s a ...
hey
thanks a lot for this tutorial it is very helpful
keep posting
Really Cool blog……..
Funny Stuff | Funny Scraps
A blog for all about humor and funny scraps….
.-= Rajesh chekuri´s last blog ..This is our LIFE =-.
Great post -easy and simple to follow.You have a talent for making it so clear.
thanks !! very helpful post!
Of course, what a great site and informative posts, I will add backlink – bookmark this site? Regards, Reader.
Are you OK tired, sick, ill?
—————————————
signature: zelnorm 6mg
am busy in rl will be back soon:P
Wow! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?
Hello Guru, what entice you to post an article. This article was extremely interesting, especially since I was searching for thoughts on this subject last Thursday.
Great post..Keep them coming
Thanks for sharing.
Greetings and thank you for a intriguing posting. I appreciate what you said.
Great post. I’ve been looking for this exact information for a while now. Bookmarked!
I really didn’t think that quality websites still existed, thanks, this site is a breath of fresh air. Please keep it up…
Can someone tell me how to know when you update the information on your website? I don’t want to have to remember to come back all the time. Someone said something about a feed? I don’t know what that is. Thank You
I appreciate you for this fascinating article! Furthermore, i have got a web site and i’m questioning, how can i obtain like amazing theme like your own?
I enjoy checking in daily to see your writings. I have your page bookmarked on my daily read list!
Really cool post, highly informative and professionally written..Good Job
Hi, I can’t understand how to add your site in my rss reader. Can you Help me, please