Animated Favicon

You may have know about favicon, a little picture in front of website URL.

But, have you ever seen a website with an animated favicon? Take a look at http://www.bornmatic.com and you could see a scroller thing. ;)

How to make it happen? This is how!

Prepare a picture with 16x16px, it can be ICO or PNG. Then you can make it animate or go to http://www.html-kit.com/favicon/ then upload it there. Type your text in ‘Scrolling Text (optional)‘. Give a check on ‘Animate Favicon‘ then click ‘Generate FavIcon.ico‘. Download a ZIP file available for you. Extract it and upload to your hosting provider in a same host or location. In my experience, if it uploaded to another host, it just can’t works. CMIIW.

Append this line to <head>...</head> section.

<link rel="icon" href="favicon.gif" type="image/gif">

Make sure that favicon.gif is in your path with index page, or another path in same host. You can change the name as you wanted to.

If you want to make sure that you’ve get a valid favicon feed, go to http://www.htmlkit.com/go/favicon/validator/ then check your website URL there.

That’s it! Pretty easy cake, isn’t it?

One Response to Animated Favicon

  1. How can I make the favicon roll from up to down?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: