how to create a favicon

Posted by Judy on 11 January 2012 in Make | 0 comments

without a doubt geek femina uses a premade template. i just do not have the time to devote to hand coding or testing a template from scratch. however, that does not mean i cannot customize it a little to make it more me. while making these changes, i decided to create a favicon.

a favicon is an icon that appears next to the url of a website on your browser. while it is just a detail and some people don’t really bother, it makes your site stand out and gives it that much more polish. considering they are easy to integrate into your website and help with brand recognition, i believe they are well worth the time and effort.

the only thing that makes a favicon a pain to do is the size. you need to fit it all in 16px by 16 px. some logos work fine, such as that of the television network ABC. while others, like the one for this blog, is a little too big to fit on such a small canvas. this is where your creativity needs to come out.

getting the plugin
in order to add a favicon to your website, you need to upload a windows icon (.icon) file, usually called favicon.ico, to the main directory of your site. you will need the windows icon (ICO) file format plugin for Photoshop in order to create the .ico file. this plugin is available from telegraphics. install this plugin before beginning this tutorial.

installing the plugin
extract the ico (windows icon) format zip file and copy the file format is ICOFormat.8bi into photoshop plug in folder > file formats. This is the usual path – C:\Adobe\Adobe Photoshop CS4\Plug-Ins\File Formats. restart photoshop.

start designing
because a 16 x 16 canvas is really small, start your project with a canvas set at 64 x 64. always use even multiples when you plan on resizing images.

resizing
select image > image size menu and enter 16 x 16. click on resample image and choose “bicubic sharper” from the drop-down menu. this setting ensures that the image does not blur as it is being resized. should it not be sharp enough, undo and try oversaturating, heightening the contrast and/or oversharpening the image. resize it again.

saving the favicon
Go to file >save as and name the file favicon.ico. choose the windows icon (ICO) format from the pulldown menu.

next time we will talk about how to install your favicon on your website, including wordpress.