In the world of modern web design, Favicons are considered one of the most important aspects of your website. Although it may only be 16px by 16px, the importance of this icon should not be underestimated. This is the type of polish that puts your site in a whole new league.
But really, they are kinda nice and having one makes your site seem just a little more professional. So today the gloves come off and we’re going to make a sweet favicon for an application I’ve been working on.
But Where do I Start?
The first step I like to take when making a favicon is to create a 16px by 16px Photoshop document – which is the standard favicon size. For this quick tutorial I already have a nice little logo created – and I’ll be using that to make my favicon.
Keep it Simple, Stupid
Because there is so little space to work with, it’s important to keep your favicon as simple as possible. My starting logo is a bit too busy to make into a favicon, plus favicons need to be square – so what I’ll probably do is lose the text and use either just the envelope edges and the heart.
Some Playing Around
After playing around for 10-minutes in Photoshop, I quickly realized that 16-pixels is just too small to preserve the definition of the actual envelope. What I’ve ended up doing instead is using just the edges (red and blue stripes) of my envelope with a heart in the middle. A couple things I noticed as I did this:
- When transforming things down in size, blacks will sometimes become a little too gray and need to be darkened (using the Photoshop burn tool).
- Whatever you end up with, run the sharpen tool over it a few times. It really helps clear up any blurry edges that resulted from such a dramatic size reduction.
The final result looks something like this:
Next Up, Turn that PNG into an ICO file…
Now comes the easy part. First, save your favicon as a PNG file. PNG is better than JPG because it is a lossless format, and with such a small image, you cannot afford to lose any quality. Next, head over to this sweet favicon generator – the best tool I’ve found for converting images to the ICO favicon format. To be honest, I tried a few different sites and they all gave me problems except for this one.
Making it Display on Your Blog or Site
Once you have the ICO file on your computer, you need to rename it “favicon.ico”, anything else and it simply won’t work. Next you need to upload the icon to your public_html directory (it won’t work anywhere else). Finally, you’ll also need to include this small snippet of code in the <head> of your HTML files:
If everything is setup properly you should now see a favicon when you refresh your site. I should mention that I did have a problem with Firefox not displaying the icon, but I think it was a caching issue because I verified it with this seositecheckup tool and everything seemed good!
Here is what it looks like using Safari