Favicons: why and how to create favicons September 3, 2007
The "WHY" of Favicons
Favicons ARE an integral part of your website and branding.
Favicons are the single most important graphic appearing on a website. While that sounds like a strong statement, it’s true. Favicons are the least expensive and most overlooked visual branding opportunity.
Favicons are the 16 x 16 pixel images that show up in the navigation bar of your browser. They also appear in browser’s bookmark/favorites menu. You might think, "big whoop! that’s not vital." But those aren’t the only places they appear.
They also appear at the bottom of my blog: not my favicon, but the favicon for stumbleupon, digg, technorati, del.icio.us, etc. Web developers and copy editors don’t even need to use the names of those online brands: everyone recognizes these networking favicons.
They now also appear next to the page title on the tabs in tabbed browsers: if a user has 25 browser tabs, each tab may be as narrow as just the favicon: would you prefer your visitors see Internet Explorer’s blue E, Safari’s blue compass, an icon of a page (Firefox and Opera), or would you prefer that they see your logo? If they see a logo, they recognize immediately what site is opened in each tab: you want to be one of those recognized pages.
Are you looking at your open browser tabs? Can you tell which pages are which? Have you checked your bookmarks list? Are there some bookmarks that stand out more than others? Have you looked at the bottom of this blog entry? Depending on how many toolbars you have downloaded and have open, you may have a plethora of favicons there too. So, have I convinced you?
The "HOW" of Favicons: How to design & create a FavIcon:
Designing a Favicon:
- If you have a logo that easily translates into something that looks decent at 32 x 32 or 16 x 16, use it.
- If you can avoid using the color blue, especially the glassy shiny blue of IE, avoid using it.
- Keep it simple. Yahoo uses a Y!, Google uses a G. Flickr uses two little circles. Delicious is a square made of 4 squares. IE is an E. These are all ones you know.
- If your logo is very complex, try using just a part of it such as the first letter. If your first letter doesn’t represent your company well enough (like in the case of this blog), use your logo color to abstract an image.
Creating a FavIcon: Converting an image to a .ico
- Following the suggestions above, create a 48×48 or a 32 x 32 image that you will use as your favicon. Save it.
- If you have photoshop, you can download a Favicon extension for Photoshop. If you don’t have photoshop, or don’t want to deal with extensions, you can visit Dynamic Drive and use their tool to convert your
.jpg,.pngor.gifinto a.icofile. The file created will be calledfavicon.ico. You will be directed to download it. - Upload the
.icofile to the root directory of your website. - If your favicon is named favicon.ico, then you don’t need to add code. However, if you don’t have the
.icofile in your top level directory, or if you saved it under a different file name, or if you have different favicons for different parts of your site (not usually a good idea, but Yahoo has different icons for some of their properties, such as Yahoo! answers), then include the following in the header:
<link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/x-icon" />
Uses of Favicons
Now your favicon can appear all across the web:
- Branding in the browser address bar.
- Branding in the bookmarks/favorites menu.
- Branding on browser tabs
- Bookmarked links on other sites
- Branding in your email signature
- As a bullet or icon in someone else’s link to your site
- Let me know of other ideas in the comments section….