Фавикон в Webflow: как добавить favicon и webclip

Как добавить фавикон и webclip в Webflow: где настройка Icons, какие размеры создаёт Webflow, как опубликовать и что делать, если иконка не обновляется.

Частые вопросы

Какого размера должен быть фавикон в Webflow?

В справочном центре Webflow указаны фавикон 32x32 и webclip 256x256. В актуальной версии вы загружаете одно квадратное изображение, а остальные размеры Webflow создаёт сам. Поэтому берите квадратный файл не меньше 256x256 пикселей, который остаётся читаемым при сильном уменьшении.

Где загрузить фавикон в Webflow?

Откройте Site settings (Настройки сайта), перейдите на вкладку General и найдите раздел Icons. Загрузите квадратное изображение, выберите, какие иконки обновить, примените изменения и опубликуйте сайт. В старых инструкциях это место называется Project settings, но речь о том же разделе.

Что такое webclip в Webflow?

Webclip — это более крупная иконка, которая используется, когда пользователь сохраняет ваш сайт на главный экран телефона или создаёт похожий ярлык. По данным Webflow, её размер 256x256 пикселей. Она не связана с маленькой иконкой во вкладке браузера.

Почему фавикон в Webflow не отображается после загрузки?

Чаще всего причина в том, что сайт не опубликовали после загрузки: иконки меняются только на опубликованной версии. Вторая по частоте причина — кеш браузера. Сначала опубликуйте сайт и проверьте его в приватном окне или другом браузере, прежде чем решать, что загрузка не удалась.

Поддерживает ли Webflow SVG и фавикон для тёмной темы?

Согласно заметкам об обновлениях Webflow, можно загружать PNG, JPG, GIF, ICO и SVG, а в справке упоминается необязательная иконка вкладки для тёмного режима. Кроме того, Webflow преобразует SVG в PNG для совместимости между браузерами, поэтому проверьте результат в тех браузерах, которые важны для вас.

Через какое время Google покажет новый фавикон из Webflow?

Точных сроков нет. Google сам решает, когда заново сканировать сайт и обновлять иконку в выдаче, и по отзывам сообщества это занимает от нескольких дней до нескольких недель и дольше. Вам нужно лишь убедиться, что иконка работает на опубликованном сайте.

Коротко: в Webflow откройте Site settings > General > Icons, загрузите одно квадратное изображение, выберите, какие иконки обновить (светлый фавикон, необязательный фавикон для тёмного режима, webclip), примените изменения и опубликуйте сайт. Webflow указывает фавикон 32x32 и webclip 256x256, а остальные размеры создаёт из вашего файла. Пока вы не опубликуете сайт, на живой версии ничего не изменится. (Проверено в ноябре 2026 года по справочному центру и заметкам об обновлениях Webflow.)

Что требует Webflow

В старых руководствах описаны два отдельных поля загрузки: для фавикона 32x32 и для webclip 256x256. В текущей справке Webflow процесс проще: вы загружаете одно квадратное изображение, а размеры Webflow подбирает сам. Вот для чего нужна каждая иконка.

Иконка	Размер по данным Webflow	Где отображается
Фавикон (светлый)	32x32	Вкладки браузера и закладки
Фавикон (тёмный режим, необязательно)	32x32	Вкладки браузера в тёмном режиме
Webclip	256x256	Ярлыки на главном экране и похожие сохранённые ссылки
Автоматически создаваемые дополнительные	Фавикон 48x48, иконки для касания 180x180 и 192x192	Webflow создаёт их из вашего файла

Допустимые форматы по заметкам об обновлениях Webflow: PNG, JPG, GIF, ICO и SVG. SVG растеризуется в PNG для совместимости между браузерами.

Подробнее о размерах для разных платформ читайте в нашем руководстве по размерам фавиконов.

Сначала подготовьте изображение

Во вкладке фавикон отображается шириной примерно 16–32 пикселя, поэтому исходник важнее настроек.

Начните с квадрата. Экспортируйте квадратный холст 256x256 или больше, чтобы webclip не пришлось увеличивать.
Упростите. Используйте логотип-знак или одну букву, а не полный логотип с названием. Мелкие детали в размере вкладки превращаются в кашу.
Учитывайте фон. Прозрачный PNG хорошо смотрится на светлых вкладках, но на тёмных может пропасть. Если используете фавикон для тёмного режима, сделайте версию со светлым знаком.
Дайте файлу нейтральное имя. Имена загруженных файлов могут попасть в опубликованный HTML, так что не называйте файл «final_v3_REAL.png».

Как добавить фавикон и webclip в Webflow

Откройте проект в Webflow Designer или в панели управления и перейдите в Site settings.
Выберите вкладку General и прокрутите до раздела Icons.
Нажмите Upload icon и выберите квадратное изображение.
Отметьте, какие иконки обновить этим изображением: фавикон, необязательный фавикон для тёмного режима и webclip.
Если нужна другая иконка для тёмного режима, добавьте её в соответствующее поле. Этот шаг необязателен.
Нажмите Apply. Формулировки в интерфейсе могут немного меняться при обновлениях Webflow, ориентируйтесь на те названия, которые видите.
Опубликуйте сайт на ваших доменах. Простое сохранение не переносит иконки на живой сайт.
Откройте живой сайт в приватном окне и проверьте вкладку.

Чек-лист, который можно скопировать

`` [ ] Квадратный исходник 256x256 или больше [ ] Знак достаточно простой, чтобы читаться в размере вкладки [ ] Проверено в светлой и тёмной теме браузера [ ] Загружено в Site settings > General > Icons [ ] Изменения применены (Apply) [ ] Опубликовано на живом домене (а не только на тестовом webflow.io) [ ] Проверено в приватном окне [ ] Выполнено принудительное обновление или очистка кеша, если старая иконка осталась ``

Решение проблем

Фавикон всё ещё старый или показывается логотип Webflow

Проверьте по порядку:

Опубликуйте ещё раз. Иконки появляются на живом сайте только после публикации. Если публикуете на несколько доменов, выберите все.
Проверьте в приватном окне. Браузеры агрессивно кешируют фавиконы, и в обычной вкладке старая иконка может держаться очень долго.
Принудительно обновите страницу или закройте и снова откройте браузер.
Откройте файл напрямую. Убедитесь, что адрес иконки из исходного кода страницы открывается в отдельной вкладке.

Загрузка отклонена или изображение искажено

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

В результатах поиска Google показывается не та иконка

Иконкой в выдаче управляет Google, а не Webflow. По отзывам сообщества, обновление занимает дни, недели или дольше. Убедитесь, что иконка загружается на живом сайте, и подождите. Помогает стабильная квадратная иконка по неизменному адресу.

Иконка размытая во вкладках

Обычно это значит, что в исходнике слишком много деталей или у него изначально низкое разрешение. Нарисуйте более простой знак в большем размере и загрузите заново.

Какой формат загружать?

Формат	Для чего подходит	На что обратить внимание
PNG	Большинство сайтов: надёжный, поддерживает прозрачность	Нужно достаточное разрешение для webclip
SVG	Чистая векторная графика	Webflow растеризует его в PNG, поэтому проверьте результат
ICO	Старые процессы работы	Часто не нужен, если Webflow сам создаёт размеры
JPG	Редко подходит	Нет прозрачности, остаётся фоновый прямоугольник

Если сомневаетесь, самый надёжный вариант — квадратный PNG 256x256 или больше.

Место фавикона в подготовке к запуску

Фавикон — небольшая часть чек-листа запуска наряду с заголовками, описаниями и картинками для соцсетей. Если вы ещё выбираете платформу, в наших материалах сравнение с Webflow и альтернативы Webflow разобраны плюсы и минусы, а общее руководство по смене фавикона пригодится, если вы ведёте сайты на нескольких платформах.

Если хотите начать с готового макета, на бесплатном тарифе We.Inc можно опубликовать до трёх сайтов из готовых шаблонов, а ИИ-конструктор, который создаёт сайт по описанию, доступен на тарифе Starter за $20 в месяц. Зарегистрироваться можно здесь.

Начать бесплатно · Банковская карта не нужна

Umair Ali Sadaqat

Основатель We.Inc

Умайр — основатель We.Inc. Он пишет о создании сайтов с помощью ИИ, агентствах и ведении бизнеса веб-студии.

Готовы создать что-то стоящее?

Присоединяйтесь к 15,000+ компаний, которые с We.Inc запускаются, растут и автоматизируют работу — всё на одной платформе.

Начать бесплатно

Банковская карта не нужна · Связаться с отделом продаж