Animated favicon

  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6887
  • Loc: up a tree

Post 3+ Months Ago

I recently tried this groovy idea called an animated favicon - it currently only works in FireFox but they say other browsers will follow suit eventually :D

Step One: First off to create your animated gif follow these instructions.

Step Two: To create your standard favicon follow these instructions.

Step Three: Then follow these instructions:

Firefox allows webmasters to use animated favicons and it is likely more browsers will eventually follow suit. While Internet Explorer does not support animated icons in any way, there is an easy way to code things so that you can display an animated favicon in supported browsers and a standard icon for all others.

Normally, one could just plop the favicon.ico image in a website’s root directory and it would show up without even the need to add a link to it. To get both icons showing in all browsers, we’ll need to add not just the link to the normal favicon, but also to the animated one.

Create your animated icon 16 pixels high and wide. I recommend calling it favicon.gif and uploading it to your website’s root directory, which should be where your regular favicon.ico file is. Put the code beneath this paragraph anywhere between the <head> tags of your website, making sure the paths are accurate, and you’re good to go. Firefox will show the animated .gif as the favicon, even when the user bookmarks the page, and Internet Explorer and other browsers that do not support it will continue to use the boring non-animated version. Note, if you have a cached bookmark image, it will show it until you clear your cache.

Code: [ Select ]
<link rel="shortcut icon" href="favicon.ico">
<link rel="shortcut icon" href="favico.gif">
  1. <link rel="shortcut icon" href="favicon.ico">
  2. <link rel="shortcut icon" href="favico.gif">

Original tutorial found here
  • Erwin
  • Born
  • Born
  • Erwin
  • Posts: 1

Post 3+ Months Ago

During the last days, I have read a lot about favicons.

I now actually believe it is not simply about the technology. Creating a favicon is not to difficult and there are millions of good-favicons genators out there. The question is: how to design an animated favicon that contributes to the visitors-experience instead of irritates?

I think I've made an attempt to find a solution. I have just launched a concept with animated favicons. I've created six animated favicons (different favicons for different tabs/ares), integrated with my (own) personal brand strategy. That implies that my face is shown, including attributes. On opening a page (or bookmarks) they are standing still, actually 80% of the time. After a little while, a sometimes funny, movie is played in the favicon.

Here's the site and a posting with lots of background info:
<a href=""></a>

For the next step I consider let the favicon 'play' with the title or starting a sound. That would be great. But it should all be very subtle, as lots of animated favicons will soon irritate.

I'm interested in what you think!
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23469
  • Loc: Woodbridge VA

Post 3+ Months Ago

I've done this before and it's pretty cool. musik, you should reformat this into the OZZU Tutorial format so we can highlight it there.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 9 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.