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

Для замены 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');
});
JS

Замена на 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">
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);
JS

JQuery:

// Удаление старых элементов
$('link[rel="icon"], link[rel="shortcut icon"]').remove();

// Вставка нового элемента
$('head').append('<link rel="icon" href="/new-favicon.png">');
JS

Далее приведены примеры разных эффектов смены Favicon c применением JQuery.

16.02.2021
3354

Комментарии

, чтобы добавить комментарий.

Другие публикации

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
18430
+19
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
25730
+12
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
7718
+3
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
6446
+3
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
36803
+23
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
21325
+5