Tinyicon — счетчик в favicon на js

Tinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.

Использование

Использовать ее просто. Подключаем JS файл и пишем

Tinycon.setBubble(6);

Библиотека так же поддерживает опции такие как выбор цвета, шрифта и позиционирование счетчика:

Tinycon.setOptions({
    width: 7,
    height: 9,
    font: '10px arial',
    colour: '#ffffff',
    background: '#549A2F',
    fallback: true
});

Поставить можно на что угодно, ниже я приведу код для личных сообщений и непрочитанных новостей, далее по аналогии можете выбрать любой параметр, который можно там выводить.

Для личных сообщений перед </body> нужно добавить:

<script src="{THEME}/js/tinycon.js"></script>
<script>
   $(document).ready(
    function(){
     if( {new-pm} > 0 ) 
      Tinycon.setBubble(
      {new-pm}
	  );
	}
   );
</script>

Как видно, используется просто количество непрочитанных сообщений пользователем — {new-pm}.

Для новых материалов на сайте перед </body> нужно добавить:

<script src="{THEME}/js/tinycon.js"></script>
<script>
   $(document).ready(
    function(){
     if( {last-count} > 0 ) 
      Tinycon.setBubble(
      {last-count}
	  );
	}
   );
</script>

Так же нужно установить плагин, чтобы выводить количество непрочитанных сообщений:

В итоге получаем вывод:

Ссылка на github
Автор библиотеки: Tom Moor