Как добавить Shopify Фавиконка для вашего Shopify Магазин

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

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

Что за Shopify Фавикон?

A Shopify Favicon, или любой другой значок Favicon в этом отношении, представляет собой небольшой значок для вашего веб-сайта, который отображается на вкладке браузера рядом с названием вашего веб-сайта.

Адресная строка браузера - это наиболее распространенная область для просмотра значка сайта, но она также появляется в следующих местах:

• Приложения панели инструментов
• закладки
• Результаты истории
• Панели поиска
• Иногда при публикации в социальных сетях

По сути, всякий раз, когда браузеру требуется показать ссылку на ваш веб-сайт, а для другого контента не так много места, он заменяет ваш обычный полноразмерный логотип на значок Favicon.

По умолчанию Shopify добавляет Shopify логотип для вашего Favicon, поэтому нам нужно его изменить.

Хороший значок часто представляет собой уменьшенную версию вашего логотипа, но иногда они немного различаются, потому что вы хотите, чтобы они были видны, занимали все выделенное пространство и добавляли немного цвета рядом с названием вашего веб-сайта.

По умолчанию все браузеры поддерживают Favicons размером 32 × 32 пикселя. Это довольно крошечное изображение, но с помощью некоторых онлайн-генераторов вы можете создать свой собственный. Shopify Фавикон для вашего сайта. Кроме того, большие изображения в любом случае уменьшаются, поэтому вам не обязательно уменьшать его ровно до 32 × 32.

Фавикон имеет смысл для интернет-магазинов на Shopify так как их легко добавить, и важно укрепить ваш бренд как онлайн-продавца. Некоторые также утверждают, что это помогает в SEO.

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

Как добавить фавикон в свой Shopify Магазин – Краткое руководство

Как уже упоминалось, при запуске сайта через Shopify он автоматически добавляет Shopify логотип в качестве значка вашего сайта. В этом нет ничего плохого, но гораздо более профессионально и ориентированно на бренд будет включить собственный логотип. Вот шаги, которые вам необходимо выполнить:

Шаг 1. Зайдите в свой Shopify Информационная панель

Поэтому зайдите в свой Shopify на панели управления и щелкните Интернет-магазин в разделе "Каналы продаж".

Шаг 2. Перейдите к настройкам темы.

Перейдите к темам и нажмите кнопку «Настроить» рядом с текущей темой. Хотя настройки меняются от темы к теме, все последние Shopify В темах есть раздел для изменения значка Favicon.

В Shopify настройщик, прокрутите список слева до конца и нажмите «Настройки темы».

Шаг 3. Выберите кнопку «Избранное»

В новом разделе найдите и выберите кнопку Favicon.

Откроется кнопка «Выбрать изображение» или «Исследовать бесплатные изображения». Я не могу представить себе, что у них есть бесплатные изображения, соответствующие вашему логотипу, поэтому лучше всего нажать «Выбрать изображение», чтобы загрузить собственное изображение со своего компьютера.

Шаг 4. Загрузите свой значок

Выберите файл Favicon и загрузите его в Shopify.

После этого вы увидите предварительный просмотр своего значка Favicon. Чтобы сделать изменения постоянными, нажмите кнопку Сохранить в Shopify.

Для просмотра вашего Shopify favicon в действии, перейдите во внешний интерфейс вашего веб-сайта и посмотрите на текущую вкладку браузера. Вы должны увидеть значок Favicon рядом с названием вашего сайта.

Советы по созданию вашего фавикона

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

Чтобы решить любые проблемы, вот несколько советов по созданию вашего Shopify Фавикон:

• Начните свой дизайн размером более 32 × 32 и при необходимости уменьшите его. У вас обязательно будет более размытое изображение, если вы попытаетесь растянуть меньшее изображение в пространстве. Например, если взять изображение 32 × 32 из Hatchful и попытаться растянуть его, чтобы избавиться от написанной части логотипа, могут возникнуть проблемы.
• Обычно вы не можете просто взять свой текущий логотип и ожидать, что он будет идеально работать в качестве Favicon.
• Favicon выглядит великолепно, когда вы покрываете каждый пиксель предоставленного пространства. У вас не так много места, поэтому вы должны использовать каждый квадратный пиксель в пространстве 32×32.
• Удалите весь текст, так как его трудно прочитать в Favicon. Исключение составляют случаи, когда вашим основным элементом логотипа является большая буква.
• Стремитесь к ярким и насыщенным цветам. Лучше всего подойдут простые мультяшные логотипы.
• Посмотрите на Favicons от ваших любимых брендов. Что они сделали, чтобы их онлайн-изображение попало в фавикон?
• Попробуйте заполнить все пространство сплошным цветным фоном или сделать прозрачный фон с растянутым элементом переднего плана так, чтобы он касался только краев. Вы заметите, что многие крупные бренды имеют прозрачный фон для своих значков.
• Формат файла ICO хорошо подходит для небольших изображений. Если вы не знакомы, используйте PNG для прозрачных фонов или JPG для Favicons с высоким разрешением и сплошным фоном.

Как создать фавикон для вашего Shopify Магазин

У вас есть возможность создать Favicon в любом программном обеспечении для дизайна по вашему выбору. Если вы предпочитаете Photoshop, сделайте это. Если вы предпочитаете бесплатное программное обеспечение, такое как GIMP или Pixlr, все они работают до тех пор, пока вы придерживаетесь требуемых размеров 32 × 32.

У вас также есть возможность создать Favicon с Shopify"Hatchful Logo" и бесплатный генератор значков. Посмотреть все наше руководство при использовании Hatchful построить логотип.

После того, как конструктор логотипов выполнит свою работу, он предоставит вам файл, заполненный несколькими форматами логотипа, одним из которых является Favicon.

Имейте в виду, что многие логотипы, которые вы делаете с Hatchful (читайте наши Hatchful обзор) используйте белое пространство вокруг логотипа, поэтому вам, возможно, придется отрегулировать его так, чтобы графика занимала большую часть пространства. В общем, я обнаружил, что вам следует использовать предоставленный значок Hatchful только в том случае, если он уже выглядит хорошо (он заполняет большую часть пространства и не имеет мелких элементов, таких как текст).

Если это не так, используйте стороннее программное обеспечение для редактирования, такое как Photoshop или Pixlr, чтобы вырезать некоторые ненужные элементы.

Важнo: Вам нужно использовать увеличенную версию изображения, если вы планируете растянуть его на холсте, чтобы вырезать текст и пустое пространство. Для этого я использовал Hatchful для создания логотипов, но на самом деле взял один из больших логотипов (не предоставленный файл Favicon), так как я не хочу, чтобы размытие происходило, когда я растягиваю его на холсте 32 × 32.

В программе редактирования выберите новый холст с шириной и высотой 32.

Создайте слой для нового изображения и убедитесь, что изображение больше, чем холст 32 × 32, так как вы можете растягивать его. Затем загрузите или поместите изображение на холст.

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

Как видите, уменьшенная версия Favicon в дизайнере Pixlr выглядит неплохо. Я покрыл большую часть отведенного места, выбрал яркую и сплошную иконку и удалил все признаки мелкого текста.

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

Вернитесь в Shopify приборная панель. Щелкните Интернет-магазин> Темы> Настроить.

Затем перейдите в Настройки темы> Фавикон.

Загрузите этот новый значок Favicon и нажмите кнопку «Сохранить» в Shopify редактор.

Опять же, основной способ проверить и просмотреть свой Favicon - просто открыть вкладку с URL-адресом веб-сайта домашней страницы. Как видите, Favicon выглядит красиво и на самом деле немного лучше, чем мой предыдущий Favicon, поскольку он не заполняет все предоставленное пространство 32 × 32.

В заключение

A Shopify На создание и добавление на ваш сайт Favicon уходит не больше нескольких минут, но при этом он служит прекрасным напоминанием вашим посетителям, на каком сайте они находятся. Кроме того, это может служить для людей способом найти ваш веб-сайт в своих закладках и истории браузера, учитывая, что они, скорее всего, просматривают длинный список других сайтов при просмотре этих разделов.

Имейте в виду, что не стоит довольствоваться размытым или неразборчивым Shopify Изображение фавикона. Если вы обнаружите, что первый значок Favicon выглядит не совсем правильно, или вы хотите вырезать текст или добавить прозрачный фон, вернитесь к началу и сделайте все правильно. Хотя вообще не иметь Favicon - не лучшая идея, но размытый или трудноразличимый Favicon заставляет ваш бренд выглядеть непрофессионально и несколько глупо.

Если у вас есть вопросы о добавлении значков в Shopify, или сделать свой собственный Shopify Favicon, дайте нам знать в разделе комментариев ниже.