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:
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:
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:
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" />