By Josh Bartolomucci | May 02, 2017
By Josh Bartolomucci | December 30, 2016
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.
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:
<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:
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" />
The views expressed in the above post are the author's own, and may not reflect those of FoxyCart.com LLC.