Как изменить Favicon сайта из JavaScript

16.02.2021

12512

Для замены Favicon во вкладке браузера достаточно у элемента <link rel="icon"> в атрибуте href указать путь до нового изображения, но это работает только при условии, что в <head> прописан только один элемент <link>:

<link rel="icon" href="/favicon.ico">

HTML

Замена на чистом 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');

Т.к. браузеры поддерживают 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">

HTML

Скорее всего браузер будет использовать иконку в формате 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.

Мигание Favicon

В данном примере идет поочерёдная смена двух изображений 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>

HTML

Покадровая анимация Favicon

Для следующего примера понадобятся 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>

HTML

Рисование Favicon в Canvas

Еще один пример, как отобразить количество «новых сообщений» в иконке браузера с помощью 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>

HTML