RunToolRunГенератор Favicon
Создайте фавиконы для вашего сайта.
Как создать фавикон
Загрузите изображение
Перетащите логотип или иконку — лучше всего квадратное изображение.
Сгенерируйте все размеры
Инструмент создаёт каждый размер фавикона, нужный браузерам и устройствам.
Скачайте пакет иконок
Получите файлы плюс HTML-теги для вставки в head вашего сайта.
Фавикон давно перестал быть одним файлом
Изначально фавикон был единственной иконкой 16×16, которую браузер показывал в адресной строке. Современные браузеры и операционные системы просят тот же знак в нескольких размерах и форматах: маленькую иконку для вкладки, крупнее — для закладок, версию 180 пикселей для ярлыка на домашнем экране iOS, а также 192 и 512 пикселей, на которые ссылается веб-манифест для Android и установленных веб-приложений.
Если отдать только файл 16×16, всем остальным контекстам придётся его увеличивать, а увеличенное 16-пиксельное изображение выглядит ровно так плохо, как звучит. Этот инструмент делает полный набор из одного исходника высокого разрешения, чтобы каждый контекст получил версию, нарисованную под нужный размер.
ICO, PNG и SVG
Формат .ico — это контейнер, который может хранить несколько разрешений в одном файле, традиционно 16, 32 и 48 пикселей. Браузер сам выбирает подходящее. Он остаётся самым безопасным запасным вариантом и именно его браузер запрашивает из корня сайта, когда никакая иконка не объявлена явно.
PNG-файлы объявляются в head страницы с конкретными размерами, и именно их фактически использует большинство современных браузеров. SVG-фавиконы поддерживаются в актуальных браузерах и остаются чёткими в любом размере, но охват не полный — SVG стоит предлагать вместе с PNG и ICO, а не вместо них.
Дизайн под шестнадцать пикселей
На 16 пикселях у вас примерно бюджет детализации одной буквы. Логотипы, которые хорошо смотрятся на визитке — тонкие штрихи, градиенты, текстовая часть, мелкие внутренние детали — превращаются в серое пятно. Выживают знаки простые, контрастные и собранные из нескольких крупных форм.
Обычное решение — не уменьшать полный логотип, а взять из него один элемент: инициал, символ, характерную форму. Проверяйте 16-пиксельную версию в реальном размере, а не увеличенной, и обязательно на светлой и тёмной теме браузера: знак, который держится на белом фоне, в тёмной теме исчезает полностью.
Куда класть файлы
Положите favicon.ico в корень сайта — браузеры запрашивают этот путь автоматически, даже если его нигде не объявляли. Размеры PNG и иконку apple-touch объявите явно в head документа, а иконки 192 и 512 пикселей перечислите в веб-манифесте, чтобы Android и установленные веб-приложения их нашли.
Фавиконы кэшируются агрессивно — часто агрессивнее всего остального на сайте. После замены ждите, что старая иконка какое-то время будет держаться в вашем же браузере; жёсткая перезагрузка или чистый профиль — надёжный способ убедиться, что отдаётся новый файл.
Исходник решает всё
Генератор может только уменьшать. Если загрузить изображение 200 пикселей, версия на 512 будет размытой, потому что взять недостающие детали неоткуда. Начинайте с квадратного исходника минимум 512 пикселей, а лучше 1024 — тогда каждый размер набора получится честным уменьшением, а не растягиванием.
Векторный исходник ещё лучше: из SVG или файла редактора можно отрисовать любой размер без потерь. Если логотип существует в векторе, экспортируйте из него крупный PNG именно для генерации, а не берите первое попавшееся изображение с сайта.
Прозрачность и форма
Прозрачный фон делает иконку универсальной: она ляжет и на светлую, и на тёмную панель вкладок. Но помните, что iOS для ярлыка на домашнем экране прозрачность не поддерживает и подставит чёрный фон — для apple-touch версии нужен непрозрачный фон нужного вам цвета.
Операционные системы также сами скругляют углы ярлыков по своим правилам. Не рисуйте скругление и тени в самой иконке: система добавит своё поверх, и получится двойная рамка. Отдавайте плоский квадрат и позвольте платформе оформить его так, как она это делает для всех остальных приложений.