Keeping your favicon consistent

February 4, 2008 - How To

The “Automatic” Favicon Method

Most web designers and developers (myself included) just go ahead and throw a favicon.ico icon in the webroot of your site and call it a day. While that works wonderfully most of the time, when you cache your checkout template on FoxyCart, all the sudden it’s using our favicon instead of yours, since the FoxyCart favicon is at the webroot on our servers.

An Example with Cookies

Let’s take our favorite online cookie store, Ellie & Ollie, as an example. Their favicon looks like this:
A normal favicon
It’s just loaded in their webroot. No special code or anything required, as most browsers will just look for /favicon.ico and go on their merry way.

However, once the template is cached on FoxyCart, the /favicon.ico is now pointing to our webroot, so you get this:
FoxyCart's favicon

Not the end of the world, but your customers might notice the difference and hesitate. Hesitation is bad for conversions, so let’s take care of that by adding some code to tell the browsers where to find the favicon:

The Solution

<link rel="shortcut icon" href="http://www.YOURDOMAIN.com/favicon.ico" type="image/vnd.microsoft.icon" />

or, you can use a PNG file if you’d like (which is nice, as it’ll allow larger sizes):

<link rel="icon" type="image/png" href="http://www.YOURDOMAIN.com/favicon.png" />

Adding this code to your FoxyCart templates will give you a nice, consistent favicon across both your site and your entire checkout process. Nice and happy, just like this:

A nice and happy favicon

Do favicons need https?

Surprisingly, in our testing we’ve found that browsers don’t seem to put up a fuss if your favicon is loaded http on an https page. You can, of course, call your favicon using our caching if you’d like, like this:

<link rel="shortcut icon" href="https://YOURDOMAIN.foxycart.com/cache.php?url=http://www.YOURDOMAIN.com/favicon.ico" type="image/vnd.microsoft.icon" />

Some favicon Resources

  • Wikipedia has some good information about the history and capabilities of the favicon.

  • The W3C has their document if you really care.

  • Windows: Irfanview, maybe the best quick image manipulate tools ever. Can save .ico files. Free.

  • OS X: IcoMaker can create multi-resolution .ico files. Free.