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.

faviconjsFavico.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:

Example favicon notification
Example favicon notification

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({
      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?


9 responses to “Add Favicon Animations to WordPress”

  1. I read somewhere a while ago that favicon support might be coming to WordPress core. If so I wonder if it would include support for animated favicons?

  2. @Ipstenu – Presumably the JS uses AJAX to work out when a new post has arrived, and when you are running Varnish, you need to make sure that admin_ajax.php isn’t cached for these types of purposes.

  3. I would like to use this in the WPTavern redesign to showcase new comments on a post they are viewing or on a forum thread. If they have the site loaded in a browser tab and it’s on a particular post or forum thread, it would be perfect to show them that there has been activity since the last time the browser tab was active.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: