This started out as a gentle suggestion to a fellow blogger, that she might consider adding a favicon to her site. Owing to my usual overzealous approach to things, I created a favicon based on what appeared to be her logo. After sending her this small file, I then created a post on one of my sites to explain what a favicon is and how it represents your site on the web.
Then, I put the question out to a few of my associates asking them what they thought about favicons, and whether they were relevant, useful, ignored, or what. My first respondent said, absolutely, they represent your brand and should be used. Second response was similar, followed by a suggestion to create this blog post, explaining how to create and use one.
OK, I’m going to give you the “how I created mine” explanation here. In a later post, I’ll describe how I include a favicon on my websites. So, here we go.
There are a few ways to create favicons, but I’m only going to give you the two I’ve used here. One involves using a piece of software, named IrfanView. This versatile image editing software is free and will allow you to open, modify, and “save as”, many different graphics formats. You can download it from places like Filehippo, or Ninite. You’re welcome!
Mac users, you’ll have to find something that compares and fill me in on what works for Apple.
OK, here’s the easy way out. Just point your browser at: http://tools.dynamicdrive.com/favicon/ and upload your image, then download your icons. You may want to play around with your file first, to get it into a perfect square. Since the favicon is going to come back to you as a 16X16 pixel square, you’ll have a better idea of what to expect if you submit a square image in the first place. Here is the original – 48X48.
Here’s how it looks as a favicon – 16X16.
That’s all for now. I’ll give you some hints on how to put a favicon on your sites in my next post.
Enjoy!
Hey Brian, great post, thanks for the resources! I have another suggestion for folks who will be making their little favicons – Simplify! The space is teenyweeny, and in order to reinforce your branding, people have to be able to recognize something in it.
As an example, I would consider taking the mouse out of your favicon, since at 16 x 16px I really can't see what it is. Removing the mouse will leave a big red "M" that may still be recognizable at the tiny size.
Another idea would be to use just the mouse head, see if it still is recognizable at tiny size. If you have to use just a portion of something, or something cropped very tightly, try to use something that will still be recognizable.
Mousehelp's 'mouse with M' logo is distinctive, so if you use just the "M", it's a fairly stylized "M" that will be associated with your logo. The mouse head reinforces the name. Either would be a great choice, just need to do some experimenting and see what works best.
Your branding is reinforced only if people can make out the image.
Cheers!