CodeKitHubЧто это за инструмент?
favicon.ico — это не просто маленькая картинка, а формат-контейнер, способный хранить несколько размеров одной и той же иконки в одном файле, чтобы браузер, панель задач или панель закладок могли выбрать то разрешение, которое выглядит чётче всего в конкретном месте показа. Простое переименование PNG в favicon.ico этого не даёт: внутри всё равно остаётся одно изображение с неверным расширением, и хотя некоторые браузеры это терпят, многие инструменты, поисковые роботы и старые браузеры, читающие сырые байты, ожидают настоящую структуру контейнера ICO — и либо выдадут ошибку, либо покажут пустую иконку.
Этот инструмент строит настоящий ICO-контейнер: он рендерит ваш SVG в 16×16, 32×32 и 48×48, кодирует каждый размер внутри как PNG и упаковывает все три в один действительный favicon.ico по тому же формату «PNG внутри ICO», который поддерживают все браузеры и ОС начиная с Windows Vista. Вместе с ним вы получаете отдельные PNG-файлы 180×180 (размер, который использует iOS, когда сайт добавляют на главный экран) и 192×192 / 512×512 (размеры, которые запросы на установку Android и PWA берут из вашего манифеста веб-приложения).
Зачем его использовать?
- Создаёт по-настоящему валидный многоразмерный favicon.ico, а не переименованный PNG.
- За один проход покрывает все размеры иконок, нужные для реального развёртывания: 16, 32, 180, 192, 512px.
- Готовый к вставке HTML для <head> — не нужно угадывать атрибуты rel/sizes/type.
- Не квадратные SVG центрируются на прозрачном квадрате, а не растягиваются.
- Всё рендерится локально в вашем браузере; SVG никогда не загружается на сервер.
Как использовать
- Нажмите на область или перетащите в неё файл SVG-логотипа.
- Инструмент автоматически рендерит все размеры фавиконки — настраивать ничего не нужно.
- Скачайте favicon.ico для корня сайта, а также отдельные PNG-иконки.
- Скопируйте фрагмент HTML и вставьте его в <head> вашей страницы.
Пример
Ввод
logo.svg — логотип компании, векторный файл на 3 КБРезультат
favicon.ico (объединяет 16/32/48px), плюс favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngНа входе один SVG, на выходе — все файлы иконок, нужные для реального сайта.
Какой размер иконки где используется
| Файл | Размер | Используется для |
|---|---|---|
| favicon.ico | 16/32/48px (объединено) | Вкладка браузера, панель закладок, панель задач |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Резерв для браузеров, предпочитающих PNG-фавиконки |
| apple-touch-icon.png | 180×180 | Иконка на главном экране iOS при добавлении сайта |
| icon-192.png | 192×192 | Иконка на главном экране Android, манифест веб-приложения |
| icon-512.png | 512×512 | Запрос на установку PWA, иконка заставки Android |
Почему важен именно SVG-источник
Поскольку SVG хранит формы как математику, а не пиксели, рендеринг заново в 16px и в 512px оба раза стартует с абсолютно одних и тех же данных контура — на большом конце нет артефактов увеличения, а на малом не нужно идти на вынужденные компромиссы с выравниванием пикселей. Если у вас есть только PNG-логотип, этот инструмент не поможет: сначала конвертируйте или пересоздайте логотип в SVG, поскольку увеличение маленького PNG до 512px даст лишь размытый результат.
Часто задаваемые вопросы
Почему нельзя просто переименовать PNG в favicon.ico?
У файла .ico есть собственный бинарный формат контейнера (заголовок ICONDIR, указывающий количество изображений, за которым следует запись каталога для каждого изображения) — PNG, переименованный в .ico, внутри так и остаётся просто PNG с неверным расширением. Большинство современных браузеров снисходительны и всё равно его покажут, но этот инструмент строит настоящий ICO-контейнер с тремя реальными разрешениями — именно для этого формат и был создан, и именно этого ожидают более строгие читатели.
Зачем мне PNG-иконки, если favicon.ico уже есть?
favicon.ico покрывает только классический случай вкладки браузера / закладки. PNG 180×180 использует iOS, когда пользователь добавляет сайт на главный экран (apple-touch-icon), а PNG 192×192 / 512×512 запросы на установку Android и PWA берут из манифеста веб-приложения. Без них иконка на главном экране телефона превращается в обычный скриншот или пустой квадрат.
Мой логотип не квадратный — что с ним произойдёт?
Он центрируется на прозрачном квадрате при каждом целевом размере, а не растягивается, поэтому широкий или высокий логотип сохраняет правильные пропорции вместо того, чтобы быть сжатым в квадрат.
Куда положить скачанные файлы?
Поместите favicon.ico, apple-touch-icon.png, icon-192.png и icon-512.png в корневую папку вашего сайта (рядом с index.html), а затем вставьте сгенерированные теги <link> в <head> страницы.
Мой SVG куда-нибудь загружается?
Нет. SVG рендерится на локальных элементах <canvas>, а файлы ICO/PNG собираются прямо в вашем браузере. На сервер ничего не отправляется.