How to Design a Favicon
It’s 16×16px of branding heaven. Stop being a lazy bastard and put one up.
January 4, 2009 by Gary Simon
Okay, a tutorial on how to design a favicon? Pretty ridiculous and absurd eh? Well, I’ll be completely honest with you, like any other present-minded webmaster, this is for the SERPs. But it’s also for the newbs, and tha’ts why I made it. What better way to kick off the first eppy of Freeloaders than giving the newbs something, eh?
A favicon is very simple to create. As shown in the video, it’s a simple matter of designing within a 16×16 (32px for you math geniuses out there) canvas. The main point of a favicon is to further enforce your branding. If you have a logo, you might want to make the symbol your favicon; or at least a portion of it if it’s complex. Readability is very important, but it’s also important to make it unique and match the color scheme of your site.
Oh and once you’re done with the actual design and have yourself a favico.ico uploaded to your server, this is the code you stick in your header file. (Between the <head> *HERE* </head> tags)
<link rel=”shortcut icon” href=”/favicon.ico” >
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Patrick
January 6, 2009
you can also save it as a png,
and then rename the file as .ico
and you have transparency.
d03boy
January 22, 2009
When you were drawing the V with the pen tool you were deleting one of the directional things. How did you delete it?
Gary Simon
January 22, 2009
Hold down the ALT key, and left click the end of the direction and that allows you to modify the angle.
Andie
January 6, 2009
BTW: 16px*16px = 256 px