Since the dawn of modern web browsers the favicon has been used as a mini-icon to represent the brand of your website in your browsers title bar.
Over the last few years, the favicon has grown up. We have icons, favicons, shortcut-icons, apple touch icons and many more. These icons have various default settings in quality and size.
Today I’m going to talk a little bit about the good old fashioned favicon.ico standard. The great thing about creating a standard favicon.ico is many other standards will fall back on this icon if not present.
I’ve been using mspaint.exe for years to make makeshift favicons for my personal websites. If it is a professional website, I’ll sub it out. Today I learned how to make a very basic favicon with Photoshop in a few quick steps.
The settings / canvas is the most important part of getting a favicon setup in Photoshop. After quite a bit of research, here is what I feel is the best settings to work with if you are creating a favicon in Photoshop.
I could be wrong about this and would really like for a real designer to give me some feedback on this, but starting at 64px by 64px and scaling down is the way to go.
Zooming in also helps.
From here you have to be good at 2 things:
- Having a lot of patience
- Being really good at designing really small things.
Neither one of these I am really good at, but I made an attempt at a simple favicon anyway.
Either way, here is what I came up with. My favicon for this site (the one you are looking at right now) is just the number 30 draw using the text tool.
I heard on one guide that you should “sharpen, sharpen sharpen” but when I sharpened the image even a tiny bit it reduced the quality.
I suppose I could have used a better color for the numbers gray / black isn’t the best.
The next part about this is re-sizing the image. You have to re-size your favicon down to 16×16. There are some options that you should be aware of when re-sizing in Photoshop.
When changing the be aware that there are options that could benefit the image when re-sizing up or down. In this case, we are sizing down so we need to take a look at this setting:
Bicubic Sharper (best for reduction) is what you want to choose when sizing down a favicon. Apparently this is what to go with according to a few different sources.
Either way, tonight was not about the design as much as it was about the process.
Saving Favicon as .ICO in Photoshop
Once this has been completed, if you want to be able to save your file as an “.ico” in Photoshop you are going to need this plugin. Basically this enables CS5 users to save files as an ICO.
I definitely learned not to trust everything you read in guides, and learned a little bit more about favicons. I also learned that Photoshop does not support .ico files by default.
Tonight’s project was not a huge epiphany, but I definitely feel like I am one step closer to becoming a respectable designer.
Comments are closed.