У вас уже есть логотип. Вам нужно превратить этот логотип в кучу крошечных файлов иконок, которые ожидает браузер — favicon.ico, горстку PNG определённых размеров, веб-манифест и HTML, чтобы всё это связать. Эта конвертация механическая, и вы можете сделать её примерно за минуту, ничего не устанавливая.
Загвоздка в том, что не всякий логотип уменьшается изящно. Так что здесь и быстрый путь, и как исправить логотип, превращающийся в кашу при 16 пикселях.
Короткая версия
- Получите ваш логотип как квадратное изображение — в идеале 512×512 или больше, на прозрачном или сплошном фоне.
- Перетащите его в генератор favicon.
- Скачайте сгенерированный набор и положите файлы в корень вашего сайта.
- Вставьте предоставленный HTML-фрагмент в ваш
<head>.
Это вся работа. Генератор выдаёт favicon.ico, PNG на 16, 32, 48, 180, 192 и 512, webmanifest и точные теги <link> — так что вы не обрезаете вручную шесть изображений и не гадаете о синтаксисе манифеста.
Сначала подготовьте логотип — здесь качество выигрывается или теряется
Favicon живёт в размере 16×16 во вкладке браузера. Любая деталь, что не может пережить этот размер, потрачена впустую. Потратьте две минуты здесь — и результат выглядит резко везде.
Сделайте его квадратным. Favicon квадратные. Широкий горизонтальный логотип обрежется полосами или сожмётся. Обрежьте до самого узнаваемого элемента — обычно знака или единственной инициалы — и центрируйте в квадратном кадре.
Уберите словесный знак. Название вашей компании полностью не будет разборчивым в размере вкладки. «Acme Corporation» становится серым пятном. Оставьте символ или одну букву, а заголовок вкладки пусть несёт название.
Проверьте контраст на обеих темах. Вкладки браузеров бывают светлыми и тёмными. Тёмно-синяя иконка пропадает на тёмной вкладке; бледная иконка пропадает на светлой. Если ваш знак одного плоского цвета, убедитесь, что этот цвет читается на обеих. Тонкая обводка или маленькая сплошная фоновая плашка могут помочь.
Оставьте воздух. Добавьте немного отступа внутри квадрата, чтобы иконка не жалась к краям. Она будет выглядеть более сбалансированной в каждом слоте.
Начинайте с большого. Источник 512×512 (или больше) даёт генератору чистую деталь для уменьшения. Увеличение крошечного логотипа сначала лишь впекает размытие.
Прозрачный или сплошной фон?
Оба работают — зависит от вида, которого вы хотите.
- Прозрачный позволяет фону вкладки или домашнего экрана просвечивать. Чисто и современно, и адаптируется к светлому/тёмному окружению. Лучше всего, когда ваш знак — отчётливая форма.
- Сплошная фоновая плашка (цветной скруглённый квадрат за знаком) гарантирует, что иконка читается, что бы ни было за ней. Так делает большинство иконок приложений, и это более безопасный выбор, если ваш логотип тонкий или низкоконтрастный.
Если сомневаетесь, сплошная плашка в цвете вашего бренда — надёжный вариант: она никогда не исчезнет в совпадающем фоне.
После скачивания: куда идут файлы
Генератор выдаёт вам набор файлов и фрагмент. Два правила размещения покрывают это:
favicon.icoидёт в корень вашего сайта (/favicon.ico). Браузеры и Windows ищут его там по имени даже без тега<link>.- Всё остальное может жить где угодно, пока пути в HTML-фрагменте совпадают. Большинство людей кладут их все в корень и вставляют фрагмент как есть.
Дальше это просто фрагмент <head> — ссылки на иконки, apple-touch-icon и ссылка на манифест. Вставьте, задеплойте, сделайте жёсткое обновление — и вы должны увидеть ваш логотип во вкладке.
Почему делать это в браузере?
Потому что ваш логотип никогда не покидает вашу машину. Весь процесс — чтение изображения, изменение размера под каждый размер, упаковка .ico, запись манифеста — происходит локально в вашем браузере через Canvas. Ничего не загружается на сервер, нет регистрации или водяного знака, а после первого визита инструмент работает офлайн. Для брендового ассета, который вы, возможно, ещё не опубликовали, держать его подальше от сторонних серверов — разумный вариант по умолчанию.
Как только ваш логотип квадратный, высококонтрастный и разборчивый в маленьком размере, генерация полного набора — лёгкая часть.