Add Favicon Animations to WordPress

Animated favicons are lighting up the web lately with real-time notices for activity. You’ve probably already seen this in action with websites like Gmail and Facebook open in your browser. It’s a cleverly devised way to keep you returning to those browser tabs, but favicon animations are not just for major web services anymore.

Favico.js is an open source script that lets you animate your website’s favicon with badges, images or videos. As luck would have it, someone has already integrated this script into a plugin for WordPress. Favicon Notifications uses favico.js to show the number of unread posts since your viewer’s last visit. If you already have a favicon in place, all you have to do is activate the plugin and it will begin working immediately.

Here’s an example of what it will look like in the browser when there are new unread posts available:

Favicon Notifications will show the number of new posts in the last 30 days since your last visit. It will also show if there is a new post while you are already surfing the website. The plugin requires that your favicon be in .ICO, .PNG or .GIF format and the file should be located on the same domain as your website. If you have any issues, check to make sure that your theme includes the link rel=”shortcut icon” tag in your site’s “head” tag.

How to Customize Favicon Notifications

If you want to make changes to the badges and animation style, the file you want to edit is: js/favicon.js. The favico.js documentation details how you can customize the notifications. For example, if you want to change the animation to ‘fade’ and the color of the notification to green, you’d edit the the plugin’s js/favicon.js file like so:

  var favicon = new Favico({
      animation:'fade'
      bgColor : '#5CB85C',
      textColor : '#ff0',
    });

In the next version the developer plans to make it easier to customize the notifications by adding more built-in controls, including:

• 4 types of animations
• Color settings
• Shape settings
• Add a custom favicon
• Select a time period for the new posts
• Select a time period for the favicon update

The minute I saw this, I wondered if it could be adapted to work with BuddyPress notifications for real-time updates. It seems like a natural fit. If any of you BuddyPress wizards experiment with that, let me know.

The Favicon Notifications plugin provides a creative way to add some action to your oft-overlooked favicon and is available for free from the WordPress plugin repository. An animated favicon is just a tiny detail but it helps visitors to be aware of fresh content on your site. When was the last time you even thought about your favicon?