Webinar SignUp

Your Favicon in Motion

Adding a favicon (Favorites Icon) to your site is a personal touch that is useful for identification and an expression of your style, but did you know that Mozilla Firefox browsers can display animated .GIFs?

In your AspDotNetStorefront there are a few simple steps to add your favicon creativity to your website:

Create your favicon.ico file and the animated GIF file (name it something like favicon_animated.gif ).

FTP the two files to your site’s {root} folder.

Edit the following files in your storefront for ML8:

  1. /skins/Skin_#/template.ascx (for storefront)
  2. /Admin/skins/Skin_#/main.ascx (for admin console)
  3. /Admin/signin.aspx (for admin signin page)

Edit the following files in your storefront for ML/MultiStore9:

  1. /App_Templates/Skin_#/template.master (for storefront)
  2. /App_Templates/Admin_Default/AdminMaster.master (for Admin Console)
  3. /Admin/signin.aspx (for Admin signin page)

Add the following code between the <head> and </head> tags in the top of the files, so it appears as such:

<head>

<link rel=”shortcut icon” href=”http://www.yourdomain.com/favicon.ico”>

<link rel=”icon” href=”http://www.yourdomain.com/favicon_animated.gif” type=”image/gif”>

</head>

Clear your browser cache and check out your site!

Animated GIF tip: When creating your animated GIF in whatever program you use to create the file, make sure the default image (or the first/primary/starting image) is what you would like to see for a static image, as the icon will not always be animated, especially in Bookmark/favorites folders. This is typically the same as your favicon.ico image you create for the Internet Explorer browser.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Posted in Design & Layout, Developer Tips | Tagged , | 2 Comments

2 Responses to Your Favicon in Motion

  1. You will need to add TYPE for the ICO just as you did with the GIF for the ICO to work.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 3 = 10

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>