Head

Form

Lower Head

EBLOG

E-Marketing Performance Blog

A Little Favicon Goes a Long, Long Way

I remember when favicons first started to appear, it was like, hey, how cool is that. But now they are so common that I hardly notice them anymore. Well, no, that’s not exactly true. I do notice them, and like them, it’s just that I’m not surprised to see them anymore. But I AM surprised when I don’t see them.

Ok, let’s back up. What is a favicon?

If you’re reading this post from emarketingperformance.com then you need to do no more than look up to the address bar. If you’re reading this through a feed reader I’ll go ahead and throw a screen capture for you:

favicon in address bar

See that little icon of EMP with the orange line above it? Yep, that’s the favicon. It’s such a little thing, but it can make a pretty big impact. Site’s that don’t have a favicon show a generic icon like this:

site without a favicon

That’s in FireFox. In Internet Explorer, if you don’t brand yourself with a custom favicon, Microsoft with brand themselves in your place. Here’s what it looks like:

favicon in internet explorer

Now I won’t go so far as to suggest the favicon will increase sales, but it does provide a nice visual cue for your site, especially once it gets added into a visitor’s bookmarks folder. Take a look at this snapshot of Netflix open up in my browser, along side my open bookmarks:

netflix favicon

Look down at the very bottom, see the icon circled in red? That little guy there is a bookmark from a site that has no favicon. So you can see that not having a favicon prevents you from standing out among the others. This can be important when you’ve bookmarked a list of your competitors!

Favicons are not that difficult to create. I found this great Photoshop Tutorial on How to Create a Favicon.

Granted, this new one took me all of 5 minutes to create from the site logo, but what do you think? I could definitely clean it up a bit, for sure. But not bad for a few minutes of work.

To add your new favicon so it appears in the location bar and bookmarks, in the tags of each page’s code add this:

< LINK REL=”SHORTCUT ICON” HREF=”favicon.ico” >

That’s it. You’re all set with your new favicon.

Stoney G deGeyter

Stoney deGeyter is the author of The Best Damn Web Marketing Checklist, Period!. He is the founder and CEO of Pole Position Marketing, a web presence optimization firm whose pit crew has been velocitizing websites since 1998. In his free time Stoney gets involved in community services and ministries with his “bride enjoy” and his children. Read Stoney’s full bio.

5 Responses to A Little Favicon Goes a Long, Long Way

  1. I love it! Aside from the fact that I had no clue what a favicon was till I read this, I think it’s perfectly simple advertising that definitely leaves a mark in the memory. OK, and I have to say, look at the cute puppy in your graphic! Sooo cute. 🙂 Hi Stoney!

  2. Stoney G deGeyter
    Stoney deGeyter says:

    Wow, great information Cameron. Thanks for the additional details. I did notice a site that used a .png for the favicon but it didn’t show up in the IE browser. You didn’t mention that here so I was wondering if you noticed the same thing. It was only when we converted it to an .ico file that it did work in IE.

    Question, with the six different favicon files you noted above, I suppose it’s ok to name them all slightly differently and the correct one will be pulled for the proper usage?

  3. Cameron says:

    A few notes about implementing favicons…

    Besides the link format you listed, which is the one suggested/invented by Microsoft:

    < link rel="shortcut icon" href="favicon.ico" >

    you can also use this format, which is supposed to be more correct:

    < link rel="icon" href="favicon.ico" type="image/x-icon" / >

    Or both, if you want to play it really safe. However, if your favicon is named “favicon.ico” and is located in the root folder of your site, the default location, you can actually just omit both these tags, because every modern browser will find and use it anyway. For instance, if you go to apple.com, you should see the favicon in your browser, but you won’t find a link tag to it anywhere in the code.

    You also don’t have to use a .ico file. That’s another Microsoft idea (the favicon concept was introduced by IE5). Pretty much all modern browers will allow you to use a PNG image file instead, which doesn’t require any special plug-ins or software (other than Photoshop or similar) to create. Just use this link format instead:

    < link rel="icon" href="favicon.png" type="image/png" / >

    That being said, the .ico format offers numerous advantages. In Windows, favicons show up all over the place. For instance, if you put a shortcut to a website (like EMP) on your desktop, you should notice that Windows uses the favicon as the icon. One more chance for branding…

    Windows icon files can be quite powerful. Inside a single file, you can create multiple versions of the icon, at different sizes and color “depths”. If you do, Windows uses whichever size and color depth is most appropriate. For the sizes, 16×16, 24×24, 32×32 & 48×48 pixels are most common. In the address bar of your browser, you’ll always see the 16×16 version, quite small. But on your desktop, Windows will usually use the 48×48 version–if there is one. If not, it uses whatever size does exist and scales it.

    Stoney, I notice your new EMP favicon only contains a 16×16 version. This looks great in the address bar, but if you make a desktop shortcut, Windows tries to scale that up and it looks “blurry”.

    You can fix this by creating a multi-resolution icon. This isn’t much harder than what you did to create your existing favicon. There’s many easy-to-use tools out there that will create a multi-resolution icon for you from a single starting image. Here’s two that I found that I like:

    http://www.sibcode.com/icon-studio/
    http://www.aha-soft.com/anytoicon/

    As for color depth…you’ve probably noticed some icons on your desktop that have jaggedy edges, while others blend smoothly on the edges. The smooth blending is because those icons have a version with 32-bit color depth, which allows full transparency on the edges, something introduced with Windows XP. Using the same tools listed above, you can create both 32-bit and 16-bit (256 color) versions of your icon…all of which would again be stored in the single .ico file.

    In short, when you create your favicon, to make sure it looks great wherever people might see it, I suggest you create at least six versions in your favicon.ico file:

    16×16, 16-bit (256) colors
    16×16, 32-bit colors
    32×32, 16-bit (256) colors
    32×32, 32-bit colors
    48×48, 16-bit (256) colors
    48×48, 32-bit colors

    Save it as favicon.ico and upload it to your root folder, and you’re done…no HTML required.

    Then the only trick is telling your browser to show it to you…sometimes, especially if you have an old favicon that you’re updating, the browser will persistently cache the old version. Clearing your cache and restarting your browser fixes it most of the time. In Safari, go to Edit > Reset Safari.

  4. Cameron says:

    > I did notice a site that used a .png for the favicon but it didn’t show up in the IE browser.

    I think IE7 understands PNGs as favicons, but IE6 may not. At any rate, you can actually use both, as Mozilla.org does, and as I just did on BabyBestBuy.com—create both a favicon.ico AND a favicon.png. Then include a link to the PNG version.

    <link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

    No need to include a link to the .ico version as long as it’s named favicon.ico and in the root folder; IE will look for it there anyway and use it.

    > with the six different favicon files you noted above, I suppose it’s ok to name them all slightly differently and the correct one will be pulled for the proper usage?

    No…this is the tricky thing to understand. They’re ALL part of the favicon.ico file….all six (or less, or more) of them. That’s the nature of .ico files…they’re not like a regular image file, but rather a COLLECTION of images.

    Using either of those tools I mentioned above will allow you to create one of these multi-resolution .ico files.