Favicon Notification Indicator

Description/Instructions

If you receive a notification on the site, this snippet will add a dot to the favicon indicating you have an unread message/notification to been taken care of.

Visit https://codicts.com to support the developer of this snippet.

function add_favicon_status_indicator() {
?>
<script type="text/javascript">
/*
* Add favicon status indicator for notifications
* Author: CODICTS
*/
(function($){
$( document ).ready( function(){
$( '<script>', {
src: 'https://cdnjs.cloudflare.com/ajax/libs/favico.js/0.3.10/favico.min.js',
type: 'text/javascript',
onload: function() {
setTimeout(function(){
var favico = new Favico({
// position : 'up',
animation: 'popFade',
// bgColor : '#5CB85C',
// textColor : '#ff0',
element: $( 'head link[rel="icon"]')[ 0 ]
});
let is_showing = false;
let count_int = $( 'span.unread-indicator' ).length;
setInterval(function(){
if ( $( 'span.unread-indicator' ).not( '.hidden' ).length && ! is_showing ) {
favico.badge(' '); // blank badge indicator
is_showing = true;
} else if ( $( 'span.unread-indicator.hidden' ).length === count_int && is_showing ) {
is_showing = false;
favico.reset();
}
},1000);
},1 );
}
}).appendTo( 'head' );
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_favicon_status_indicator');

  • PHP
Copy Code

Let's Chat About this Snippet