Skip to content

Snippets / PHP

PHP

Favicon Notification Indicator

C CoDicts · 300 views · Updated 2 years ago
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 · 41 lines

Discussion 2

Ask a question or share how you used this.

Log in to join the discussion.
BertP 1 year ago

Is this still functional? What actions trigger the notification? Post replies, comments, etc?

krackalaka 1 year ago

Hi, Great snippet! The dot is showing as red. Do you know why? Thank you!

CoDicts 1 year ago

You can change color within the snippet. // bgColor : '#5CB85C', (remove the // from this and update the color code) Thanks, Team CoDicts

Voxel Guide assistant
Ask about snippets, addons & how-tos

Hey — how can I help?

I can dig through the library for snippets, addons, and tutorials.

AI can be wrong — double-check anything important.