The Making of an Animated Favicon
Favicons are actually at their most useful when you’re not active on a tab. Here’s an example:
Imagine you’re backing up photos from your recent summer vacation to a cloud service. While they are uploading, you’ve opened a new tab to gather details about the places you went on vacation to later annotate those photos. One thing led to the other, and now you’re watching Casey Neistat on the seventh tab. But you can’t continue your YouTube marathon without the anxious intervals of checking back on the cloud service page to see if the photos have been uploaded.
It’s this type of situation where we can get creative! What if we could dynamically change the pixels in that favicon and display the upload progress? That’s exactly what we’ll do in this article.
In supported browsers, we can display a loading/progress animation as a favicon with the help of JavaScript, HTML
<canvas>and some centuries-old geometry.
While the article primarily deals with a square favicon, the author also provides code for a circular favicon as well.
