
Favico.js – Animated favicons - jm3
http://lab.ejci.net/favico.js/
======
vortico
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/](http://glench.com/hash/)

~~~
Too
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.

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

------
buro9
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

~~~
malandrew
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.

------
taspeotis
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.

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

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

[https://github.com/discourse/discourse/blob/master/app/contr...](https://github.com/discourse/discourse/blob/master/app/controllers/static_controller.rb#L94-L126)

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

------
sergiotapia
It has both MIT and GPL licenses.

For us non-lawyers, what does this mean?

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

[http://savannah.gnu.org/maintenance/DualLicensing/](http://savannah.gnu.org/maintenance/DualLicensing/)

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

~~~
simple10
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.

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

------
franze
reminds me, i once coded a webcam2favicon streamer in literate coffeescript
[https://github.com/franzenzenhofer/webcam2favicon](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.

------
amatriain
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](https://github.com/ejci/favico.js/issues/85)

------
dvdplm
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!)...

~~~
Mahn
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.

------
herbst
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.

------
Dylan16807
Why not set your favicon to a gif?

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

~~~
zeta0134
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.

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

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

------
hhw3h
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.

------
sova
this is sweet. good werk

