Favicons can go a long way to ensure brand recognition, and they have become even more important as they are featured more prominently in newer browsers. Firefox, Safari, and new IE used a tabbed interface, and now tabs are identified with favicons of sites. Check the Favicon Wikipedia entry for more information. But more importantly, how does one create and implement a favicon?
Creating a Favicon
Newer, standards-based browsers can utilize favicons in any number of formats, including .gif and .png. However, IE still needs a .ico file, so it behooves us to create our icon in that format. With an application like Photoshop, that can mean downloading a plugin to export to that file format. If you are interested in creating an icon from scratch using Photoshop or similar software, check out Jennifer’s fantastic tutorial.
But being 2008, there must be a Web 2.0 tool that allows us to create and share favicons right? Right. Favicon.cc allows you to create favicons from scratch, import and edit images, convert images to the .ico format, and share your creations with others. They currently have an impressive collection of user-generated icons, which are free to use under creative commons licenses.
Personally, I took an icon from FAM FAM FAM (a fantastic collection of icons by the way), and imported it into the Favicon.cc tool. It looked great, so the only thing I had to do was save the file as a .ico. Then I was ready to implement it!
Implementing a Favicon
In order to successfully implement a favicon cross-browser, you’ll have to use a couple of different methods:
- Store the
.icofile asfavicon.icoin the root directory of your website - Add the following code inside the
<head>tag of every page on your site:
<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
It may take a while for the icon to show up in all browsers, but that should be it!
