Реализовать динамическое изменение фавикона на удивление просто. Нам понадобится всего лишь три строки кода на jQuery. Вот они…

function changeFavicon(src) {
    $('link[rel="shortcut icon"]').attr('href', src);
}

Навесим изменение фавикона на кнопку или ссылку с классом nectar-button. Полностью весь код будет выглядеть следующим образом:

jQuery(function() {
	function changeFavicon(src) {
		jQuery('link[rel="shortcut icon"]').attr('href', src);
	}
	
	jQuery('body').on('click', '.nectar-button', function(e) {
        e.preventDefault();
		var src = '';
		src = '//google.com/favicon.ico';  // путь до новой картинки
		changeFavicon(src);
	});
});

Супер просто, не правда ли! Где это может пригодиться? Например, можно повесить изменение фавиконки на кнопку «Купить» в интернет-магазине. Или же для чата. При появлении нового сообщения, пиктограмма станет значком-уведомлением о новом сообщении.

Добавить комментарий