CODEWITHSUNDEEP
javascriptjqueryhtml
Zack
Zack

Reputation: 501

Using an animated gif as my website's favicon

This Js can make a video & simple image as your site's favicon by using this:

var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');

here's the Github page.

Is there a way to make an animated gif as my website's favicon using this concept.

P.s: I'm noob so if anybody make a fiddle & show a demo that'll be great!

Upvotes: 0

Views: 6133

Answers (1)

edelwater
edelwater

Reputation: 2802

You can simply use the GIF as regular in your HTML page and if it is animated it will be animated as well in the browser, just rename it to favicon.ico and add it as favicon tag in the header (example: http://55chan.org/ :) )

Sadly it will only work in Firefox, e.g.:

notice Chrome does not support it:

(Outside of using a single Animated Gif (see https://en.wikipedia.org/wiki/Favicon#Image_file_format_support). You can use the workaround as specified in the comments by dynamically changing the image.)

Broader What you have to take into account is that it is not only your browser that will show you the animated favicon. Lots of applications will "spider" your site and will use the icon in different ways e.g. to show as icon next to personal link collections or in search pages.

A while ago i wrote https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php which is basically a crawler for many kind of favicons taking into account data uris, different http status codes, wrong mimetypes, etc... but it will not have onboard it's own javascript parser to find animated sequences provided by a client-side script. I doubt that any crawler will actually do this.

So take into account the purpose and that favicons in general are not only ment as identification next to a uri in a browser or browser bookmarks "list".

Upvotes: 1

Related Questions