Fun with Favicons
Have you noticed that the Community Store’s favicon is animated? I made it using Favicon.cc, a web-based paint application and image converter that lets you create custom icons for your website. It’s one of the better, and more feature-rich generators I’ve found online – with a variety of editing tools that are easy and fun to use. You can even publish your work under an open license and share it with others. The Store’s favicon is simple in design. It takes cues from the site’s visual theme and is animated across 93 frames, pixel by pixel:
Personally, I find animated icons to be really cool, and befitting of a creative space like the Community Store. But you don’t see too many of them out there and that’s because most are considered to be distracting, if not plain annoying. Just imagine trying to read an article while something is flickering in your periphery. Or if you’re like me and have an average of 20 tabs open per session, then imagine each of those carrying an animated icon dancing for your attention. So, although small and neatly tucked away in your chrome, they definitely have the potential to become disruptive.
But depending on the nature of your website, and if it’s done tastefully, I actually think an animated favicon can add a unique flair and help set you apart. What’s important is making the animation simple and subtle. Try to have smooth transitions between each frame and avoid endless loop cycles. Tease the user with a short sequence, and let them hit refresh if they want to see it again. These were all the considerations we took into account when creating the Store’s favicon.
I admit, I’ve become somewhat fascinated (maybe a little obsessed) with favicons ever since I worked on this, and it’s partly because I’ve always been a fan of art in miniature sizes. It’s just amazing how much detail can be communicated in a tiny 16×16 pixel box! And if you don’t share this enthusiasm with me yet, one look at the most inspiring repository of favicons and you’ll surely be hooked.
February 17th, 20099:41 pm at
Wow. I love Favicons. I would see them randomly and never knew how they are made. Great post. I will check it out.
February 17th, 20099:59 pm at
Fun fact: There are approximately 2.57E1347 possible single-frame favicons. This is approximately exponentially as much above the number of particles in the universe as the number of particles in the universe is above the number of inches in a mile.
February 17th, 200911:06 pm at
When they aren not overwhelming with somewhat muted colors like in the Community Store I think animated favicons are great, they show an attention to detail and a care for all aspects of the experience. All too often favicons are an afterthought anyways.
February 18th, 20095:04 am at
Well, when favicons start to flicker and attract my attention, they got ‘close me’ written all over it.
But beside that, that community store’s favicon is really neat
February 18th, 20096:49 am at
Animated favicons would be a lot less distracting (and thus their usage might become wider-spread) if only the current tab’s icon was able to animate in a browser…
August 13th, 20094:24 am at
I prefer animated favicons too… They catch attention