Фавикон для Webflow

Загрузка значка Webflow является частью панели «Настройки проекта», которая отделена от холста дизайнера. Нажмите имя проекта на панели управления Webflow, затем перейдите в «Настройки проекта» > «Общие». Прокрутите вниз до раздела «Значок и значок приложения», щелкните область загрузки и выберите файл изображения. Webflow принимает форматы PNG, ICO и GIF.

PNG размером 32×32 пикселя — это минимальный необходимый размер для загрузки значков Webflow, но, начиная с 512×512, результат становится гораздо более четким. Webflow снижает разрешение вашего изображения для отображения вкладок и любых вариантов, созданных CDN. Всегда предоставляйте самый большой чистый исходный код, который у вас есть — генератор позволяет легко создать PNG размером 512×512 из любого логотипа.

Webflow размещает значок на собственной сети CDN с автоматически сгенерированным URL-адресом (обычно в формате uploads-ssl.webflow.com/...). Вам не нужно указывать путь CDN вручную. После загрузки нажмите «Сохранить», а затем «Опубликовать проект». Значок добавляется при публикации, а не только при сохранении — неопубликованные изменения не видны на вашем действующем домене.

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

Встроенный загрузчик значков Webflow не поддерживает файлы SVG. Если вам нужен векторный значок SVG для четкого рендеринга в любом масштабе и поддержки темного режима, добавьте его с помощью внедрения собственного кода. Перейдите в «Настройки проекта» > «Пользовательский код» > «Код заголовка» и добавьте: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. Разместите файл SVG на своем сервере или в службе CDN.

Добавление apple-touch-icon для установки iOS на главном экране также требует специального кода в Webflow, поскольку встроенный загрузчик обрабатывает только стандартный значок. Загрузите файл apple-touch-icon.png размером 180×180 на файловый хост (или в ресурсы Webflow, если ваш план поддерживает это), затем введите `<link rel='apple-touch-icon' size='180x180' href='URL_TO_YOUR_FILE'>` в поле «Настройки проекта» > «Пользовательский код» > «Код заголовка».

Поддержка значков PWA в Webflow ограничена по сравнению с такими платформами, как Next.js. В Webflow нет встроенного генератора веб-манифестов. Для полной поддержки установки PWA создайте JSON-файл site.webmanifest вручную, разместите его на внешнем сервере и внедрите тег ссылки манифеста с помощью специального кода. Включите записи PNG размером 192×192 и 512×512 в массив значков манифеста.

Если вы создаете сайт Webflow для клиента, значок часто устанавливается в конце проекта, а затем забывается. Полезным рабочим процессом является установка значка-заполнителя на ранних стадиях проекта и замена его перед передачей. Webflow не хранит историю версий значков — как только вы сохраняете новый значок, старый исчезает из настроек проекта, хотя он может оставаться доступным через URL-адрес CDN в течение некоторого времени.

Многодоменные сайты Webflow, на которых один и тот же проект публикуется в нескольких личных доменах, используют один значок настроек проекта. В собственном Webflow нет переопределения значков для каждого домена. Один и тот же значок отображается на всех опубликованных доменах. Если вам нужны значки для каждого домена, используйте внедрение собственного кода для условного переопределения тега ссылки на значок (для этого требуется CMS Webflow или пользовательская логика).

Для распространения обновлений значков в Webflow может потребоваться время из-за кэширования CDN. После публикации нового фавикона старый может появиться в браузерах в течение 24–48 часов. Откройте свой действующий сайт в приватном окне/окне инкогнито, чтобы увидеть обновленный значок без вмешательства в локальный кэш браузера. Если ваша аудитория использует страницы, кэшированные в CDN, задержка распространения зависит от настроек CDN TTL Webflow.

Для пользователей редактора Webflow (клиенты, редактирующие контент без доступа к дизайнеру), значок нельзя изменить через редактор — он заблокирован в настройках проекта. Обновлять значок могут только соавторы с доступом Designer или владельцы учетных записей. Четко сообщите об этом клиентам, чтобы они знали, где запрашивать будущие обновления значков.

После публикации значка Webflow используйте favicon tester, чтобы подтвердить, что он разрешается в вашем рабочем домене. Сравните результат с ожидаемым размером: 32×32 для вкладок, 180×180 для iOS, если вы добавили apple-touch-icon. Также ознакомьтесь с руководством best favicon size, чтобы понять, какие размеры улучшают показатель полноты значков вашего сайта.