Конвертация PNG в ICO для чёткого фавикона
Фавикон — крошечное изображение, придающее сайту визуальную идентичность. Вы видите его во вкладке браузера рядом с заголовком страницы, в списке закладок, в выпадающем списке адресной строки истории браузера и иногда рядом с результатами поиска. Он маленький, но делает большую работу: узнаваемый фавикон помогает пользователям найти вашу вкладку среди дюжины других и сигнализирует, что сайт доделан и за ним следят. Классический формат для такого значка — ICO, и проще всего создать его из чистого квадратного PNG.
Этот инструмент берёт PNG-изображение и превращает его в ICO-фавикон прямо в браузере. Конвертация выполняется локально с использованием вашего устройства, поэтому выбранная картинка никогда не загружается на сервер. Это важно, когда иконка является логотипом или брендовым активом, который вы предпочтёте не передавать третьим сторонам. Когда файл готов — просто скачайте его.
Что такое формат ICO и почему он хранит несколько размеров
ICO — контейнерный формат для иконок, появившийся в Microsoft Windows, где он хранит значки программ, ярлыков и папок. Его ключевая особенность — и причина, по которой он стал стандартом для веб-фавиконов — в том, что один ICO-файл может содержать одно и то же изображение в нескольких разрешениях одновременно. Вместо одного фиксированного растрового изображения файл упаковывает небольшой набор квадратных картинок, позволяя браузеру или операционной системе выбрать тот размер, который подходит для конкретного места отображения.
Это по-настоящему полезно. Для вкладки браузера нужен крошечный значок, панель закладок может использовать чуть больший, а закреплённый ярлык на рабочем столе может запрашивать что-то крупнее. Благодаря многоразмерному ICO каждый контекст берёт подходящую версию — и значок остаётся чётким, а не растягивается с одного маленького растрового изображения до неузнаваемости. ICO также сохраняет прозрачность, что позволяет углам круглого или фигурного логотипа оставаться чистыми на любом цвете вкладки.
Рекомендуемые размеры фавикона
Для фавикона сайта стоит включить три размера: 16x16, 32x32 и 48x48 пикселей. Версия на 16 пикселей — та, что большинство браузеров показывает во вкладке и адресной строке. Версия на 32 пикселя используется на экранах с высоким разрешением и в некоторых видах закладок и истории — она сохраняет чёткость на современных мониторах. Версия на 48 пикселей покрывает более крупные контексты, например ярлыки сайтов в Windows. Поскольку все они живут в одном ICO-файле, вы поставляете единый актив и позволяете каждому контексту выбирать нужное.
Начинайте с квадратного PNG, чтобы ничего не растянулось. Если ваше исходное изображение прямоугольное или слишком большое, обрежьте или масштабируйте его до чистого квадрата с помощью нашего редактора размеров, а затем выполните конвертацию. Простой, контрастный дизайн читается намного лучше при 16 пикселях, чем детальная иллюстрация — отдавайте предпочтение жирным формам перед мелким текстом.
Как добавить фавикон на сайт
Получив ICO-файл, загрузите его на сайт — традиционно в корень сайта как favicon.ico. Многие браузеры найдут его там автоматически, но лучше всё же явно объявить его в заголовке HTML, чтобы не оставалось неопределённости. Добавьте такой тег link:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Поместите эту строку внутрь секции <head> ваших страниц. Атрибут rel="icon" сообщает браузеру, что этот ресурс является иконкой страницы, а href указывает, где хранится файл. Путь относительно корня, как в примере выше, работает на всех страницах сайта. После развёртывания может потребоваться жёсткое обновление или очистка кэша, прежде чем появится новый значок — браузеры агрессивно кешируют фавиконы.
Конфиденциальная конвертация в браузере
Всё происходит на вашем устройстве. Выбранный PNG считывается, декодируется и перекодируется в ICO локально — ничего не покидает вашу машину в процессе. Нет аккаунта, нет очереди, нет серверного хранилища — что делает инструмент удобным даже для невыпущенных логотипов или клиентских работ под соглашением о конфиденциальности. Для других способов подготовки и доработки графики просмотрите полный набор наших инструментов для работы с изображениями.
Часто задаваемые вопросы
Моё изображение куда-то загружается?
Нет. PNG конвертируется в ICO полностью в браузере на вашем устройстве. Ничего не отправляется на сервер и ничего не хранится — ваше изображение остаётся приватным.
Какие размеры должен включать фавикон?
Наиболее полезные размеры — 16x16, 32x32 и 48x48 пикселей. Изображение 16 пикселей отображается во вкладках браузера, а большие сохраняют чёткость значка на экранах с высоким разрешением и ярлыках рабочего стола.
Почему ICO, а не просто PNG?
ICO — давно устоявшийся формат фавикона, способный хранить несколько размеров в одном файле. Браузеры и операционная система выбирают разрешение, подходящее для каждого контекста, — значок остаётся чётким, а не масштабируется с одного растрового изображения.
Сохраняется ли прозрачность из PNG в ICO?
Да. Формат ICO поддерживает прозрачность, поэтому прозрачные области вашего PNG сохраняются, и значок аккуратно вписывается в любой цвет вкладки или фона.
Как добавить фавикон на сайт?
Загрузите ICO-файл на сайт, обычно как favicon.ico в корень, и добавьте тег link в заголовок HTML: link rel icon type image x-icon href /favicon.ico. Затем очистите кэш браузера, чтобы увидеть его.
Моё исходное изображение не квадратное. Что делать?
Сначала обрежьте или масштабируйте его до квадрата, чтобы избежать растяжения. Используйте наш редактор размеров для создания чистого квадрата, а затем конвертируйте в ICO для лучшего фавикона.