Как пользоваться: Генератор фавикона
- Выберите Текст / эмодзи и введите букву или выберите эмодзи, либо переключитесь на Изображение и перетащите логотип (лучше всего подходит SVG или квадратный PNG от 512 px).
- Настройте цвета, размер текста, отступы и скругление углов, глядя на предпросмотр вкладки браузера в реальном размере 16 px.
- Укажите название сайта и цвет темы для веб-манифеста.
- Нажмите Скачать всё (ZIP), загрузите файлы в корневую папку сайта и вставьте HTML-фрагмент в
<head>. В Webflow вместо этого загрузите favicon 32×32 и webclip 256×256 в Site settings.
Что такое фавикон?
Фавикон — это небольшая иконка, которую браузеры показывают на вкладках, в закладках и истории, а Google выводит рядом с названием сайта в результатах поиска на телефонах и компьютерах. Когда пользователь добавляет сайт на главный экран телефона, используются более крупные версии иконки. Полный набор сегодня небольшой: один ICO-файл для старых браузеров и стандартных запросов /favicon.ico, PNG для современных браузеров, Apple touch icon, две иконки Android/PWA, которые подключаются через манифест веб-приложения, и при желании SVG.
Что создаёт этот генератор
| Файл | Размер | Где используется |
|---|---|---|
favicon.ico | 16, 32, 48 px в одном файле | Все браузеры, ярлыки Windows, инструменты, которые запрашивают /favicon.ico напрямую |
favicon-32x32.png | 32 × 32 | Вкладки современных браузеров; размер, который запрашивает Webflow |
apple-touch-icon.png | 180 × 180 | Главный экран iPhone/iPad и Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Главный экран Android, установка PWA и заставка |
webclip-256x256.png | 256 × 256 | Настройка Webclip в Webflow |
site.webmanifest | JSON | Название, цвета и список иконок для устанавливаемых сайтов |
Файл ICO собирается прямо в вашем браузере: небольшой заголовок ICO и каталог, а затем три изображения в сжатом PNG. Этот формат читают все современные браузеры и версии Windows. Ничего не загружается на сервер.
Рекомендации по фавиконам
- Разрабатывайте для 16 px. Мелкие детали и длинные слова на вкладке размером с иконку теряются. Одна жирная буква, простой знак или эмодзи читаются гораздо лучше полного логотипа со слоганом.
- Apple touch icon должна быть непрозрачной. iOS сама скругляет углы и заполняет прозрачные пиксели чёрным, поэтому этот инструмент всегда экспортирует иконку 180 px (и webclip для Webflow) как квадрат со сплошным фоном.
- Проверяйте тёмную тему. Тёмный логотип на прозрачном фоне исчезает на тёмной вкладке браузера. В предпросмотре видны обе темы. При необходимости добавьте цвет фона или отступы.
- Google Поиск требует квадратный фавикон, доступный для сканирования, и рекомендует размер больше 48×48 px, поэтому фрагмент также подключает PNG 192 px. Изменения в результатах поиска могут появляться несколько дней.
- Кеширование: браузеры агрессивно кешируют фавиконы. Если вы заменили иконку, проверьте её в приватном окне или добавьте параметр версии, например
/favicon.ico?v=2.
Как добавить фавикон в Webflow
Откройте Site settings → General и прокрутите до раздела Favicon & Webclip. Загрузите изображение 32×32 px как фавикон и 256×256 px как webclip (он используется как Apple touch icon), сохраните и опубликуйте сайт. Webflow создаёт теги <link> автоматически, поэтому HTML-фрагмент и манифест не нужны, если вы не добавляете их через пользовательский код. Чтобы проверить, что опубликовано, используйте Проверку мета-тегов: она показывает теги фавикона и Apple touch icon.
Также ищут как: favicon.ico генератор, конвертер ico, png в ico, apple touch icon, site.webmanifest, favicon из эмодзи, favicon для webflow.
Инструменты, которые хорошо сочетаются с Генератор фавикона
- Генератор PWA-манифеста — Превратите любой сайт в устанавливаемое PWA.
- Изменить размер изображения — Измените размер фото до точных размеров в пикселях или процентах, обрежьте его под формат соцсети или впишите в рамку с цветом фона.
- Генератор OG-картинок — За несколько секунд создайте красивое превью ссылки для Facebook, LinkedIn, X, Slack и WhatsApp: выберите шаблон, введите заголовок, добавьте логотип, затем скачайте PNG и готовые мета-теги.
- Генератор мета-тегов — Заполните одну форму и получите полноценный, валидный <head> — title, description, canonical, robots, Open Graph, карточки X/Twitter, цвет темы и иконки — с живым предпросмотром и выводом, адаптированным под Webflow.
Часто задаваемые вопросы
Какой размер должен быть у фавикона?
favicon.ico 48×48 (или с несколькими размерами 16/32/48), PNG 32×32, Apple touch icon 180×180 и PNG 192×192 и 512×512 для Android. Этот генератор создаёт все файлы из одного исходника.Нужен ли мне файл favicon.ico?
/favicon.ico из корня сайта даже без тега <link>, поэтому наличие файла позволяет избежать ошибок 404 и пропавших иконок.Какие размеры фавикона нужны Webflow?
favicon-32x32.png и webclip-256x256.png из ZIP-архива.Можно ли использовать эмодзи как фавикон?
Почему не отображается новый фавикон?
?v=2) к адресам иконок. Google Поиску может понадобиться от нескольких дней до нескольких недель, чтобы переиндексировать его.