Create your own favicon |

Create Unique Favicons for Your Website

Tuesday 15 Jan 2008

Favicons aren’t new in the web design world, they do however add another level of professionalism to your site. It only takes a few minutes and easily extends your brand one step further. Favicons are relatively simple to make, essentially all you need is a 16×16 pixel image saved in the correct “.ico” format (more on that a little later) and then the proper code inserted in the head tag of your web pages.

To start your favicon project, first grab the image you’d like to use as your favicon and open it an image editor such as Adobe Photoshop. Keep in mind that your favicon will be small, so it’s better to choose a simple graphic rather than something like a photograph, which could end up just looking like a blob. Create a new file in RGB colorspace with the dimensions of 16 x 16 pixels. Copy your image into your new document and using your transform tool, scale your image to fit into the new 16 x 16 pixel document.

Once you’ve got your image into the new document and positioned just way you’d like, save your image using the name “favicon.” SIDENOTE: Incremental saves are crucial to not having to repeatedly recreate work that’s been lost due to a software or system crash or some other catastrophic event that would cause you to lose your work. See our previous posts on autosaves and backups.

Now, from this point there are two schools of thought. If you don’t have an image editor that can save to the .ico format, you can save your image as a .bmp (bitmap image) and then after saving, simply change the file extension from .bmp to .ico. This will work for this project, however won’t work for some uses, such as if you’re making a call in a C app and your filetype needs to be .ico, even though the file was renamed with the correct extension, the call will fail. The alternative here (and the one I prefer) is to use an image editor that will allow you to save as an .ico file. Photoshop users can download this nifty plug-in from telegraphics that will allow it to manage .ico files natively.

With our new .ico file saved, all we need to do now is upload it to the site. Using your favorite FTP client or website development tool such as Adobe Dreamweaver upload the image to your site’s root folder (usually “www” or “public_html”)

Now that the favicon is in place you’ll need to add a small snippet of code just after the </head> tag of your page:

Pasting this code into the head of a template is a good idea. This will make sure that any new pages you create with your template will display your new favicon.

Make sure to save your changes and upload the new page to your site. You may have to clear your browser’s cache and reload your page to force your browser to reload the link to the favicon.

That’s it! Enjoy your new branding extention!

Like It? Share It!