Favicon (сокращение от Favorites Icon, также называемый иконкой сайта, иконкой закладок) — это маленькая иконка, отображаемая на вкладке браузера, в панели закладок, истории, адресной строке, один из основных элементов брендовой идентификации сайта. Сайт без фавикона отображается иконкой пустого документа среди множества вкладок, выглядит непрофессионально; хорошо спроектированный фавикон позволяет пользователям быстро найти ваш сайт среди кучи вкладок, это базовый ресурс, необходимый перед запуском сайта.
Современным сайтам нужен не только один favicon.ico. С распространением мобильных устройств и развитием PWA (прогрессивных веб-приложений) полный пакет иконок сайта должен содержать множество размеров и форматов: традиционный favicon.ico для совместимости со старыми браузерами, 16/32 PNG для обычных вкладок и закладок браузера, 180×180 apple-touch-icon для «добавления на главный экран» пользователями iPhone/iPad, 192/512 PNG для рабочего стола Android и стартового экрана PWA, а также site.webmanifest, сообщающий браузеру расположение этих иконок и цвет темы. Самостоятельное создание всех этих размеров, написание правильного HTML-кода для подключения является проблемой для разработчиков без дизайнерского бэкграунда.
Текстовый фавикон — самый быстрый способ: большинству личных блогов, опенсорсных проектов, внутренних систем на самом деле не нужен сложный дизайн логотипа, простая текстовая иконка из заглавной буквы бренда (например, G для Google, F для Facebook) в фирменном цвете даёт отличный эффект. Инструмент предоставляет 8 распространённых системных шрифтов, регулировку размера шрифта, настраиваемые цвета, не нужно открывать Photoshop/Figma, за минуту можно создать профессиональный фавикон.
Emoji-фавикон — простое решение, популярное в последние годы: эмодзи сами по себе являются маленькими иконками, нарисованными дизайнерами, с яркими цветами и высокой узнаваемостью, использование подходящего эмодзи (например, ракета 🚀 для скорости, лампочка 💡 для идей, огонь 🔥 для популярности) в качестве фавикона для личных проектов, прототипов, сайтов документации забавно и экономит время, намного лучше, чем пустая иконка, к тому же обладает кроссплатформенной согласованностью (хотя отрисовка между системами немного отличается).
Режим изображения подходит для сценариев с уже готовым логотипом: если у вас уже есть изображение логотипа бренда, после загрузки инструмент автоматически обрезает его по центру в квадрат, генерирует все необходимые размеры. Учтите, что на маленьких размерах иконка всего 16 пикселей в ширину, сложные логотипы после уменьшения размоются в пятно, поэтому фавикон обычно является не полной версией логотипа, а его символьной/опознавательной частью — например галочка Nike, яблоко Apple, буква M McDonald's, простые формы остаются чётко различимыми даже на маленьких размерах.
Почему генерировать локально, а не загружать на сервер? Во-первых, конфиденциальность: неопубликованные логотипы брендов, дизайнерские макеты клиентов являются конфиденциальными активами, загрузка на серверы сторонних инструментов сопряжена с риском утечки; во-вторых, скорость: локальная отрисовка на Canvas выполняется мгновенно, не нужно ждать загрузки и скачивания; в-третьих, надёжность: не требуется сеть, можно использовать во внутренних сетях. Вся обработка изображений использует нативный Canvas API браузера, упаковка ZIP использует чисто JS-библиотеку JSZip, не нужен бэкенд-сервис.
Три формы (квадрат, скруглённые углы, круг) предназначены для адаптации к стилям разных платформ: в Windows традиционно используются квадратные иконки, в iOS/iPadOS — прямоугольники со скруглёнными углами (Squircle), в Android и на некоторых сайтах — круглые иконки. Скругление 22% в инструменте — это довольно универсальный размер скругления, близкий к современному стилю UI. Примечание: браузеры при фактическом отображении фавикона обычно не обрезают иконку до круга (за исключением отдельных браузеров), круг в основном влияет на внешний вид после добавления на рабочий стол мобильного телефона.
Следует отметить: ① Эффект фавикона сильно зависит от простоты дизайна, сложные узоры на 16×16 определённо размываются, рекомендуется использовать простой текст/фигуру/эмодзи; ② Эффект отрисовки эмодзи зависит от шрифтов операционной системы, на разных системах эмодзи могут выглядеть немного по-разному; ③ Файл ICO генерируется на основе встроенного PNG 32×32, удовлетворяет большинству потребностей совместимости; ④ Прозрачный фон в некоторых старых браузерах может отображаться как чёрный или белый фон, для основных сайтов надёжнее использовать цветной фон.
