Tuesday’s Tip: Change your favicon for Infusionsoft shopping carts, order forms, and web forms

You may think of your website’s favicon as an insignificant part of your website’s overall design, but favicons play an important role. They build brand awareness, help establish credibility, and make life easier for individuals with dozens (or even hundreds) of bookmarked websites.

Unfortunately, Infusionsoft doesn’t provide an easy way to change the favicon that is displayed to your visitors when they go through your shopping cart, order form, or pull up a hosted web form. Luckily for you, we’ve put together an easy to use snippet of HTML that will let you easily change your favicon. We’ve tested this snippet with all the major browsers, including Internet Explorer, Chrome, and Firefox.

To make it work, simply change the faviconURL path below to the URL for your own favicon (it must be at an HTTPS site!) and then paste into an HTML Snippet, or into the Custom Header field for your shopping cart or order form:

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
    faviconURL = 'https://novaksolutions.com/favicon.ico';
    jQuery('link[rel=\'shortcut icon\']').remove();
    jQuery(document.createElement('link'))
        .attr('type', 'image/x-icon')
        .attr('rel', 'shortcut icon')
        .attr('href', faviconURL)
        .appendTo('head');
    jQuery(document.createElement('link'))
        .attr('type', 'image/x-icon')
        .attr('rel', 'icon')
        .attr('href', faviconURL)
        .appendTo('head');
});
// ]]>
</script>

This JavaScript snippet will remove Infusionsoft’s favicon (if present) and then add your favicon in a format supported by Chrome/Firefox, and a format supported by Internet Explorer.

To see this tip in action, check out our demo order form and demo web form.