Последнее обновление: 7 Марта 2025 г.

Наложить две фавиконки друг на друга очень просто

Изменение фавиконки для той или другой вебстраницы требуется нечасто, но иногда все же необходимо. Вот типичные ситуации, когда может потребоваться это сделать:

Сигнализирование пользователю об изменении состояния на странице. Например, о поступивших сообщениях, прекращении авторизации (т.е. после разлогинивания) и т.д.
Для технических страниц сайтов. Это удобно тем, кто занимается их (сайтов) обслуживанием.
Для сайтов, взаимосвязанных друг с другом или использующих подгрузку с других вебстраниц во фреймы.

Изменение фавиконок особенно удобно, если требуется предупредить пользователя об актуальных событиях, происшедших на открытой им вебстранице в случае, когда он просматривает какую-то другую страницу.

Следует отметить, однако, что некоторые пользователи вообще отключают фавиконки в браузерах. Поэтому использование их не может являться достоверным средством взаимодействия с пользователем.

Как задать фавиконку на html-странице?

Это сделать очень просто. Нужно в разделе <head>...</head> прописать тег примерно такого вида:

 <link rel="icon" href="/favicon.png" type="image/png" />

Как правило, файла фавиконок располагаются в корневом каталоге сайта, но это - лишь традиция, вообще же она может находиться практически в любом месте.

Нередко, подобных тегов на html-странице присутствует не один, а несколько. Каждый из них содержит ссылку на фавиконку соответствующего размера и/или предназначенную для того или иного типа дисплеев. При этом браузер выберет из них лишь одну, наиболее подходящуую, по его мнению. Однако, не будет большой ошибки, если задать один-единственный тег <link ... />, предназначенный для показа универсальной фавиконки.

Какого формата файлы использутся для фавиконок?

Вообще, "классическим" форматом таких файлов являются файлы с расширением .ico. Также используются форматы .png, .gif. Отдельно стоит сказать о технологии SVG. Этот формат, во-первых, является векторным, а это означает масштабируемость, т.е. отличное качество при любых разрешениях и размерах фавиконок. Во-вторых, файлы SVG легко модернизировать программным способом (т.е. средствами языка javascript).

А вот с "обычными" (т.е. растровыми) графическими файлами придется приложить немного усилий. Например, использовать технологию canvas.

Пример наложения двух фавиконок на <canvas> и отображение в закладке браузера

Допустим, есть файлы /favicon.png и /technical-pictures/ramka-1.png Подпись вместо . Обе этих картинок взяты с нашего сайта в качестве примера.

Рассмотрим такой код:

<html>
<head>
    <link rel="icon" href="/favicon.png" type="image/png" />
</head>
<body>

<script type="text/javascript">
// Создаем canvas и задаем его размеры, рамку:
var canvas = document.createElement('canvas');
canvas.height = 40;
canvas.width = 40;
canvas.style.border = 'solid 1px';
// Создаем контекст для canvas
var ctx = canvas.getContext('2d');

var img = new Image(); // Создаем новое изображение
img.src = '/favicon.png'; // Задаем путь (источник) к рисунку для этого изображения

var pastedImage = new Image(); // Создаем еще одно новое изображение
pastedImage.src = '/img/technical-pictures/ramka-1.png';
// Рисунок должен успеть загрузиться на canvas. Это займет какие-то миллисекунды, но все-таки это - время. Поэтому придется использовать обработчик события onload
    img.onload = function () {
// Как только рисунок img загрузился на canvas, отображаем этот рисунок на нем
        ctx.drawImage(img, 0, 0, 40, 40);
// Устанавливаем прозрачность на уровне 0.6, т.к. следующий рисунок имеет НЕпрозрачный белый фон
        ctx.globalAlpha = 0.6;
// Рисуем второе изображение на canvas
        ctx.drawImage(pastedImage, 0, 7, 40, 40);
// Добавляем полученный canvas в DOM. После этого он становится видимым на странице, открытой в браузере
//      document.body.appendChild(canvas);
// Вставка нового тега для фавиконки. Нужно именно НОВЫМ тегом <link .../>, т.к. в старых браузерах (в частности, Firefox) замена параметра href у уже имеющегося тега НЕ МЕНЯЕТ фавиконку (в более новых браузерах - меняет)
        var n = document.createElement('link');
        n.setAttribute('rel', 'icon');
        n.setAttribute('href', canvas.toDataURL());
        document.querySelector('head').appendChild(n);
    };
</script>

</body>
</html>

Обсуждение

Код является кроссбраузерным, работает, в том числе, и в браузерах 10+ -летней давности.

Как видим (см. ниже ⇓), первый рисунок (фавиконка этого сайта) является непрозрачным, а вот второй (рамка) - полупрозрачный.

В целом, пояснения даны по коду, поэтому, видимо, все ясно. Отметим лишь ряд моментов дополнительно.

1. Оба рисунка имеют непрозрачный фон. И если просто наложить один на другой, то второй рисунок частично закроет первый. Поэтому предварительно используется команда ctx.globalAlpha = 0.6 для установления полупрозрачности. С этого момента все, что добавляется на canvas, будет иметь полупрозрачный цвет - до тех пор, пока свойство globalAlpha не будет изменено.

2. В выбранном варианте в конец раздела <head> добавляется новый тег <link... /> с двумя рисунками. наложенными друг на друга. После чего уже имеющийся до этого тег можно, по идее, удалить. Однако, также возможен и другой вариант, когда новый тег не добавляется, вместо этого изменяется атрибут href у уже имеющегося тега. Практика показала, однако, что этот второй способ вполне работает в более-менее новых браузерах, а вот в некоторых старых - нет. Поэтому для надежности, в целях кроссбраузерности, целесообразно использовать первый способ, т.е. добавлять новый тег <link... /> , а потом (при желании) - удалить старый, который был до этого.

3. При желании, на полученный рисунок можно вначале нанести какие-то дополнительные графические элементы, а уже потом создавать из него фавиконку и добавлять ее в тег <link... /> .

Вот что получается в результате:

Комментарии:

Всего комментариев:0