Last week I covered 7 reasons favicons increase your website traffic and I hope this got you thinking about getting a memorable favicon if you don’t already have one. You may also want to change your favicon if it does not match your current website or does not stand out enough. You want something that is creative and captures the eyes of your visitors.
Take a look at the icons on the right. Do you recognize any of them and the websites they go to? Many of them can be identified with a certain website by just looking them. Favicons may be only 16×16 but they do have a very large impact on branding and your visitors web experience.
What should be your favicon?
It is hard sometimes to think of what image should be your favicon. It is not as simple as just resizing an image to 16×16 .ico formatted image. The problem that occurs is that not everything looks that great that small.
Usually you will attempt to resize part of your logo into a 16×16 space. If this does not work, you should either find or create a favicon that represents your websites theme. For example if your website is about cats, a favicon of a cat is a good idea. That is certainly an easy one, but you get the idea
What is the .ico format?
The .ico format is what your favicon needs to be saved as. In fact your favicon actually needs to be named favicon also. This format allows your browser to read the image and to display it on your tab bar, bookmarks, address bar, history and other areas.
How to create a favicon in Photoshop
Surprisingly Photoshop does not already come with a .ico file type installed. You will need to download the .ico plugin in order to save .ico type files. You can also create icons for your desktop too if you are up to it with this plugin.
You can take your current images and downsize them to 16×16 or you can attempt to create your own from scratch. Sometimes it takes a while to mess with the image until it actually looks okay at the 16×16 size. Since the space is really small, you will need to zoom in and out quite a bit until you get it just right. Once you have the image looking okay at the small 16×16 size, go to “File >> Save As” and save the image as:
favicon.ico
Free websites that convert your images
There are several free online websites that will take your current images and resize them to 16×16 and allow you to download them in .ico format. Here are 2 that work great:
Free websites to create favicons
If you are feeling creative and do not have Photoshop or other image creating software, you can use these free online favicon creators to help make your 16×16 favicon. I have actually never made a favicon this way, px by px so these do look like a lot of fun:
How to add favicon to your website
You will need to upload your favicon to your root public directory. This is the location most browsers will look for your favicon regardless if you add your favicon meta tag, so it is a good place to keep your favicon. The root directory usually looks like:
/home/username/public_html
If you do not know your root public directory, contact your web hosting company for more information. Next you will need to add the following meta tag between your <head></head> tags. This is XHTML compliant, but will also work on HTML based websites.
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
Once you add a favicon, you may have to reload or clear your browses cache to see the new favicon, especially if you had a previous favicon. Your favicon should now show up in your tab/search bar. Later this week I will post up my resources for finding free favicons, which come in handy too if you need a little inspiration!
Comprehensive Guide to Favicons Series
If you liked this post, subscribe to my full RSS feed. Learn more about rss feeds with my quick guide. You can subscribe through e-mail too.
thanks! i always wanted to make one so i’ll refer to this post when i need one
Great :c) I know not all of us have photoshop, so wanted to give lots of options.
Great how-to article (again)
BTW I love how your WP theme incorporates the favicon in the comments header. I love gravatars but this is even better
Thanks Sam! I love the plugin too, I thought it was a cute idea. Here is the link to the plugin if anybody is interested in it:
http://dev.wp-plugins.org/wiki/favatars
Thanks for the link Sarah, I didn’t know there was a plugin for that. There are just so many plugins… I was at the moment trying to hand-code the thing in a theme I’m gonna put up for auction today but this is a true time-saver. Thanks!!!
Great post Sarah, I gave you a digg and stumble.
@Sam: Thank god for plugins aye? I love wordpress and the endless plugins… saves a lot of time!
@Adam: 2 diggs in one day, wow! Thanks guys.
Great article! I’ve just created my favicon on http://www.cymru66.com
I tried the Photoshop plugin but it kept giving me an error message about not enough RAM. I reverted to using the Dynamic Drive online tool in the end.
Sent reviewed your article on StumbleUpon, so if you get some extra traffic, that will probably be the reason
Thanks again,
–Steve
@Steve: Coolio favicon :c). I didn’t notice you didn’t have one before! It matches your avatar so is perfect. Thanks for the stumble!!
I noticed that the plugin will have an error if you already have a favicon and try to save over that image. So I been deleting old one or saving to a new folder. Hope that helps if other having errors too!
Nice tutorial..found you via Christian R’s linklove.
But Photoshop for ico is overkill
Worked like a charm for me
I recommend using this website :
http://www.chami.com/html-kit/services/favicon/
The main advantage is has is that you can upload a picture ( any size or resolution ) and it will scale it down , optimize it and make it look pretty .
Great batch of links Sarah
@TechZilo: It is a bit overkill, but if you’re used to using Photoshop its pretty darn easy to make a favicon with it.
@CristianR: Ahha! I see your new favicon. Looks great.
Thanks Sarah
I owe it all to you
thx, worked great!
Hey,
I wanted to create a favicon a month ago and never got around to it, until I read your post. Thanks, I managed to dabble with Gimp and this is the result.
Monika
Great, I’m glad you decided to make one. I think it matches your site perfectly too!
Yeah, I’m quite happy with it myself. I was great fun to do anyway and I had it on my list. So thanks to you Sarah I got it done.
Monika
Currently I have a favicon, but I’ve to work on that a bit more.
This post is a good reminder
Shankar, I think your favicon looks great. It is very noticeable because it has that background shading going on for it, not just a plain S which is very clever. I was attempting to make a favicon that had just letters but it ended up being pretty borning. Good thing it was only for a backend script!
Very neat tutorial. I just used it to make my own favicon. And I just put it up too. Thank you muchly for the help.
:O I see.. I thought it was very plain to be a good favicon
Hi Sarah,
Do you know if I can use this on Blogger?
I have never used Blogger before, but I don’t think you guys get your own webspace like a normal hosting account? I could be wrong though, I will find out this next week!
[...] or finding your favicon >> If want to create your own favicon, you can follow my guide on creating your own favicon. You can also find a free favicon from the 20 free favicon resources I have collected. I’ve used [...]