Фавикон для Shopify
Shopify позволяет загрузить значок из редактора тем за считанные секунды. Каждая современная тема Shopify предоставляет поле Favicon в настройках темы, а CDN Shopify размещает значок на каждой странице вашей витрины. Используйте favicon generator, чтобы сначала создать квадрат 512×512 PNG — Shopify автоматически изменит его размер до необходимого размера дисплея 32×32.
Фавиконка — это один из первых сигналов бренда, который видит потенциальный клиент, когда открывает несколько вкладок. В магазинах Shopify значок отображается на вкладке браузера, панели закладок и адресной строке. Яркий, узнаваемый значок повышает доверие к бренду и помогает покупателям быстро найти вкладку вашего магазина среди десятков открытых вкладок.
Каждая современная тема Shopify (Dawn, Refresh и большинство премиальных тем) включает поле Favicon в Theme Editor в разделе «Настройки темы». Чтобы получить к нему доступ, войдите в систему администратора Shopify, перейдите в Интернет-магазин > Темы и нажмите «Настроить» рядом с вашей активной темой. На левой боковой панели нажмите «Настройки темы» (или значок шестеренки), затем найдите раздел «Значок».
Shopify рекомендует загрузить квадрат PNG размером 32×32 пикселя для поля значка. На практике загрузка PNG размером 512×512 дает более четкий результат, поскольку Shopify снижает его разрешение до 32×32 с лучшим качеством, чем если бы вы начинали с оригинала 32×32. Всегда начинайте с самого большого квадратного источника, который у вас есть — генератор упрощает это.
После загрузки значка нажмите «Сохранить» в правом верхнем углу Theme Editor. Shopify обрабатывает изображение, загружает его в свою CDN и в течение нескольких минут распространяет по каждой странице витрины. Вам не нужно повторно публиковать тему или вносить какие-либо другие изменения в код.
Старые или сильно модифицированные темы Shopify могут не отображать поле Favicon в настройках темы. В этом случае вам необходимо напрямую отредактировать код Liquid темы. Откройте редактор файлов темы («Интернет-магазин» > «Темы» > «Редактировать код»), найдите файл theme.liquid и найдите раздел «<head>». Вставьте «<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>» после загрузки файла favicon.png в папку «Ресурсы» темы.
Для магазинов Shopify в рамках темы 2.0 значок фавикона управляется через site.webmanifest, который Shopify генерирует автоматически из настроек вашей темы. Если ваш магазин использует оболочку Progressive Web App, манифест Shopify включает в себя значок приложения в качестве значка. Обновление значка темы автоматически обновляет значок манифеста — никакого дополнительного редактирования JSON не требуется.
Прозрачный фон корректно работает в значках Shopify. Редактор тем сохраняет альфа-канал PNG при загрузке в CDN. Однако если ваш логотип имеет белый фон, он будет отображаться в белой рамке на вкладках браузера в темном режиме. Чтобы избежать этого, экспортируйте свой логотип без фоновой заливки перед загрузкой.
Если у вас несколько магазинов Shopify (обычная настройка для международных витрин), для каждого магазина должен быть установлен свой значок независимо. Значок – это настройка для каждого магазина, а не настройка на уровне партнера Shopify или организации. Войдите в систему администратора каждого магазина и повторите шаги Theme Editor.
Аннулирование кеша может задержать обновление значков в Shopify. CDN Shopify кэширует ресурсы с длинными сроками жизни. После смены значка браузеры могут продолжать показывать старый значок в течение нескольких часов. Откройте приватное окно/окно в режиме инкогнито, чтобы увидеть обновленный значок без вмешательства в кэш. Альтернативно вы можете указать своему браузеру выполнить принудительное обновление (Ctrl+Shift+R на Windows, Cmd+Shift+R на Mac).
Shopify не внедряет apple-touch-icon или тег ссылки манифеста веб-приложения, если они не включены в шаблон вашей темы. Если вы хотите, чтобы при установке iOS на главном экране отображался ваш логотип, а не скриншот страницы, добавьте тег apple-touch-icon вручную через Интернет-магазин > Темы > Изменить код > theme.liquid. Разместите `<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | assets_url }}'>` в разделе `<head>` и загрузите PNG размером 180×180 в Assets.
Для магазинов Shopify Plus вы можете использовать брендинг оформления заказа, чтобы настроить значок в процессе оформления заказа отдельно от основного значка витрины. Брендинг Checkout настраивается в разделе «Настройки» > «Checkout и учетные записи» > «Настроить». Это позволяет на страницах оформления заказа отображать значок, отличный от значка основного магазина, что полезно для мультибрендовых настроек.
Чтобы убедиться, что ваш значок Shopify работает, используйте live favicon tester и введите URL-адрес вашего магазина. Тестер подтверждает, что значок общедоступен, и показывает, как он отображается при разрешении 16, 32 и 48 пикселей. Также проверьте best favicon size, чтобы понять, какие дополнительные размеры улучшат процесс установки PWA.
Распространенные ошибки значка Shopify включают загрузку прямоугольного логотипа без предварительного обрезки его до квадрата (образуется сплющенный значок), загрузку очень маленького изображения (размытие на дисплеях Retina) и забывание нажать кнопку «Сохранить» после загрузки (изменение не будет зафиксировано, пока вы явно не сохраните его). favicon generator экспортирует правильно квадратный PNG с разрешением 512×512, готовый для прямой загрузки Shopify.
Как это работает
- 1
Создайте квадрат размером 512×512 PNG.
Используйте [favicon generator](tool:favicon-generator) со своим логотипом или торговой маркой. Экспортируйте PNG размером 512×512 из загружаемого пакета — это правильный входной размер для Shopify.
- 2
Откройте свою тему в Theme Editor.
В администраторской панели Shopify перейдите в «Интернет-магазин» > «Темы» и нажмите «Настроить» рядом с вашей активной темой.
- 3
Перейдите в «Настройки темы» > «Фавикон».
На левой боковой панели нажмите «Настройки темы» (значок шестеренки внизу в большинстве тем) и найдите раздел «Фавикон» или «Бренд». Точная этикетка зависит от темы.
- 4
Загрузите свой PNG и сохраните
Нажмите на поле загрузки значка, выберите размер 512×512 PNG и подтвердите. Нажмите «Сохранить» в правом верхнем углу. Shopify загружает значок в свою CDN и распространяет его по всем страницам.
- 5
Подтвердить в окне инкогнито
Откройте приватное окно браузера или окно в режиме инкогнито и перейдите по URL-адресу вашего магазина. Убедитесь, что новый значок отображается на вкладке браузера. Используйте [favicon tester](utility:favicon-tester) для быстрой внешней проверки.
Попробовать сейчас
Создайте готовый значок Shopify.
Генератор фавиконовЧастые вопросы
Где добавить значок в Shopify?+
Интернет-магазин > Темы > Настройка > Настройки темы > Фавикон. Загрузите квадрат PNG (рекомендуется 512×512), нажмите «Сохранить», и Shopify автоматически вставит значок на каждую страницу витрины магазина.
Какой размер значка использует Shopify?+
Shopify отображает значок размером 32×32 пикселя на вкладках браузера. Загрузите изображение размером 512×512 для получения максимально четкого результата — Shopify уменьшит разрешение до 32×32. Никогда не загружайте источник размером менее 32×32, иначе он будет выглядеть размытым.
Почему мой значок Shopify выглядит размытым или растянутым?+
Вероятно, вы загрузили неквадратное изображение или очень маленький источник. Перед загрузкой обрежьте свой логотип до идеального квадрата и начните с размера не менее 256×256 пикселей. [favicon generator](tool:favicon-generator) автоматически создает квадрат 512×512 PNG, готовый к Shopify.
Почему не отображается мой новый значок Shopify?+
Браузеры и кэши CDN задерживают обновления. Откройте окно в режиме инкогнито/приватное и перейдите по URL-адресу вашего магазина, чтобы увидеть обновленный значок без вмешательства в кеш. Если при обычном просмотре по-прежнему отображается старый значок, подождите несколько часов, пока истечет срок действия кэша CDN.
Могу ли я добавить apple-touch-icon в свой магазин Shopify?+
Да, но это требует ручного редактирования кода. Загрузите apple-touch-icon.png размером 180×180 в папку Assets вашей темы, затем добавьте `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | assets_url }}'>` в theme.liquid внутри раздела `<head>`.
Поддерживает ли Shopify значки SVG?+
Встроенная загрузка значка Theme Editor не принимает SVG. Чтобы использовать значок SVG, добавьте тег ссылки вручную в theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | assets_url }}'>` после загрузки SVG в папку Assets.
Нужен ли мне разработчик, чтобы изменить мой значок Shopify?+
Нет. С помощью Theme Editor («Интернет-магазин» > «Темы» > «Настройка» > «Настройки темы» > «Фавикон») вы можете загрузить и сохранить новый значок менее чем за две минуты без использования кода. Доступ разработчика необходим только для дополнений SVG или apple-touch-icon.