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

Изучите основы того, что такое Shopify Фавикон и как его разместить в своем интернет-магазине.

Если вы подпишитесь на услугу по ссылке на этой странице, Reeves and Sons Limited может получить комиссию. Смотрите наши заявление об этике.

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

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

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

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

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

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

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

Shopify Примеры фавиконов

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

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

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

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

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

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

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

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

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

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

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

Интернет-магазин

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

настройки темы

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

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

значок - Shopify Favicon

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

выберите изображение

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

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

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

кнопка сохранения

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

пример Shopify Favicon

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

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

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

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

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

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

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

скачать логотип

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

Shopify Файл Favicon

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

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

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

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

32 по 32

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

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

большая версия

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

уменьшенная версия

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

скачать - Shopify Favicon

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

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

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

предварительный просмотр изображения

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

конечный продукт - Shopify Favicon

В заключение

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

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

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

Джо Варнимонт

Джо Варнимонт - писатель из Чикаго, специализирующийся на инструментах электронной коммерции, WordPress и социальных сетях. Когда не рыбачит и не занимается йогой, он коллекционирует марки в национальных парках (хотя это в основном для детей). Посмотрите портфолио Джо чтобы связаться с ним и просмотреть прошлые работы.

Комментарии Ответы 0

Оставьте комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены * *

Рейтинг *

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.