Современные веб‑сервисы для создания favicon предлагают множество возможностей – от простого преобразования изображения в фавикон в одном формате ICO до генерации полного набора фавиконов для разных устройств и платформ. В этой публикации из множества подобных сервисов рассмотрим два сервиса: RealFaviconGenerator и Favicon.kz.
RealFaviconGenerator
Это пожалуй один из самых известных генераторов. Как заявлено на сайте сервиса, в нём можно загружать изображения в форматах PNG, JPG, GIF, TIFF/BMP и SVG, после чего сервис сгенерирует набор фавикон для вашего сайта.
И это действительно так. Но было замечено, что если загрузить растровое изображение, оно не «векторизуется», и это вызывает некоторое сомнение в корректности подхода. На сегодняшний день нет смысла просто загружать растр: чтобы получить настоящий вектор, нужно преобразовать растр в вектор. SVG — векторный формат, и он должен содержать векторные данные, без этого генерация SVG из форматов PNG, JPG, GIF, TIFF и BMP теряет смысл.
Сервис позволяет загружать файлы в любых пропорциях, однако файл всё же должен соответсовать определенным требованиям для получения положительного результата. Ниже на скриншоте видно, что если загрузить неподготовленное изображение, то фавикон получится плохо читаемым.
Поэтому лучше всего заранее удалить в графическом редакторе лишние элементы, такие как название бренда и дескрипшен.
RealFaviconGenerator предлагает предпросмотр: в результатах Google для тёмной и светлой версий. Демонстрирует как будут выглядеть иконки на Android, iOS, Android, Windows, macOS. В сервисе для пользователя есть ручные настройки, которыми можно подправить отображение фавикон и тем самым улучшить результат генерации.
В результате можно получить готовый код для вставки в <head> и скачать ZIP-архив.
В наборе получаем PNG, ICO и SVG, а также получить автоматически сгенерированный файл site.webmanifest. Предлагаю наглядно посмотреть предоставляемые сервисом файлы.
К преимуществам RealFaviconGenerator относится отсутствие рекламы и бесплатное использование без обязательной регистрации, а также возможность вручную настроить отображение фавикон и получить готовый код для внедрения на свой сайт.
Favicon.kz
Это тоже онлайн-генератор фавикон, но с другим подходом с точки зрения генерации фавикон, а также взаимодействия с пользователем.
В отличие от предыдущего сервиса, в Favicon.kz можно загружать только SVG-файлы. При этом стоит отметить, что здесь можно загружать неподготовленные файлы — и, что важно, кадрировать их прямо в сервисе. Причём, как я понял, если загружаешь файл с пропорциями 1:1, модальное окно не появляется, а если у файла другие пропорции, сервис предлагает кадрировать. Это интересное решение.
Далее, что бросается в глаза: здесь нет ручных настроек — сразу отображается предпросмотр фавикона. По описанию на сайте, все улучшения выполняются автоматически алгоритмом. Например, настраивать отображение для тёмной темы не требуется — сервис сам создаёт версии для светлого и тёмного режимов и корректирует слишком тёмные изображения. Он автоматически добавляет цветной или белый фон в зависимости от изображения в файле, рассчитывает отступы и другие мелкие параметры. Если пользователю не нравится результат, он может просто загрузить файл заново и получить другой вариант.
На предпросмотре показываются вкладки для светлой и тёмной тем, вид выдачи в Яндексе и Google, иконка на смартфоне и сплеш-экран.
Favicon.kz предлагает два варианта наборов для скачивания — максимальный и минимальный. Первый кажется всеобъемлющим: в нём есть всё — от Apple Touch Icons и сплеш-экранов до версий для тёмной темы и готового сниппета для внедрения. Второй — более прагматичный: только самые распространённые размеры и форматы для веба и мобильных приложений.
Что входит в ZIP-архив максимального набора:
- Apple Touch Icons (57×57–180×180);
- iOS Splash-screens (iPhone SE/6/7/8/X/11/12 и iPad);
- Safari Pinned Tab Icon;
- Android Web App Icons (192×192, 512×512);
- Windows Tiles (70×70–310×150);
- Классические favicon (16×16–256×256) в PNG и SVG;
- ICO-файл с четырьмя размерами внутри;
- Фавикон для тёмной темы с готовым кодом на JavaScript для внедрения;
- Фавикон для Яндекса;
- manifest.json / site.webmanifest и готовый HTML-сниппет.
Все файлы расположены в папках по назначению и сопровождаются инструкциями. Это удобно — файлов много, и без инструкций и чёткой структуры разобраться было бы трудно.
Что входит в ZIP-архив минимального набора:
- Apple Touch Icons (57×57–180×180) в PNG;
- Android Web App Icons (192×192) в PNG;
- Классические favicon (16×16–96×96) в PNG;
- ICO-файл с тремя размерами внутри;
- Фавикон для Яндекса;
- manifest.json и готовый HTML-сниппет.
Жаль, что второй набор не включает в себя версию для тёмной темы. Это было бы удобно.
На мой взгляд, максимальный набор отлично подходит, если нужен полный «пакет» для кросс-платформенной поддержки или если вы хотите выбрать из него нужные файлы для проекта. Для большинства сайтов же достаточно минимального набора — он компактнее и прагматичнее. Лично я бы выбрал второй.
Итак, подведём итог. Изначально я хотел не только описать возможности этих сервисов, но и сравнить их. Но завершая обзор, понимаю: что эти два сервиса используют совершенно разные подходы для решения одной и той же задачи. Будет интересно наблюдать за их развитием. Ну и каждый читатель уже сам решит, какой инструмент лучше отвечает его задачам.
P.S.: Если этот обзор был полезен — буду рад.