Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента <link rel="icon"> в атрибуте href указать путь до нового изображения, но это работает только при условии, что в <head> прописан только один элемент <link>:
<link rel="icon" href="/favicon.ico">
Замена на чистом JS:
var list = document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]');list.forEach(function(element) { element.setAttribute('href', '/new-favicon.png');});
Замена на JQuery:
$('link[rel="icon"], link[rel="shortcut icon"]').attr('href', '/new-favicon.png'); JS
Т.к. браузеры поддерживают Favicon в разных форматах, соответственно в <head> прописывают несколько элементов <link>, например:
<link rel="icon" href="/favicon.svg" type="image/svg"> <link rel="icon" href="/favicon.png" type="image/png"><link rel="icon" href="/favicon.ico" type="image/x-icon"><link rel="shortcut icon" href="/favicon.ico">
Скорее всего браузер будет использовать иконку в формате SVG.
В таком случаи нужно будет удалить все текущие элементы и вставить новый элемент <link rel="icon" href="/new-favicon.png">:
// Удаление старых элементовvar list = document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]');list.forEach(function(element) { element.parentNode.removeChild(element);}); // Вставка нового элементаvar link = document.createElement('link');link.rel = 'icon';link.href = '/new-favicon.png';document.head.appendChild(link);
JQuery:
// Удаление старых элементов$('link[rel="icon"], link[rel="shortcut icon"]').remove(); // Вставка нового элемента$('head').append('<link rel="icon" href="/new-favicon.png">');
Далее приведены примеры разных эффектов смены Favicon c применением JQuery.
Мигание Favicon
В данном примере идет поочерёдная смена двух изображений c использованием таймера SetInterval.
<button id="start">Запустить</button><button id="stop">Остановить</button> <script>var timer;var last_icons = []; $('#start').click(function(){ // Сохранение исходных элементов в массив и удаление last_icons = []; $('link[rel="icon"], link[rel="shortcut icon"]').each(function(){ last_icons.push(this.outerHTML); $(this).remove(); }); // Создание нового элемента link var link = document.createElement('link'); link.rel = 'icon'; $('head').append(link); var counter = 1; timer = setInterval(function(){ if (counter == 1) { link.href = '/favicon-b.png'; counter = 2; } else { link.href = '/favicon-a.png'; counter = 1; } }, 300);}); $('#stop').click(function(){ if (last_icons.length != 0) { clearInterval(timer); // Удаление новой иконки $('link[rel="icon"], link[rel="shortcut icon"]').remove(); // Возвращение исходных last_icons.forEach(function(element) { $('head').append(element); }); }});</script>