Favicon Basics
Designer's should never neglect the details, but this is one often overlooked detail that can set you apart from the pack.
Sanford I. Weill once stated "Details create the big picture" and in the design world, that is an absolute truth. When I run across large businesses (and I mean 10 mil plus) who don't have favicons on their site, their brand is automatically discounted in my mind. I believe they're is a natural aversion to large corporations inbred in most "artsy types" and when you run across a big company that doesn't even bother to address the details, that speaks volumes. So enough with the philosophy, lets get to the brass tacks.
What are favicons?
Favicon's are the small logo that appear next to a websites name in a tab bar. The icon's are .ico or .png formatted and readable in both 16x16px or 32x32px format. The current "standard" would be a 16x16px .ico, since it cover's the most ground in browser cross compatibility. If this is a new concept to you, I would recommend always making a 32x32px .png icon since I do believe the industry is trending towards that becoming the new standard.
How do I make one?
Like anything else, there is a right a way and an easy way. We'll address the right way here, but if time is a limiting factor just skip to the end of the article look for a favicon generator and bam - you're done.
Get the Plugin: Off the bat, you will need a copy of Photoshop to do create your own high quality favicon. If you don't have a copy of PS, I'd recommend going to the favicon generators at the end of this article. Since you need to create an icon in a .ico format, you will need a plugin for PS. Telegraphics makes the best plugin which is available for free and on a variety of platforms (I would leave a small donation though, you'll love them once you realize how useful this tool is). The download is available at http://www.telegraphics.com.au/sw/. Each plugin comes with a readme file that guides you how to install, but the general rule of thumb is to drop the icoFormat.plugin file into the "Adobe\Photoshop CS\Plug-Ins\File Formats" folder. Don't forget, you will need to restart PS for the installation to take effect.Make the Icon: Create a new file in PS, I'd recommend a 64 x 64. You'll need to think of this icon being barely visible... 16x16 is a SMALL image. I included a few examples, but your mind should reside in the fact that you will not be able to truly decipher more than one letter in this icon. I would suggest including at least one color that is prominent on the site. Go easy on the drop shadows or gradients - simplicity is key. Once you've got your image, change your image size to 16x16 then click "save-as" and you will see that the .ico format is selectable in the drop down menu. Once you've saved the .ico file, revert the image change size, that way you can save the 64x64 file in case you need to make changes later.
Place the Image on the Server: You usually want to place it close the root level. So if you don't place it on the root itself, I'd recommend right inside your "image" folder. Easy accessibility is the name of the game here and some antiquated browsers still are set to automatically look for a file called favicon.ico at the root level.
Add the Code:The generally accepted line of code (in my opinion) to add to the head of your webpage is...
<link rel="Shortcut Icon" href="/favicon.ico"> but some suggest... <link rel="icon" href="/favicon.ico" type="image/x-icon">Finish up on page two...
If you're dead set on including a .png or .gif file instead (or in addition to), the code would look like...
<link rel="icon" href="/favicon.png" type="image/png"> or <link rel="icon" href="/favicon.gif" type="image/gif">You'll need to clear you're cache and to be perfectly honest, sometimes you just need to give it a couple minutes... browsers can be finicky with favicons. Then - as is the par for the course - evaluate and adjust.
Once you have a good looking favicon I would suggest saving a 32x32px .png copy and placing that on your server also. Keep in mind you can always reference both and .ico and a .png in the head of your site. Some sites also like to use animated .gifs, although that is a practice I wouldn't endorse myself.
Finished:
Now brag about it to your friends and notice how little they care. It seems like a barely visible detail almost, but keep in mind... This is what visitors see next your website's name. This is the logo that appears in the bookmark menu when someone save's it. I have noticed that I tend to visit the bookmarks that have cool favicon's and usually tend to remove the bookmarks that have no favicon at all.
Other good resources:
- The page I always referred to was a great article by Jennifer Apple.
- Smashing Magazine has a great article highlighting some of their favorites.
- Dynamic Drive has a pretty nice Favicon generator.
- Kust draw your own favicon with Favicon.cc.
Bonus Points:
While you're in the icon creating mood, make a slightly more detailed version, toss it on your server, adjust the file size to 57x57px, and include this line of code...<link rel="apple-touch-icon" href="/YOURICONNAME.png"/>This sets your icon for apple devices, such as iPhones. When someone saves your website as a bookmark icon on their phone, instead of a diluted screenshot what they'll see if you're awesome little icon. PARTY! - BONUS!!!
You have any questions or spare love lying around, please feel free to post it below.
Comments (0)