Jazz Up Your Website With an Animated Favicon

Written by: Justin Germino

March 4th, 2010 7:00 am - 20 Comments

So I saw a blog with an animated Favicon and the scrolling letters in the Firefox Tab caught my eye right away. I thought the idea of a scrolling favicon and seeing motion and movement in an area which is normally completely static was a good way to get a little notice to your tab and favicon. I decided to test out creating an animated favicon with Animated Favicon Generator and install it on DragonBlogger.com just to see how it looks and feels as a test.

Look at my little tiny icon at the top of the browser and you should see my dragonblogger logo, and then it should scroll “DragonBlogger.com” across my favicon. This is really easy to setup if you want to try it out for yourself. Go to the website in the above link and upload an image (125×125 or smaller so it sizes to be somewhat interpretable)

Then you just upload the animated_favicon.gif and favicon.ico to your “root” folder of your website the / folder (where your sitemap.xml is) insert this code in your “header.php” file under your <head> tag.

Save and your good to see what it looks like.

What do you think? Clever, Distracting, Annoying?

-Dragon Blogger

Digg Digg

Add Custom Favicon to Blogger Blog How to setup a custom favicon ico for Blogger based blogs...
Favicons are Fun – Tip for fellow bloggers or anyone running a web site I am one of those people who can’t stand when I see my bookmark bar full of generic favicon icons.Â ...
Avengers Assembled! Avengers animated series review. THOR! IRON MAN! CAPTAIN AMERICA! THE HULK! Together these and others are The Avengers: Earth's Mightiest Heroes! We've seen this...
Monitive Website Monitoring Service Giveaway Accurate and reliable website monitoring with Monitive which provides SMS or email alerts when you have site outages....
Tracking your Blog or Website’s External Links with Google Webmaster Tools A friend of mine was mentioning to me that far more accurate than Blogsearch’s link:http://www.dragonblogger.com method of tracking links to...

Article Written by Justin Germino (1579 Articles Published)

Working in the IT Industry for over 10 years and specializing in web based technologies. Dragon Blogger has unique insights and opinions to how the internet and web technology works. An Avid movie fan, video game fan and fan of trying anything and everything new.

Follow Justin Germino on Twitter @dragonblogger

Charles Young

I think through favicon it will attract the eyes more. I wish I have more time with my blogs and sites like before. I’m just too busy with my business now.Thanks for the enlightenment.

share flag

spam
offensive
disagree
off topic

Chris @ Woody Costume

Having an animated Favicon is a really cool idea! Obviously there are a lot of websites which have the static favicons but to be honest I haven't seen a lot of scrolling ones so I could potentially make my website quite unique by using one of these - thanks for the information!

Ana @ Bo Peep Costume

Hey dragonblogger, I've seen a few of these animated favicon's on different blogs recently - they are really cool and definitely add a bit of a unique feel to your website. Thanks for explaining how to create one of these in layman terms - I usually pretty scared of attempting to make one of these but I think this wouldnt be that difficult!
.-= Ana @ Bo Peep Costume´s last blog ..Disclaimer =-.

Michael@Edinburgh Removals

Thanks for this tip. I've been looking for a way to create animated favicons as I don't have Flash or anything like that to create it.

I don't think they're distracting as long as they are used correctly.

Dennis Edell

I was about to email you about this, thanks for the link...although it wouldn't really work with mine.
.-= Dennis Edell´s last blog ..$100 – 10 Winners – Comment Contest! ‘Till Months End… =-.

Nathan@H. Pylori Treatment

Cool tip, thanks for sharing. I didn't realize you could use an animated GIF as a favicon.

dragonblogger

It doesn't replace the favicon, but gets loaded in addition to. Only some browsers support I have since learned, Safari doesn't support animated GIF favicons.

Julie

I don't know about animated icons in terms of their usability. A bit annoying really. I haven't tested it though.
.-= Julie´s last blog ..How To Remove Ugly Eye Bags: Removing Your Age Without Surgery =-.

LarsD

I guess it doesn't support Safari on a Mac :-) I can't see it for one...

I will try it out as well...

-Lars
.-= LarsD´s last blog ..EgoTweeting – An eBook on ego- and business marketing using twitter =-.

Matt@Rock Tshirts

good post, i am not sure where i stand on the subject, part of me really likes them, but if they aren't done well then they can look like they are from the mid 90's forums.

MinnieRunner

That was clever. The annoying one would be the text scrolling or blinking :)

Josiah@free ipad

Neat little tip. I suppose it does draw some attention. I know a few of my sites where this would work great. Thanks for sharing.
.-= Josiah@free ipad´s last blog ..Apple ipad for Free + itunes Gift Card(US) =-.

Video Games

Favacons are a great way to set you apart. Some people have a lot of bookmarks and this might be what they remember you by. Adding motion to it only increases your chance of getting noticed.
.-= Video Games´s last blog ..BFBC2 Recon Kit Unlocks Recon Expert achievement =-.

Klaus @ TechPatio

Works fine here. Not sure if I like it or not - if it even makes a difference to me.
.-= Klaus @ TechPatio´s last blog ..Gmail Tip: Trick Gmail Into Checking Your POP3 Accounts Often =-.

BlazingMinds

I noticed it yesterday, while checking your blog through my RSS reader, but only on the home page!
.-= BlazingMinds´s last blog ..Blazing Minds Interviews Blogger Brad Reason =-.

Thanks for letting me know, know it will show for every page.

I see it now on every page.
.-= Dennis Edell´s last blog ..$100 – 10 Winners – Comment Contest! ‘Till Months End… =-.

winnie

yeah I dont see it either. but i will check it out

element321

I do not see it on this page, only on the front page. Is this what you are wanting, or do you want to be on each page?
.-= element321´s last blog ..Now You Can Have A Counter with Your Google Buzz Submitter =-.