Favico.js – Animated favicons | Hacker News Reader

Favico.js – Animated favicons

lab.ejci.net

163 pointsjm332 comments

On Firefox on Linux, the favicon flickers if changed quickly in this example.

The webcam is a hilarious example. Reminds me of this 1-dimensional video game you can play in your address bar. http://glench.com/hash/

Video and webcam flicker too.

On Windows as well. Seems to be a general Firefox problem.

Once the images are loaded it doesn't flicker, if you press the +1 button a few times it flickers but when you go back with -1 everything is already loaded and it doesn't flicker.

Maybe use 'new Image().src' to preload the images?

What I want from favicons is SVG support.

It makes so much sense it hurts, especially when we think of desktop links, home page pins, etc.

The whole "bundle multiple sizes of animated files into one container" is crazy when they are nearly always different resolutions of precisely the same file.

If we have SVG we could modify the SVG at runtime to have it display additional data really easily.

As for video in favicons... kill me now. SVGs and a strict limit on favicon sizes would be good (enforced by browsers, ditch anything over 50KB - it should be more than enough!).

A nice bug I saw recently was that a server could be instructed to send an infinitely sized favicon, and the browser would happily consume it. Nice way to drain a phone battery, use all of the connection bandwidth, and just to play havoc.

What I want from favicons:

1) SVG

2) SVG support for icons in all major OS's so that desktop links and homepage links just work as SVG

3) Max-size enforced by browsers

Do SVGs really perform better than pixel are for what favicons are used for? I was under the impression that vector graphics performs poorly at small sizes.

Atlassian Bamboo does this really well: if your tab is open on a build that's in progress the favicon will represent how far along building it is.

Great example of a micro-library. Small, does one thing and does it well.

Side note on fancy favicon stuff ... be sure to check out:

https://github.com/discourse/discourse/blob/master/app/contr...

You want your favicon asset on the same domain serving the page otherwise there is a bunch of CORS work.

It has both MIT and GPL licenses.

For us non-lawyers, what does this mean?

You get to choose the license that works best for you.

http://savannah.gnu.org/maintenance/DualLicensing/

Isn't MIT compatible with GPL though ? If it is, what's the point of having both ?

From a business's perspective, the MIT license is similar the BSD license: you can incorporate MIT licensed code into commercial products/proprietary code and only have to include copyright notices. GPL has source code disclosure implications which can be deal breakers for some businesses.

I think he was asking why anyone would choose GPL, considering MIT is more permissive in every way.

Making something dual licensed allows for the next dev to make modifications and then release those mods under his/her preferred license. You could make a mod of favicon.js and release your mod under GPL to ensure any further modification of your code and your favicon.js branch stays under GPL.

It's possible to release a mod under GPL when the original license is just MIT.

reminds me, i once coded a webcam2favicon streamer in literate coffeescript https://github.com/franzenzenhofer/webcam2favicon so basically the readme is the code.

it's from 2013, still works in FF, chrome seems to have changed the way they handle changes in the favicon.

It is a very nice library. However be aware that it currently has issues in chrome if your page has several icons: https://github.com/ejci/favico.js/issues/85

This is quite lovely. Very good job. :)

I for one would be very curious to read about how this works (too lazy to read code right now!)...

Didn't read the code of this specific project but if recall correctly, you can change the favicon by setting it in the dom to the base64 representation of the icon data any time. From there, generating animations is just a question of filling pixels data with the canvas API and getting the resulting base64 string out of said API as well. Obviously all of this works only if the browser is relatively modern.

There is not a single Favicon visible for me on this site. Guess they are all loaded remotely or something. No idea. Chrome / Ublock Origin / Privacy Badger.

Why not set your favicon to a gif?

Does that work? I thought gifs weren't valid format for a favicon?

correct

They aren't, but many browsers still display them, and last I checked both Firefox and Chrome animate them. You shouldn't use them if you can help it.

So does this js work for IE and Safari? If so, we've got a polyfill!

favicon.ico is a Windows icon, but icons specified in <link rel=icon> don't have to be.

Animated favicons are a huge distraction and suck. From the looks of it this project aims to make the favicon display useful information like notification counts instead of animated loops.

Now that just looks useful. I can think of several uses. Thanks

When running a cloud based continuous deployment build it would be an awesome way to get an indication that the build successfully deployed or failed.

this is sweet. good werk

Reply on news.ycombinator.com