Favicon и ICO в Base64

Как конвертировать favicon в Base64

1. Перетащите favicon.ico, PNG или SVG в поле или выберите файл через диалог.
2. Для PNG поставьте Макс. ширина 32 (или 48), чтобы случайно не встроить иконку приложения на 512 пикселей. Файлы ICO и SVG кодируются как есть.
3. В списке Формат вывода уже выбран Data URI. Скопируйте результат и вставьте его в href:

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

В превью иконка показана вместе с размером в пикселях, так что до вставки видно, действительно ли PNG размером 32×32.

ICO, PNG или SVG

ICO может хранить несколько картинок сразу: в favicon.ico часто лежат 16×16, 32×32 и 48×48, и все они попадают в Base64. Если строка оказалась длиннее, чем вы ждали, причина в этом. Для вкладки браузера обычно хватает одного PNG 32×32.

SVG-фавиконка может реагировать на тёмную тему через медиазапрос prefers-color-scheme внутри самого SVG. Если вы поддерживаете старые версии Safari, оставьте PNG как запасной вариант.

Когда стоит встраивать фавиконку

• HTML в одном файле: экспортированные отчёты, офлайн-документация, дашборд, сохранённый одним файлом. Относительный путь favicon.ico после переноса файла будет указывать в пустоту.
• Внутренние инструменты и локальные серверы, где добавить маршрут для статического файла сложнее, чем одну строку HTML.
• Динамические фавиконки: значок уведомления или цвет статуса, нарисованный на canvas и применённый через link.href = canvas.toDataURL("image/png").

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

Как нарисовать favicon на JavaScript

Для индикатора статуса файл вообще не нужен. Нарисуйте картинку на canvas 32×32 и присвойте data URI уже существующей ссылке на иконку:

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

Если иконка не меняется

• Показывается старая иконка. Браузеры агрессивно кешируют фавиконки, причём отдельно от страницы. Перезагрузите страницу без кеша или откройте её в приватном окне.
• Не показывается ничего. Проверьте, что href начинается с правильного типа: data:image/png;base64,, data:image/x-icon;base64, или data:image/svg+xml;base64,. Кроме того, у корневого элемента SVG-иконки должен быть атрибут xmlns.
• Несколько тегов <link rel="icon">. Браузер выбирает между ними по типу и размеру, и встроенная иконка может проиграть другой объявленной. Удалите лишние.

Как превратить её обратно в файл

Чтобы получить favicon.ico обратно из data URI, воспользуйтесь Base64 в ICO. Для SVG-иконок SVG в data URI умеет делать и URL-кодированный вариант, который часто короче Base64.

Вопросы и ответы