Как добавить фавикон на сайт Framer

Чтобы добавить фавикон во Framer: откройте настройки сайта (⌘ + ,), прокрутите до раздела «Site Images» → «Favicon», загрузите PNG-файл размером 64x64 пикселей и опубликуйте сайт. Вот и всё.

Теперь рассмотрим детали и разберём возможные проблемы.

Требования к фавикону во Framer

Framer предъявляет определённые требования к фавикону:

• Размер: 64 x 64 пикселей
• Формат: PNG (рекомендуется)
• Фон: Прозрачный

Шаг 1: Откройте настройки сайта

Два способа открыть настройки:

• Горячие клавиши: Нажмите ⌘ + , (Mac) или Ctrl + , (Windows)
• Меню: Нажмите на иконку Framer → Site Settings → Open Settings

Шаг 2: Найдите раздел фавикона

• Прокрутите вниз до раздела «Site Images»
• Найдите область загрузки «Favicon»

Шаг 3: Загрузите фавикон

Framer предоставляет два слота для загрузки:

• Light Theme Favicon: отображается в браузерах со светлой темой
• Dark Theme Favicon: отображается в браузерах с тёмной темой

Если у вас только одна версия, загрузите одно и то же изображение в оба слота.

Шаг 4: Опубликуйте сайт

• Нажмите кнопку Publish
• Фавикон отображается только на опубликованном сайте, а не в режиме предпросмотра

Поддержка светлой и тёмной темы

Зачем нужны две версии?

• Тёмные логотипы исчезают на тёмных вкладках браузера
• Светлые логотипы исчезают на светлых вкладках браузера
• Отдельные версии обеспечивают видимость в любом режиме

Как создать версии

1. Начните с основного фавикона
2. Инвертируйте цвета для альтернативной версии
3. Сохраните ту же форму и дизайн
4. Используйте прозрачный фон для обеих версий

Настройка Apple Touch Icon

С сентября 2024 года Framer поддерживает иконки Apple Touch:

• Расположение: тот же раздел Site Images
• Размер: 180 x 180 пикселей
• Назначение: иконка на домашнем экране устройств iOS

Устранение неполадок: фавикон не отображается

Проверьте основные моменты

• Вы опубликовали сайт?
• Принудительно обновите страницу: Cmd+Shift+R или Ctrl+Shift+R
• Попробуйте режим инкогнито

Проверьте место загрузки

• Фавикон должен быть в настройках сайта (Site Settings), а не в настройках страницы
• Файл должен быть в формате PNG

Устранение неполадок: Google показывает старый фавикон

Google обновляет фавиконы медленно (от нескольких дней до нескольких недель).

Как ускорить обновление

1. Убедитесь, что фавикон доступен на сайте
2. Откройте Google Search Console
3. Используйте инструмент «Проверка URL» для главной страницы
4. Запросите индексацию

Устранение неполадок: проблемы в Safari

Safari агрессивно кэширует фавиконы.

Решение

1. Полностью очистите кэш Safari
2. Удалите кэш фавиконов: ~/Library/Safari/Favicon Cache/
3. Закройте и снова откройте Safari

Устранение неполадок: всё ещё отображается логотип Framer

Частые причины:

• Сайт не опубликован после загрузки фавикона
• Проблема с кэшем браузера
• Вы смотрите предпросмотр, а не опубликованный сайт

Решение: опубликуйте сайт и очистите кэш браузера.

Лучшие практики

• Сохраняйте файлы: храните оригинальные файлы фавикона
• Тестируйте везде: проверьте на Mac, Windows, iOS, Android
• Используйте инструменты проверки: Favicon.im поможет проверить вашу настройку
• Фиксируйте цвета: записывайте точные HEX-коды для единообразия бренда

Часто задаваемые вопросы

Как добавить фавикон во Framer?

Откройте настройки сайта с помощью ⌘ + ,, прокрутите до раздела «Site Images», нажмите на «Favicon», загрузите PNG-файл размером 64x64 пикселей и опубликуйте сайт.

Какой размер фавикона нужен для Framer?

Framer рекомендует 64 x 64 пикселей в формате PNG с прозрачным фоном.

Почему фавикон Framer не отображается?

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

Сколько времени Google обновляет фавикон?

Google обновляет фавиконы медленно — обычно от нескольких дней до нескольких недель. Запросите повторную индексацию через Google Search Console, чтобы ускорить процесс.

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

Да. С сентября 2024 года Framer позволяет загружать отдельные фавиконы для светлой и тёмной темы в настройках Site Images.

Ссылки

1. How to set up a favicon in Framer - Официальная справка Framer
2. September 2024 Update: Apple Touch Icon and Favicons - Обновления Framer
3. Why isn't Safari displaying the favicon? - Устранение неполадок Framer
4. Favicon.im - Инструмент для тестирования и проверки фавиконов