Создайте многоразмерный ICO-фавикон прямо в браузере

Что должно быть в favicon ICO

Классические favicon.ico содержат несколько разрешений, чтобы вкладки, закладки и ярлыки были чёткими на Retina. Один размытый 16×16, который растягивают, выглядит устаревшим.

WebP.Best предлагает пакеты Favicon (16/32/48), Standard (+64) и Full (до 256), чтобы покрыть типичные нужды браузеров и Windows без ручного экспорта каждого размера.

• Вкладки браузера → меньшие размеры пакета Favicon
• Ярлыки / некоторые поверхности ОС → Standard или Full
• Исходник → по возможности чёткий квадратный логотип или знак

Подготовка исходного изображения

Начните с квадратного или почти квадратного мастера с чистыми краями. Прозрачный PNG или WebP подходят хорошо. Перегруженные фото дают слабую иконку на 16 px — сначала упростите или обрежьте до знака.

Если логотип — только широкий wordmark, при принудительном квадрате будут поля или обрезка. Решите заранее: иконка — символ или монограмма.

Шаги на WebP.Best

Откройте конвертер на главной и добавьте файл логотипа (лучше PNG или WebP с прозрачностью). Формат вывода: ICO.

Выберите пакет размеров: Favicon (16/32/48 px) для вкладок; Standard добавляет 64 px для ярлыков; Full до 256 px для более чётких иконок Windows. Экспортировать каждый размер не нужно — пакет собирает один .ico.

Выберите заполнение квадрата: Fit inside показывает весь логотип с полями, если исходник не квадратный; Fill and crop масштабирует до заполнения и может обрезать края — лучше для простых символов, чем для мелкого текста.

Конвертируйте, скачайте .ico и проверьте минимальный размер во вкладке. Всё выполняется локально на вашем устройстве.

Fit inside vs fill and crop: что выбрать

Представьте иконку как квадратную рамку. Fit inside уменьшает логотип, пока он целиком не войдёт — ничего не обрезается, но у широких или высоких логотипов могут остаться пустые полосы.

Fill and crop увеличивает до полного покрытия рамки и обрезает лишнее. Хорошо для простого круга или буквы; рискованно для длинных wordmark, теряющих буквы на 16 px.

Нужен строго квадратный мастер перед ICO? Разверните Расширенные параметры, выберите Точная ширина × высота (например 512×512), Fill and crop или Fit inside, один раз конвертируйте в PNG и затем запустите ICO на этом квадрате. Если стандартные пакеты уже подходят — пропустите шаг.

• Только широкий wordmark → Fit inside или сначала квадратный символ
• Круглая иконка в стиле приложения → Fill and crop часто выглядит чище
• Не уверены → сначала Fit inside; к Fill and crop только если поля мешают

Использование ICO на сайте

Положите favicon.ico в корень сайта или подключите в HTML head с нужным type. Многие статические хосты принимают PNG-фавиконы; ICO по-прежнему полезен для старых закладок и некоторых desktop-сценариев.

После деплоя сделайте жёсткое обновление или откройте приватное окно: браузеры агрессивно кешируют фавиконы. «Неправильная иконка» после загрузки часто — это кеш, а не битый ICO.

Чего это не делает

Этот путь — для статических иконок. Он не создаёт брендинг, не удаляет фон автоматически и не генерирует SVG. Очень тонкие линии могут исчезнуть на 16 px — проверьте минимальный размер.

Упаковка идёт локально с предустановленными пакетами. Для «Добавить на главный экран» на телефоне могут понадобиться отдельные PNG — одного ICO может не хватить.