Динамические favicon: покажите бейдж или статус в реальном времени
Тот красный бейдж на вкладке браузера — это всего лишь перерисованный favicon. Вот как сделать это без этапа сборки.
Почему бы просто не использовать GIF?
Вы можете задать анимированный GIF как favicon, но поддержка неравномерная. Firefox его анимирует. Safari показывает только первый кадр. Поведение Chrome менялось от версии к версии. Для декорации это годится, но это неправильный инструмент для живого бейджа, потому что вы не можете менять то, что показывает GIF, во время выполнения.
Для счётчика или статуса, который обновляется, пока вкладка открыта, вам нужно перерисовывать изображение в JavaScript. Canvas даёт вам настоящий буфер пикселей, в который можно рисовать, а затем передать его ссылке favicon как data URI.
Как это работает
- 1
Загрузите базовый значок
Нарисуйте обычное изображение вашего favicon на небольшом canvas, обычно 32x32. Это значок, который пользователи видят, когда сигнализировать нечего.
- 2
Нарисуйте бейдж поверх
Когда есть счётчик, нарисуйте маленький закрашенный круг в углу и отрисуйте число внутри него. Держите высокий контраст, чтобы он читался при 32 пикселях.
- 3
Подмените href у favicon
Задайте href ссылки favicon равным выводу canvas. Браузер немедленно перерисовывает вкладку вашим новым изображением.
- 4
Обновляйте при каждом изменении
Запускайте нарисовать-и-подменить заново всякий раз, когда счётчик меняется, и перерисовывайте простой значок, когда он падает до нуля.
Подмена на чистом JavaScript
function setFaviconBadge(count) {
const canvas = document.createElement("canvas");
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext("2d");
// draw your base icon first (an <img> you preloaded)
ctx.drawImage(baseIcon, 0, 0, 32, 32);
if (count > 0) {
ctx.fillStyle = "#e5484d";
ctx.beginPath();
ctx.arc(23, 9, 9, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.font = "bold 12px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(count > 9 ? "9+" : String(count), 23, 10);
}
let link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement("link");
link.rel = "icon";
document.head.appendChild(link);
}
link.href = canvas.toDataURL("image/png");
}baseIcon — это Image, который вы загрузили один раз. Вызывайте setFaviconBadge(unread) всякий раз, когда число меняется. Ограничьте отображение до 9+, чтобы две цифры оставались читаемыми.
Частые вопросы
Как показать счётчик непрочитанных на вкладке браузера?
Нарисуйте свой значок и бейдж с числом на canvas, затем задайте href ссылки favicon равным canvas.toDataURL(). Запускайте это заново всякий раз, когда счётчик меняется. Отдельного API бейджа вкладки для обычных веб-страниц не существует.
Можно ли использовать анимированный GIF как favicon?
Можно, но поддержка непоследовательна. Firefox его анимирует, Safari показывает первый кадр, а Chrome вёл себя по-разному. Для живого бейджа, который обновляется, используйте canvas и подменяйте href.
Вредит ли динамический favicon производительности?
Нет. Нарисовать canvas 32x32 и задать data URI дёшево. Просто перерисовывайте только тогда, когда значение меняется, а не по таймеру, и вы не заметите затрат.