Генератор Favicon

Фавикон - это маленькая иконка в вкладке вашего браузера, которая также появляется рядом с вашим сайтом в закладках и истории, а также рядом с результатами поиска. Она маленькая, но при этом одна из самых заметных частей вашего бренда. Каждый раз, когда кто-то открывает вкладку с вашим сайтом, этот маленький квадратик - первое, что он замечает, поэтому четкий узнаваемый фавикон значит гораздо больше, чем можно предположить по его размеру. Чтобы сделать его правильно, нужны лишь одно хорошее изображение и пара кликов этим инструментом.

Вот в чем подвох, которого большинство людей не ожидает: одного фавикона почти всегда недостаточно. Десктопные браузеры запрашивают фавиконы размером 16 и 32 пикселя, устройства Android и прогрессивные веб-приложения используют 192 и 512, главные экраны iOS хотят большую сенсорную иконку, а магазины приложений просят изображение 1024 пикселя. Изменение размера логотипа под все это вручную означает открытие дизайн-программ, настройку размеров холста и экспорт файла за файлом. Этот генератор фавиконов делает все это за вас за несколько секунд, превращая одно загруженное изображение в восемь иконок PNG правильного размера.

Когда вы загружаете изображение, генератор создает иконки размером 16x16, 32x32, 48x48, 64x64, 128x128, 192x192, 512x512 и 1024x1024 пикселей. Этот набор покрывает почти все ситуации, с которыми вы столкнетесь: маленькую иконку вкладки, средние размеры, которые запрашивают браузеры и операционные системы, большие иконки для мобильных главных экранов и манифестов веб-приложений, а также полноразмерное изображение, которое требуют магазины приложений. Вы просматриваете каждый результат в сетке предпросмотра и скачиваете только те размеры, которые вам действительно нужны.

Самый простой способ получить хороший результат - начать с квадратного изображения. Иконки всегда квадратные, и инструмент масштабирует ваш исходник, заполняя квадратный холст, поэтому неквадратное изображение будет растянуто. Прозрачный PNG размером 512x512 или больше - идеальный вариант. Если ваш логотип, скажем, тысяча пикселей в ширину, но всего четыреста в высоту, обрежьте его до квадрата перед загрузкой, а не позволяйте генератору искажать его.

Масштабировать большой логотип до 16 пикселей действительно сложно. Текст исчезает, тонкие линии сливаются, а мелкие градиенты превращаются в шум. Генератор использует высококачественное сглаживание браузера, чтобы максимально сохранить четкость краев в каждом размере, но у любого инструмента есть пределы, когда дизайн перегружен. Простые смелые элементы с сильным контрастом переживают путь до 16 пикселей; сложные изображения - почти никогда.

Конфиденциальность - одна из главных причин, по которой люди предпочитают этот подход. Все преобразование происходит внутри вашего браузера с использованием API HTML5 canvas. Ваше изображение никогда не загружается, не сохраняется и не отправляется никуда, что делает инструмент хорошим выбором для невыпущенных продуктов, клиентских логотипов и всего, что вы предпочли бы не хранить на чужом сервере. Закройте вкладку, когда закончите, - и все следы вашей загрузки исчезнут.

Также стоит четко сказать, чего инструмент не делает. Он выводит PNG-иконки, которые принимает практически каждая современная платформа. Он не создает файл .ico, не упаковывает все в zip-архив и не генерирует манифест веб-приложения. На практике это редко является проблемой: современные браузеры уже много лет прекрасно используют PNG-фавиконы, а формат .ico - в основном наследие прошлого. Скачайте нужные размеры, затем добавьте несколько тегов link на свою страницу.

Подключить иконки к веб-сайту несложно. В разделе head вашей страницы вы добавляете тег link, указывающий на ваш основной фавикон, например PNG 32x32, плюс ссылку apple-touch-icon для iOS и, если вы используете прогрессивное веб-приложение, записи 192x192 и 512x512 в файле manifest.json. Загрузите файлы на сервер, укажите теги на них - и иконка появится во вкладках, закладках и на главных экранах.

Подумайте о повседневных ситуациях, где это пригодится. Блогер хочет нормальную иконку сайта для WordPress и не хочет открывать Photoshop. Разработчик выпускает веб-приложение и нуждается в фавиконе и иконках PWA в папке проекта. Стартап готовит страницу в App Store и нуждается в квадратной иконке 1024x1024, которая также работает как маленький значок запуска. Студент делает учебный проект и хочет, чтобы он выглядел законченным. Все они могут использовать один и тот же инструмент менее чем за минуту.

Здесь дизайнерские решения важнее инструментов. Держите фавикон близко к самой простой форме вашего логотипа, используйте фирменные цвета и избегайте текста, который имеет смысл только в больших размерах. Если у вашей иконки прозрачный фон, помните, что вкладки браузера бывают в светлой и темной темах, поэтому проверьте ее на обеих. Если фон сплошной, иконка будет выглядеть одинаково везде без дополнительных усилий.

Еще одна практическая заметка: браузеры агрессивно кэшируют фавиконы. После обновления иконки сайта вы можете какое-то время видеть старую. Жесткое обновление страницы или быстрая проверка в окне инкогнито подтвердят, что новая иконка уже работает. Поддержание файла небольшим тоже помогает, поскольку фавикон запрашивается при каждой загрузке страницы и часто является одним из первых загружаемых файлов.

Для использования не нужен опыт в дизайне или какое-либо установленное программное обеспечение. Инструмент полностью работает в вашем браузере, совместим с Windows, macOS, Linux и даже телефоном, для него не нужно создавать аккаунт, и за него ничего не нужно платить. Загружайте столько изображений, сколько хотите, так часто, как хотите, и скачивайте только нужные размеры. Это одна из тех маленьких утилит, которые незаметно избавляют вас от удивительно утомительной задачи.