Для замены Favicon во вкладке браузера достаточно у элемента <link rel="icon">
в атрибуте href указать путь до нового изображения, но это работает только при условии, что в <head>
прописан только один элемент <link>
:
Замена на чистом JS:
var list = document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]');
list.forEach(function(element) {
element.setAttribute('href', '/new-favicon.png');
});
Замена на JQuery:
Т.к. браузеры поддерживают 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">
:
JS:
// Удаление старых элементов
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.
В данном примере идет поочерёдная смена двух изображений c использованием таймера SetInterval.
Используемые изображения favicon-a.png и favicon-b.png:


<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>
Для следующего примера понадобятся 24 изображения с именами от favicon-1.png до favicon-24.png.
























<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();
});
var num = 1;
var link = document.createElement('link');
link.rel = 'icon';
link.id = 'new-icon';
document.head.appendChild(link);
timer = setInterval(function(){
link.href = '/favicon-' + num +'.png';
num++;
if (num == 25) {
num = 1;
}
}, 100);
});
$('#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>
Еще один пример, как отобразить количество «новых сообщений» в иконке браузера с помощью Canvas.
Принцип такой же – удаляются все текущие иконки, создается холст сanvas, в него вставляется изображение и рисуется круг с цифрой, дале он вставляется в <head>
новым элементом <link>
с атрибутом href
в формате data:image/png;base64...
<button onclick="set_favicon(1); return false;">1 оповещение</button>
<button onclick="set_favicon(2); return false;">2 оповещения</button>
<button onclick="set_favicon(3); return false;">3 оповещения</button>
<button id="clear">Убрать</button>
<script>
// Сохранение исходных элементов в массив
var last_icons = [];
$('link[rel="icon"], link[rel="shortcut icon"]').each(function(){
last_icons.push(this.outerHTML);
});
function set_favicon(num){
var canvas = document.createElement('canvas');
canvas.height = 16;
canvas.width = 16;
var ctx = canvas.getContext('2d');
// Вывод картинки
var img = new Image();
img.src = '/favicon.png';
// Ждем пока загрузится изображение и продолжаем
img.addEventListener('load', function(){
ctx.drawImage(img, 0, 0);
// Рисуем круг
ctx.beginPath();
ctx.fillStyle = "#056ecb";
ctx.arc(11, 5, 5, 0, 2 * Math.PI, true);
ctx.fill();
// Выводим текст
ctx.font = '9px bold Tahoma';
ctx.fillStyle = '#fff';
ctx.fillText(num, 9, 8);
// Удаление старых элементов link
$('link[rel="icon"], link[rel="shortcut icon"]').remove();
// Вставка новой иконки
var n = document.createElement('link');
n.setAttribute('rel', 'icon');
n.setAttribute('href', canvas.toDataURL());
document.querySelector('head').appendChild(n);
}, false);
}
$('#clear').click(function(){
// Удаление новой иконки
$('link[rel="icon"], link[rel="shortcut icon"]').remove();
// Возвращение исходных
last_icons.forEach(function(element) {
$('head').append(element);
});
});
</script>