Фавиконка что такое: Что такое фавикон (favicon) для сайта и зачем он нужен

Содержание

Что такое фавикон (favicon) для сайта и зачем он нужен

Favicon – это пиктограмма (иконка) сайта, которая отображается в левой части перед названием страницы. Фавикон можно видеть в сниппетах поисковой выдачи Яндекса и Гугла, в закладках и во вкладках браузера. Нужен ли этот значок сайту, как он влияет на поведенческие метрики посетителей, помогает ли в продвижении? На все вопросы постараемся ответить в этой статье.


Что такое фавикон и зачем он нужен?

Название Favicon произошло от соединения двух английских слов: favorite – избранный и icon – значок. Фавиконка для сайта ассоциируется в сознании пользователей с определенным ресурсом в сети. В конкурентной среде эта небольшая пиктограмма помогает решать важные задачи:

  1. Улучшает отображение сайта в поисковой выдаче. Фавикон делает описание более заметным в визуальном плане, что положительно сказывается на кликабельности сниппета. Эффективно используя фавикон для сайта, можно выгодно выделить свой ресурс на фоне конкурентов.
    Например, придать картинке свойства СТА (call to action) – призыв к действию, изобразив стрелку, телефонную трубку или другую побуждающую инфографику.

  2. Повышает узнаваемость. У человека в эпоху клипового мышления развита визуальная память. Он не запоминает текст или названия, но очень хорошо откликается на яркую графику. Бренды, раскрученные сайты узнаются, в том числе, по фавикону. В 80% случаев пользователь в поиске кликнет на знакомую пиктограмму, даже если сниппет размещается на низкой позиции в выдаче ПС. Для продвижения компании часто используют маркетинговый прием: совмещают favicon для сайта с логотипом бренда. Это даёт двойной эффект – раскручивает ресурс в онлайн и повышает узнаваемость бренда в офлайне.

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


Если не использовать favicon, то браузер покажет пустой квадратик напротив названия, сниппета вашего сайта. В 90% случаев страдает кликабельность, а соответственно снижается трафик и позиции в выдаче. Если для создания страниц использовались конструкторы, браузер выведет фавикон используемого сервиса. Хорошо это или плохо? Вы рекламируете услуги другого ресурса «забесплатно». Также вы повышаете количество отказов при переходах с поиска или РСЯ – пользователь, кликнув на известную пиктограмму, попадает на «не тот ресурс» и быстро уходит. Поэтому ставьте свою картинку, тем более сделать это не сложно.

Как сделать фавикон для сайта?

Пиктограмма для ресурса – это изображение в формате GIF, JPEG, PNG или SVG с разрешением ICO. Favicon для сайта размещается в корневом каталоге. Стандартные размеры – 16Х16, 32Х32, 60Х60 или 120Х120 пикселей. Для корректного отображения длина и ширина иконки должны быть равными. Если используете фавикон из картинки, подбирайте квадратные изображения.

Пиктограмма должна отвечать следующим критериям:

  1. Демонстрировать четкие ассоциации с тематикой сайта, деятельностью компании. Фавикон для сайта должен показывать отличие, вызывать желание кликнуть по нему. Создавая иконку, относитесь к ней, как к логотипу бренда – это поможет эффективно визуализировать концепцию.
  2. Простота, понятность. Не перегружайте фавикон дизайном или сложными формами. Небольшие размеры картинки не дадут рассмотреть всех деталей. Сделайте иконку лаконичной, внятно читаемой при беглом просмотре.
  3. Оригинальность. Не используйте типовые пиктограммы. Оптимальный вариант – закажите favicon дизайнерам или фрилансерам. Трудно переоценить значение узнаваемости и дифференциации бренда для успешного продвижения бизнеса онлайн.

Как разместить favicon на сайте?

В 90% случаев картинка устанавливается с помощью плагинов или встроенных опций, которые используются в CMS. Ручной вариант предполагает размещение иконки в корневой папке сайта. В код между тегами на главной прописывается следующее значение:

< link rel="icon" href="http://путь до фавиконки" type=" image/формат картинки" >

В некоторых случаях для правильного отображения пиктограммы на гаджетах, может понадобиться прописать следующий код:

rel=»apple-touch-icon»

Как Яндекс работает с фавиконами?

Иконка не сразу появится в результат выдачи ПС. Новая фавиконка проходит индексацию Яндекса 2-3 недели после того, как поисковые роботы найдут ссылки на картинку в коде. Роботы скачивают пиктограмму в свою лабораторию, проверяют и через 10-14 дней добавляется в общую базу иконок.


Для быстрой индексации важно прописать ссылку на фавикон в коде главной страницы сайта. Также проверьте ответ Яндекса – сервер должен вернуть значение 200 ОК. Внимательно проверьте, нет ли запрета индексации в robots.txt.

Сервисы для создания пиктограмм

Для самостоятельного создания иконки сайта используйте:

  • favicon.ru – можно нарисовать картинку самим, использовать готовые решения, преобразовать файл в нужный формат. Есть платные услуги дизайнеров.
  • pr-cy.ru – в специальном разделе сервиса можно обработать картинку под иконку сайта, задать нужный размер и формат.
  • favicon.cc – хороший инструментарий для самостоятельного моделирования пиктограмм, есть платные услуги.

Резюме

Мы узнали, что такое фавикон. Рассмотрели его назначение, критерии эффективности и особенности индексации Яндексом. Иконку для сайта необходимо использовать как в эстетических, так и в практических целях.

Что такое фавикон, зачем он нужен на сайте?

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

Зачем нужен фавикон

Фавикон – на первый взгляд незначительный элемент сайта, но на самом деле помогающий решать важные задачи:

  • улучшать вид сайта в выдаче поисковых систем. Если нет иконки, сниппет менее заметен визуально, что может негативно сказаться на кликабельности. Чтобы выделить ресурс, используются разные визуальные приемы. Например, создаются значки в виде стрелочки, привлекающей взгляд к заголовку;

favicon1.png

favicon1.png
  • способствовать узнаваемости сайта, бренда. Часто посещаемые ресурсы запоминаются в том числе по фавикону. Вполне возможна ситуация, что пользователь кликнет по ссылке, занимающей даже более низкую позицию, если увидит знакомый значок. Работает и обратное: так как фавикон часто перекликается с логотипом, то запоминается и стоящая за ресурсом компания;

favicon2.png

favicon2.png
  • помогать пользователям ориентироваться в закладках и вкладках. Быстрее визуально найти нужный ресурс по значку, чем читать название или описание.

favicon3.png

favicon3.png

Как сделать фавикон

Традиционно в качестве иконки сайта используется изображение формата ICO размером 16 × 16 пикселей, размещенное в корневом каталоге как файл favicon.ico. Сейчас фавикон может иметь формат PNG, GIF, JPEG, SVG. Но так как поддержка может отсутствовать в каком-либо конкретном браузере или его версии, как правило, используют ICO. Размер, кроме стандартного, может быть 32 × 32, (не везде 60 × 60), 120 × 120.

Подобранное изображение должно:

  • ассоциироваться с сайтом и/или тематикой. Часто фавиконку создают на основе логотипа, чтобы она работала на брендинг организации, или подбирают что-то, связанное с темой, чтобы подчеркнуть релевантность, визуализировать концепцию, вызвать эмоцию и т. д.;
  • быть простым и понятным. Значок имеет скромные размеры и воспринимается при быстром просмотре, поэтому стоит избегать сложных форм, слишком мелких деталей, неоднозначных смыслов и пр.;
  • по возможности быть оригинальным. В интернете можно найти базы готовых иконок, но если выбрать ту, которая используется многими, особенно конкурентами, можно потерять в узнаваемости.

Скачанное, сконвертированное или разработанное изображение размещается в корневой папке сайта. Затем в код head нужно добавить ссылку на фавикон вида <link rel=»icon» href=»http://путь до файла» type=» image/формат»>.

Если используется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Для браузера Internet Explorer используется особая ссылка, где вначале будет link rel=»shortcut icon».

Для корректного отображения на мобильных устройствах также могут потребоваться отдельные записи, например rel=»apple-touch-icon».

Дополнительное использование файлов больших размеров, например 120 × 120, способствует тому, чтобы возможность отображения фавиконки в разных местах, устройствах, браузерах была максимальной. Например, в устройствах на iOS иконки большого формата могут использоваться как значки приложений.

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

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

Фавикон: зачем нужен, как создать и поставить на сайт

Подготовили для вас полную инструкцию по фавикон: что это за вид иконки, зачем он нужен вашему сайту, как его создать и поставить на сайт. Нашли требования «Яндекс» и Google к фавиконкам и подобрали четыре сервиса, которые бесплатно сделают за вас всю техническую часть работы.

Что такое фавикон

Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.

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

Зачем нужен фавикон

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

Помогает в навигации

Фавиконка помогает быстро находить сайт среди других. Когда открыто много вкладок, проще найти значок, чем считывать название каждой вкладки.

Фавиконы можно увидеть:

Крупные фавиконы на стартовой странице Mozilla Firefox

Вызывает доверие

Хорошо оформленный сайт производит хорошее впечатление. Фавикон — часть этого впечатления. Сравните сами: на скриншоте ниже вкладки в мобильном браузере Chrome. На второй снизу вкладке пустая иконка. Вкладку сложнее выделить взглядом среди остальных, да и выглядит она менее презентабельно, чем соседние.

Сайты с фавиконками и без них во вкладках мобильного браузера

Увеличивает кликабельность

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.

Создание favicon

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

Визуальная составляющая

Что учитывать при создании фавиконки:

  • Размер. В некоторых интерфейсах и на маленьких экранах он может достигать 16 на 16 пикселей.
  • Читаемость. Иконка должна читаться в разном окружении — на вкладках и в истории, в результатах поиска.
  • Стиль бренда. Даже если ваш логотип не удается перенести в микро-формат, нужно сделать что-то связанное, в айдентике бренда.

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

Отличный фавикон у «Google Диска». Разноцветный треугольник хорошо смотрится в любом размере.

Логотип «Google Диска» и он же в виде фавиконки на вкладке

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

Логотип SendPulse и он же в виде фавиконки на вкладке

Если у вас буквенное лого, его тоже можно разместить на фавиконе. На примере от VC.ru видно, что при хорошо подобранном шрифте буквы нормально читаются даже на маленькой иконке. Для яркости добавили красную точку, так вкладку гораздо легче найти.

Логотип VC.ru и он же в виде фавиконки на вкладке

Требования «Яндекс» к фавиконке

Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.

Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.

Вот что «Яндекс» пишет по поводу фавиконок:

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

Раздел «Яндекс.Справки» о фавиконках

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

Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.

Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.

Кроме этого, Google рекомендует следующее:

  • Иконка должна совпадать с остальным графическим представлением бренда.
  • Не стоит часто менять адрес файла favicon.
  • Иконка не должна быть неприемлемо или непристойной, иначе поисковик заменит ее на стандартную иконку.

Раздел документации Google о фавиконках

Сервисы для создания фавиконки без программиста

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

Realfavicongenerator

Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.

Настройка получившихся иконок в Realfavicongenerator

В результате получаете пакет файлов для скачивания и код для встраивания на сайт.

Пакет нужно скачать в виде файлов и куска кода

Favic-o-matic

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

Результат создания фавиконок в Favic-o-Matic

Favicon.ico & App Icon Generator

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

Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator

Faviconit

Этот сервис попросит исходник минимум 310 на 310 пикселей и весом не более 5 Мб. После обработки вы получите пакет с файлами, внутри которого будет лежать и текстовый файл с кодом для встраивания на сайт.

Готовый пакет фавиконок и код для сайта в Faviconit

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

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

Загружаем иконки на сайт

Иконки нужно положить в корневую папку вашего сайта. Для этого понадобится доступ к сайту на хостинге, где он лежит. Загрузить файлы можно либо через собственную панель управления, если такая есть у вашего хостинг-провайдера, или какой-нибудь файловый менеджер, например, FileZilla.

Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

Редактируем код

Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент <head>. Выглядеть это будет примерно так:

<head>

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>

</head>

Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.

Фавикон: что следует запомнить

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

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

Фавиконок нужно несколько на разные локации. Чтобы не запоминать размеры и свойства всех нужных иконок, используйте один из специальных сервисов. Сервис выдаст вам готовый пакет фавиконок и кусок кода, которые нужно будет загрузить в корневую папку вашего сайта и вставить в код главной страницы.

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

[Всего: 7   Средний:  4.9/5]

что это такое и как его сделать

Формат favicon

Изначально картинки для фавиконов создавали только в формате .ico. Этот формат использовал для закладок Microsoft Internet Explorer. Иконки помещали в корневой каталог сайта под именем favicon.ico.

Формат .ico удобен, поскольку в нём можно указать несколько размеров иконок с различной битностью. Минус в том, что браузеры не всегда правильно выбирают размер изображения и в итоге фавикон отображается в низком разрешении.

Позже на смену .ico пришли форматы .png и .svg. Они хорошо отображаются и меньше весят. Большинство современных платформ и операционных систем поддерживают .png, а формат .svg используют в Safari MacOS.

Иногда фавиконки делают в форматах .jpeg и .gif. Это допустимо, но нежелательно, поскольку поддерживают эти форматы не все браузеры. Firefox и Opera разрешают использование анимированных «гифок», но не рекомендую их применять — движущиеся картинки будут отвлекать внимание посетителя при просмотре сайта и раздражать пользователя при отображении среди браузерных вкладок.

В таблице показаны версии основных браузеров и поддерживаемые ими форматы фавикона:

 

Основные браузеры и поддержка различных форматов фавикона в разных версиях
Браузер ICO PNG JPEG SVG GIF APNG GIF-анимация
Google Chrome Да От 4.0 От 4.0 Нет От 4.0 Нет Нет
Opera От 7.0 От 7.0 От 7.0 Нет От 7.0 От 9.5 От 7.0
Firefox От 1.0 От 1.0 Да Да От 1.0 От 3.0 Да
Internet Explorer От 5.0 От 11.0 Да Нет От 11.0 Нет Нет
Safari MacOS Да От 4.0 От 4.0 Да От 4.0 Нет Нет

На текущий момент основные форматы для фавикона —  это .ico и .png. Формат .jpeg в некоторых случаях может отображаться некорректно. Для Safari MacOS лучше применять .svg. А вот прочие форматы использовать нецелесообразно из-за плохой поддержки.

Для хорошего отображения фавиконов в разных контекстах желательно создавать иконки в двух вариантах:

  • С прозрачным фоном. Значок будет показан рядом с URL-адресом: в закладках, в адресной строке и прочее.
  • Со сплошной заливкой. Отображается там, где устройство или браузер использует маску для фона: в контекстном меню, в сетчатых закладках.

В таблице я показала,  какие стиль и размер фавикона в форматах .png/.svg выбрать для разных браузеров и операционных систем

 

Классические десктопные браузеры

16×16, 32×32, 48×48 PNG Прозрачный

 

Браузер Safari

Вектор SVG Прозрачный

 

Мобильный браузер Opera

228×228 PNG Сплошная заливка

 

Windows 8.0

144×144 PNG Прозрачный

 

Windows 8.1

128×128, 270 x 270, 558×558 PNG Прозрачный

 

Apple iOS

180×180 PNG Сплошная заливка

 

Google Android и Chrome

192×192, 512×512 PNG Сплошная заливка

Конечно, сложно представить даже в нескольких таблицах все возможные вариации иконок. Если вы не знаете, какой именно размер фавикона вам необходим, воспользуйтесь специальными сервисами. Например, генератор Favicomatic предлагает на выбор различные размеры иконок и к каждому значку показывает подсказку для лучшего соответствия.

 

Что такое favicon для сайта, как сделать фавикон и зачем нужна иконка сайта?

09.08.2021


Инструментов, чтобы выделить свой сайт среди миллионов других в поисковой выдаче, не так-то много. Favicon ― это один из таких инструментов. 

Favicon сайта ― что это

Что такое favicon? Favicon (favorites icon ― иконка для избранного) ― это иконка сайта, которая отображается:

  • на вкладках перед названием сайта

  • в закладках пользователя

  • слева от названия сайта в поисковой выдаче:

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

Изображение может быть любое. Это может быть просто картинка, которая будет отражать тему сайта, или логотип компании. 

Яндекс уже около 10 лет отображает фавиконы в поисковой выдаче. А вот Google долгое время не торопился внедрять эту фичу в свой поисковик, поэтому пользователям пришлось ждать аж до 2019 года. Пока Google экспериментирует с фавиконами в поисковой выдаче: ищет им подходящее место, проверяет их нужность. Последний крупный эксперимент в отношении фавиконов был в январе 2020 года. О технических работах разработчики писали в официальном Twitter компании.

Если у вашего сайта иконка не установлена, на вкладках и в поисковой выдаче будет отображаться стандартная иконка. У каждого браузера она своя, например, в Google Chrome отображается чёрно-белая планета:

Для чего нужен favicon

Как использовать favicon? На что он может повлиять?

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

  2. Повышение узнаваемости. При разработке бренда очень важно, чтобы логотип компании примелькался аудитории. Если вы публикуете много контента на сайте, пользователь будет часто встречать ваш лого в ПС. Это будет способствовать запоминанию бренда. 

  3. Удобный поиск сайта в закладках. Как мы говорили ранее, изначально фавикон создавался именно для того, чтобы нужный сайт было легче найти в избранном. До сих пор эта функция осталась, и иконки значительно облегчают поиск ресурсов. То же самое работает и с иконками во вкладках. Современные ПК очень производительные, поэтому они могут постоянно держать открытыми несколько десятков вкладок. В таких случаях иконка для сайта ― единственный способ найти то, что нужно.

  4. ​​Заставить пользователей больше доверять вам. Многие сайты уже давно пользуются иконками. Если вы не создадите себе отличительный знак, вы можете выделяться среди остальных ресурсов с плохой точки зрения. Пользователи могут задуматься о вашей профессиональности, а может даже принять за мошенников. Особенно это может сказаться на интернет-магазинах, так как люди будут бояться оплачивать товары через такой сайт. Всё это может значительно усложнить продвижение бренда.

Технические требования к изображению

Раньше для favicon использовали формат ICO. Сейчас браузеры поддерживают такие форматы, как SVG (чаще всего рекомендуют именно его), ICO, GIF, JPEG, PNG, BMP. 

Рекомендованный размер картинки в каждой поисковой системе разный. Яндекс говорит, что фавикон должен быть 120 × 120, 32 × 32 и 16 x 16 пикселей. В официальном справочном материале Яндекс рекомендует использовать изображения размером 120 × 120 пикселей (для растровых форматов) или изображение в формате SVG. Именно эти параметры позволят отобразить логотип сайта чётко и заметно на сервисах Яндекса.

В Google рекомендуемый размер значка должен быть кратным 48 пикселям, например, 48 x 48, 96 x 96, 144 x 144. Специалисты Google просят не использовать иконки 16 x 16, так как они слишком маленькие.

Как создать favicon

В целом favicon можно сделать в любом графическом редакторе, в котором вы привыкли работать. Для этой задачи подойдёт даже Paint. Важно только соблюсти необходимые размеры и конвертировать в один из форматов, о которых мы говорили ранее.

Такие профессиональные редакторы, как Adobe Photoshop, Adobe Illustrator или Figma, за счёт большей функциональности позволят создать уникальную иконку. Если вы не работаете с профессиональными редакторами или просто не гонитесь за уникальностью изображения, можете воспользоваться одним из способов, которые мы перечислим.

Как сделать favicon для сайта:

  1. Конвертировать уже готовое изображение. Если у вас уже есть готовая иконка или картинка, можно просто конвертировать её в нужный формат. Для этого подойдёт сервис pr-cy.ru, be1.ru.

  2. Нарисовать иконку самостоятельно. Есть сервисы, у которых очень ограниченный функционал, но с их помощью можно сделать простое начертание. Такие возможности дают сайты katvin.com, favicon.by, favicon.cc, xiconeditor.com
    Для примера сделаем иконку в виде радостного смайлика в сервисе favicon.by.
     

  3. Использовать готовые иконки. Необязательно рисовать иконку с нуля. Можно взять уже готовые иконки, которые выложены в библиотеки сайтов в свободном доступе. Взять готовые фавиконы можно на faviconka.ru и findicons.com.

Советы по созданию favicon

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

  2. Иконка должна чётко ассоциироваться со сферой вашей деятельности или брендом. В поисковой выдаче пользователь должен с первого взгляда понимать, подходит ли ему тематика сайта.  

  3. Фавикон должен выделяться среди остальных. Перед тем как сделать иконку, проанализируйте, какие изображения у конкурентов, которые выпадают в поисковой выдаче вместе с вашим сайтом. Представим, ваш сайт посвящён ландшафтному дизайну. Все похожие сайты выбирают зелёный цвет для своих иконок, значит, чтобы выделиться нужно использовать другой цвет, например голубой. Если среди ваших конкурентов замечается буйство красок, можно выбрать чёрно-белый формат.

Favicon: как добавить на сайт

Способ добавления фавикона на сайт зависит от того, где сделан сайт. Например, для CMS есть плагины, которые значительно облегчают задачу. 

Самый универсальный способ ― добавить значок сайта через код. С него и начнём.

Как добавить favicon на сайт через код

  1. Загрузите файл с иконкой в корневой каталог сайта.

  2. Добавьте в HTML-код главной страницы сайта в элемент head ссылку на размещённый файл.


<head>

     <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">

     <link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">

</head>

Атрибуты:

rel: 

  • icon — учитывается большинством браузеров,

  • shortcut icon — учитывается браузером Internet Explorer.

type: 

  • image/svg+xml — для формата SVG,

  • image/x-icon или image/vnd.microsoft.icon — для формата ICO,

  • image/gif — для формата GIF,

  • image/jpeg — для формата JPEG,

  • image/png — для формата PNG,

  • image/bmp — для формата BMP.

Совет. Если сайт должен быть доступен по нескольким доменам, лучше указывать в коде не полный путь, а относительный. Например, не https://example.com/favicon.ico, а просто /favicon.ico.

Обратите внимание! Если у вас кириллический домен в атрибуте href используйте Punycode. Например, для адреса https://новыйсайт.рф/favicon.ico нужно указать https://xn--80advbqgxk0f.xn--p1ai/favicon.ico или просто использовать относительный путь /favicon.ico.

Как добавить favicon на сайт в WordPress

В WordPress есть больше вариантов добавить иконку на сайт. Можно использовать плагин или просто воспользоваться встроенными настройками WordPress. 

Чтобы добавить иконку можно, например, использовать плагин RealFaviconGenerator

  1. Перейдите в админку WordPress.

  2. Перейдите в Плагин ― Добавить новый.

  3. Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.

  4. Перейдите во Внешний вид ― Фавикон

  5. Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.

  6. На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.

  7. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

Не сложнее добавить favicon и через обычные настройки WordPress.

  1. В админке WordPress перейдите во Внешний вид ― Настроить.

  2. Выберите Общие настройки ― Свойства сайта.

  3. В разделе Иконка сайта нажмите Выберите иконку сайта 

  4. Загрузите фавикон.

  5. Чтобы сохранить изменения, нажмите кнопку Опубликовать:

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

В лучшем случае, поисковые системы начинают индексировать фавиконку через 1-2 недели после её настройки. А может и через несколько месяцев. К сожалению, здесь все зависит от решения системы. 

что это, для чего нужен, форматы favicon

Favicon — иконка сайта, в переводе «значок для избранного» (FAVorite ICON). Обычно Favicon сайта отображает логотип компании, первую букву ее названия или какое-либо изображение, характеризующее тематику/направленность сайта.

SEO продвижение в ИТ

Где можно встретить Favicon и для чего он нужен

Фавикон можно увидеть:

  • на открытой вкладке в браузере около названия страницы или сайта;
  • в браузерной истории;
  • в панели закладок;
  • в панели «Избранное»;
  • в мобильной и обычной выдаче поисковых систем.

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

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

Доступные форматы и основные параметры Favicon

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

Самый известный, но уже немного устаревший формат Favicon — ICO. Плюсы этого формата заключаются в том, что в одном файле может одновременно храниться сразу несколько иконок разного размера.

Размеры — второй важный параметр для Favicon. Ранее иконки сайтов могли иметь размеры лишь 16 на 16 пикселей. А современные браузеры поддерживают изображения размерами 32 на 32 пикселя.

Для создания Favicon в интернете есть множество онлайн-сервисов — генераторов. Иконка для сайта может быть разработана в каком-либо графическом редакторе.

Поддержка браузерами

Ранее браузеры поддерживали исключительно ICO-формат, но сегодня веб-мастера могут использовать более широкий набор форматов Favicon:

Исключение — браузер Internet Explorer 10 версии и более ранних. Он поддерживает исключительно формат ICO.

Все остальные современные браузеры (по типу Google Chrome, Mozilla Firefox и т. д.) могут работать с анимированными Фавикон формата png. И такое решение позволяет владельцам сайтов еще сильнее выделять свои ресурсы среди конкурентных.

Анимированные png-иконки сайтов отличаются высоким качеством изображения, которое не страдает ни в мобильном, ни в десктопном браузере. Основной недостаток иконок формата svg, gif, jpeg заключается в том, что не каждый браузер их поддерживает.

И если рассмотреть, например, svg-фавикон, то он тоже отличается высоким качеством изображения и может масштабироваться без его потери. Теперь все дело остается за браузерами, которые постепенно начинают поддержку иконок сайтов форматов svg, gif и jpeg.

Что такое favicon (иконка сайта) и как ее добавить

Каждый сайт должен иметь свой значок или иконку (favicon). Несмотря на то, что они небольшого размера, фавиконки оказывают огромное влияние – они используются браузерами при визуализации вашего сайта (или бренда). Фавиконы используются не только для отображения значка сайта на вкладке браузера, они также могут быть использованы для закладок и в плитке последних посещенных сайтов. Из сегодняшней статьи вы узнаете исчерпывающую информацию об favicon: что это такое, зачем нужно, как создать и как разместить на своем сайте.

 

 

Что такое фавикон (favicon)

Favicon (дословный термин любимая иконка) – это маленькая картинка, которая используется браузерами для брендирования вашего сайта/компании. Если favicon установлен на вашем сайте правильно, браузеры будут использовать его по мере необходимости в разных местах. Сюда относятся вкладки браузера (рядом с заголовком страницы), адресные строки (рядом с URL-адресом), закладки и так далее.

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

Ниже пример файла-иконки favicon, который используется на нашем сайте:

 

 

Важность favicon

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

 

 

Формат файла favicon

Есть несколько допустимых форматов изображений для значков favicon, но два самых популярных – это ico и png. Эти форматы имеют наибольшую поддержку браузерами и поддерживают прозрачный фон для значка (в отличие от jpg).

 

Формат ICO

Традиционно иконки создаются в виде файла ICO (favicon.ico). Файл ICO позволяет хранить несколько изображений разных размеров в одном файле, что позволяет браузеру (на ПК и в мобильных) выбирать необходимый размер из доступных изображений. Проблема с форматом ico заключается в том, что не многие люди знают, что это такое или как его создать. Вы можете создавать файлы ICO в фоторедакторе, таком как Gimp или Фотошоп, но самым простым способом будет использование онлайн-генератора значков, который делает этот процесс действительно простым. В сети Интернет вы сможете найти достаточное количество таких онлайн-генераторов.

 

 

Формат PNG

Начиная с HTML5, формат PNG является приемлемым форматом для значков сайтов, и на сегодня все основные браузеры поддерживают его. Возможно, это будет лучшим вариантом в будущем, так как формат png имеет более широкую популярность в сети. Однако, поскольку все браузеры (даже старые) поддерживают ICO, лучше использовать версии и png, и ico, чтобы избежать нежелательных 404-х ошибок.

 

 

Размер файла favicon

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

  • 16x16px, 32x32px – стандартные размеры favicon.
  • 180x180px – значок для iOS.
  • 192x192px – значок для Android/Chrome.
  • 270x270px – значок для плитки среднего размера в Windows.

 

 

Именование и место расположения файла favicon

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

Примечание: Размещение favicon.ico в корневом каталоге все еще является хорошей идеей в качестве запасного варианта.

 

 

Как добавить значок favicon на свой сайт

Если вы уже создали этот файл (или файлы), вам осталось пройти только два шага.

Шаг №1: загрузка файла favicon на сервер хостинга

Во-первых, вам нужно загрузить файл favicon.ico на сервер, на котором размещен ваш веб-сайт (используя, например, FTP-клиент или же панель управления хостингом). Как мы уже упоминали ранее, это может быть корневой каталог сайта, либо же другая папка. Главное позже указать правильную ссылку на расположение файла.

 

Шаг №2: добавление кода с тегом информации о файле favicon

Во-вторых, вам нужно разместить тег подключения favicon в шапке сайта (в секции <head>). Ниже примеры тегов для файлов favicon, вы можете использовать их все, если у вас есть несколько размеров этого файла:

<head>
……..
  <link rel="apple-touch-icon" href="{ВАШ_ДОМЕН}/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="{ВАШ_ДОМЕН}/favicon-32x32.png">
  <link rel="icon" type="image/png" href="{ВАШ_ДОМЕН}/favicon-16x16.png">
  <link rel="icon" type="image/x-icon" href="{ВАШ_ДОМЕН}/favicon.ico">
……..
</head>

 

 

Добавьте этот код в исходный код вашего сайта, только не забудьте заменить {ВАШ_ДОМЕН} на адрес своего сайта. Также, не забудьте об правильном расположении и именовании ваших файлов favicon.

 

 

 

Заключительная мысль

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

Спасибо, что читаете нас!

 

 

Что такое значки?

• 2 мин чтения

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

— Кори

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

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

Вот наш значок, отображаемый в адресной строке Firefox:

Какой тип изображения является значком? #

Хотя большинство современных браузеров распознают форматы PNG, GIF и JPG для значков, Internet Explorer в настоящее время не распознает их.Рекомендуется использовать формат Microsoft ICO, который работает во всех браузерах.

Какого размера должен быть мой значок? #

Еще одна веская причина для использования формата ICO заключается в том, что он может содержать несколько значков разного размера в одном файле ICO. Лучше всего иметь версию как минимум 16×16 пикселей. Я обычно также включаю версии 32×32 и 48×48. Таким образом, если пользователи перетаскивают закладку на свой рабочий стол, они увидят красиво масштабированную версию значка вместо растянутой версии 16×16.Чтобы узнать, как создать значок с несколькими размерами, см. Раздел Как создать значок ниже.

Ниже: версии значка A Beautiful Site размером 16 x 16, 32 x 32 и 48 x 48 пикселей. Каждое изображение встроено в один файл favicon.ico.

Наиболее распространенные размеры значков:

.
  • 16×16
  • 32×32
  • 48×48
  • 64×64
  • 128×128

Как создать фавикон #

Хотя есть много способов создать значки, самый простой — использовать онлайн-инструмент.У нас есть совершенно бесплатный генератор значков. Он называется Фавикон. Чтобы создать свой значок с помощью Favikon, просто загрузите изображение, обрежьте его, а затем загрузите получившийся значок.

Как сделать ссылку на свой фавикон #

Теперь, когда вы создали симпатичный маленький значок, вам нужно указать веб-браузерам и другим приложениям, где его найти. Добавление этой строки в раздел вашего HTML гарантирует, что ваш значок будет найден:

  
  

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

Если вы добавите значок без ссылки на него в своем HTML, вы можете заметить, что некоторые браузеры все равно найдут и отобразят его.Это происходит только в том случае, если значок находится в корневом каталоге. Нехорошо полагаться на этот метод, поэтому, если вы хотите убедиться, что приложения будут видеть ваш значок, перейдите к нему <ссылка> !

Что такое фавикон? Примеры и как добавить его на свой веб-сайт

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

Где вы увидите Favicons

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

Помимо вкладок браузера, есть и другие места, где отображаются значки:

Менеджер закладок

Открыв диспетчер закладок, вы заметите, что значки значков отображаются слева от веб-адреса.

Автозаполнение предложений поиска

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

в результатах поиска

Есть случаи, когда вы также увидите значки в результатах поиска. Например, если вы переходите в Новости Google, в результатах поиска отображаются значки, чтобы читатели могли быстро и легко определить, из какого источника новостей получены результаты.

История браузера

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

Фавиконы и SEO

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

Итак, как узнаваемость бренда и пользовательский опыт работают с иконками?

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

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

Вот как это выглядит, когда у вас нет значка, и вам нужно довольствоваться обычным заполнителем серого глобуса (подсказка: это четвертая вкладка на этом изображении):

Сколько из этих брендов вы знаете только по их иконкам?

Создание персонализированного значка Favicon

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

Определение размера вашего Favicon

Фавикон выглядит таким крошечным — так каков размер изображения у фавикона? Значки значков различаются по размеру и обычно составляют от 16 × 16 пикселей до 192 × 192 пикселей.Однако у многих разработчиков веб-сайтов, таких как Wix и Squarespace, есть свои собственные рекомендации, поэтому стоит проверить систему управления контентом (CMS), которую вы используете для создания своего сайта.

Рекомендуемый размер Favicon поставщиком


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

Форматы типов файлов Favicon: ICO против PNG

Microsoft представила фавиконы как концепцию еще в 1999 году, когда представила расширение ICO.Другие браузеры быстро адаптировали формат файла и использование значков. Однако в последнее время самые популярные браузеры начали принимать файлы изображений PNG для значков. Итак, следует ли использовать ICO или PNG для своего фавикона?

  • Преимущество ICO: Все браузеры поддерживают ICO, и он предлагает обратную совместимость (например, если кто-то все еще использует IE 5, он все равно будет видеть ваш значок).
  • Преимущество PNG: Маленький размер, совместим со всеми браузерами (за исключением некоторых более старых версий IE) и высококачественное изображение.

Рассмотрите долю рынка веб-браузеров по данным W3Counter: более 65% пользователей предпочитают Chrome, 17,5% используют Safari, 5,6% используют Internet Explorer и Edge, 4,4% используют Firefox и менее 2% используют Opera. Если большинство пользователей используют Chrome и Safari, вы можете придерживаться типа файла PNG и размером 512 × 512 пикселей.

Совет от профессионалов: Если вы добавляете на свой сайт изображения PNG и ICO, браузеры, поддерживающие файлы PNG, обычно видят ICO и используют его вместо этого. Чтобы не рисковать и упростить себе жизнь при создании значка, выберите PNG.

Вот несколько советов по созданию пользовательского значка для вашего сайта:

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

Если вам нужна помощь в разработке фавикона, наймите графического дизайнера из Fiverr, который сделает это за вас всего за 5 долларов.

Если у вас есть дизайн, добавить значок на веб-сайт проще, чем может показаться, учитывая все различия в размере и типах файлов. Это одна из основ веб-сайтов, которую вы должны изучить, чтобы легко управлять своим собственным сайтом.Процесс добавления значка немного отличается для каждой системы управления контентом (CMS) или конструктора веб-сайтов, но вам не нужно редактировать какой-либо код, чтобы добавить значок на веб-сайт.

Выберите, на какой CMS построен ваш сайт, чтобы узнать больше о конкретных шагах:

1. Откройте меню настройки

Перейдите в панель управления WordPress и нажмите «Внешний вид»> «Настроить». Это открывает меню, в котором вы можете установить свою тему и настройки страницы, включая ваш значок.

2. Перейти к идентификации сайта

В этом разделе вы устанавливаете заголовок сайта, логотип и значок. WordPress предлагает начать с размера 512 × 512 пикселей, а затем каждый браузер использует соответствующий размер. Нажмите кнопку с надписью «Выбрать файл», чтобы добавить значок, или «Сменить изображение», чтобы заменить значок.

3. Загрузите свой Favicon & Crop

Если ваше изображение слишком велико, WordPress предложит вам обрезать, но если ваше изображение в порядке, просто пропустите обрезку.WordPress показывает вам предварительный просмотр того, как ваш значок будет выглядеть как значок вкладки браузера и как значок приложения. Как только вы будете довольны своим значком, все, что вам нужно сделать, это нажать «Опубликовать» вверху.


1. Перейдите в меню «Дизайн»

На панели управления Squarespace щелкните Дизайн. Это вызывает настройки сайта. Щелкните значок браузера.

2. Добавьте свой Favicon

Загрузите свое изображение, перетащив его или щелкнув и просмотрите свой рабочий стол, чтобы найти свой значок.Squarespace предлагает вам начать с изображения от 100 × 100 пикселей до 300 × 300 пикселей. Щелкните Сохранить. Вы можете проверить, как выглядит ваш значок, открыв свой сайт на отдельной вкладке, но он может появиться не сразу. Если он не отображается, попробуйте очистить кеш, а затем повторите попытку.


1. Откройте меню настроек

На панели инструментов Wix нажмите «Настройки» в нижней части левого меню.Это откроет настройки вашего сайта, где вы можете загрузить свой значок. Нажмите «Управление» справа от опции «Фавикон».

2. Загрузите свой Favicon

Добавьте или обновите изображение, нажав соответствующую кнопку. Затем добавьте свой значок, перетащив его в окно. Wix предварительно показывает, как выглядит ваш значок на вкладке браузера. Стандарт — 16 × 16, но для дополнительного качества можно также использовать 48 × 48 пикселей, 96 × 96, 144 × 144 или 192 × 192.


1.Зайдите в Общие настройки

Важно проверить, какой редактор вы используете, чтобы узнать, как добавить значок на свой сайт Weebly или Square. Если вы создали веб-сайт для малого бизнеса (не интернет-магазин) и используете редактор сайтов Weebly, вам нужно перейти в Личный кабинет> Правка> Настройки> Общие.

Если у вас есть интернет-магазин через Weebly с Ecommerce by Square, вы, скорее всего, используете редактор Square, поэтому ваш процесс немного отличается. Щелкните Веб-сайт> Общие настройки.Вы увидите опцию Favicon посередине страницы.

2. Добавьте свой Favicon

Загрузите свой значок, как любое другое изображение. Редакторы Weebly и Square просто принимают изображение — вам не нужно нажимать кнопку сохранения. Редактор Square предлагает использовать изображение размером не более 64 × 64 пикселей. Вам необходимо опубликовать или переиздать свой сайт, чтобы значок вступил в силу.


1.Откройте страницу ваших тем

Начните с панели инструментов Shopify, а затем щелкните в своем Интернет-магазине> Темы. В разделе «Текущая тема» нажмите кнопку «Настроить».

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

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

3. Загрузите свой Favicon

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


1. Откройте редактор сайта

Начните с открытия редактора сайта GoDaddy.В правом верхнем углу меню нажмите «Настройки». Это открывает меню настроек сайта, где вы найдете опцию Favicon посередине меню.

2. Загрузите свой Favicon

Нажмите кнопку с надписью «Загрузить», чтобы добавить значок. GoDaddy предлагает изображения размером не более 180 × 180 пикселей. Нажмите кнопку с надписью «Готово», и все. После загрузки вы должны увидеть свое изображение в квадрате, но GoDaddy не включает предварительный просмотр того, как выглядит ваш значок в виде изображения вкладки браузера.Вы можете проверить это после того, как опубликуете свой сайт.


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

Как я могу бесплатно создать фавикон?

Если у вас нет программного обеспечения для графического дизайна, у вас есть возможность бесплатно создать значок с помощью бесплатных приложений для графического дизайна, таких как Canva. Некоторые конструкторы веб-сайтов включают в себя создателей логотипов, поэтому вы можете создавать свой логотип и значок одновременно, и это не должно вам ничего дополнительно стоить. Вы можете найти множество других инструментов веб-дизайна, которые помогут вам создать значок.

Нужен ли фавикон?

Хотя значок «favicon» не является обязательным для веб-сайта, это небольшой и простой способ помочь с брендингом и улучшить UX. Фавикон облегчает пользователям распознавание и поиск сайта в списке закладок, архивах истории и на вкладках браузера. Помните о фавиконах при разработке своего веб-сайта. Узнайте больше в этом руководстве о том, как создать веб-сайт.

Где мне поставить фавикон?

Значок отображается в верхнем левом углу вкладки браузера, но чтобы получить его, вы должны использовать свою CMS, чтобы загрузить изображение в нужное место.Как правило, вам не нужно редактировать какой-либо код, и большинство конструкторов сайтов позволяют добавить значок в меню настроек сайта за два-три шага. Для получения дополнительной информации об этих универсальных веб-хостах и ​​CMS прочтите это руководство по лучшим конструкторам веб-сайтов.

Итог

Превратить ваш логотип в высококачественный значок легко и бесплатно с помощью платформ для дизайна с перетаскиванием, таких как Canva. Однако, если вы не знаете, с чего начать, или у вас действительно нет времени, не пропускайте значок, а вместо этого получите его профессионально разработанный для вас от профессионала в области графического дизайна всего за 5 долларов на Fiverr.

Вам также может понравиться…

Что такое фавикон? | Плюс советы и идеи по созданию фавикона!

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

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

На этой странице мы ответим на вопрос «Что такое значок?», А также расскажем, почему вы должны его создать, и дадим четыре совета по созданию запоминающегося (и совместимого) значка веб-сайта.

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

Что такое значок?

Значок — это небольшой значок вашего веб-сайта, который отображается рядом с названием страницы или тегом заголовка вашего веб-сайта.

Эти значки встречаются во многих местах, в том числе:

  • Вкладка браузера
  • Закладки
  • Панель инструментов
  • Недавно посещенные
  • Панель поиска
  • Мобильный поиск

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

Значок веб-сайта еще более полезен, если кто-то добавляет ваш сайт в закладки и хочет вернуться к нему позже.

Многие компании используют простое изображение, например логотип, в качестве своего значка. Один из лучших примеров фавиконов — Target. Target использует свой известный значок «яблочко» в качестве значка.

У вас также есть возможность использовать значок с текстом от одного до трех символов.Википедия — отличный пример использования текста вместо изображения.

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

Размер и форматирование значков

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

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

Размер файла должен быть кратен квадрату 48 пикселей. Таким образом, у вас может быть файл значка размером 48x48px или 144x144px. Независимо от размера, который вы используете, ваше изображение будет масштабировано до формата 16×16 пикселей.

Если вы размещаете свой веб-сайт на конструкторе веб-сайтов, размеры ваших значков будут отличаться. Например, WordPress требует 512 × 512 пикселей для своего значка, а Squarespace требует 300 × 300 пикселей для его значка.

Также важно помнить, что значки значков отображаются на вкладках браузера или в списках закладок.

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

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

Зачем мне создавать фавикон для сайта?

Favicons предлагает множество преимуществ для вашего бизнеса, в том числе:

  • Фавиконы повышают узнаваемость бренда: Когда вы используете значок, который отражает ваш бизнес, люди его видят и лучше узнают о вашей компании.Они познакомятся с вашим брендом и вспомнят о нем позже.
  • Фавиконы добавляют легитимности вашему сайту: Ваш сайт будет отображаться вместе с фавиконом. Это поможет вам выглядеть профессионально в онлайн-сфере.
  • Favicons помогают с поисковой оптимизацией (SEO): Favicons помогают создать удобный веб-сайт, который является важным компонентом SEO. Вы также повысите узнаваемость бренда, что побудит людей вернуться на ваш сайт и совершить конверсию.
  • Favicons помогают вашей аудитории найти вашу страницу, если они добавили ее в закладки: Favicons упрощают для вашей аудитории поиск вашего веб-сайта, когда они добавляют его в закладки.Люди не всегда запоминают названия брендов, но узнают ваш бизнес по значку.
  • Favicons помогают людям найти вашу компанию с несколькими открытыми вкладками: Люди часто открывают несколько вкладок браузера одновременно. Вместо того, чтобы нажимать на каждую вкладку, чтобы найти страницу вашей компании, они могут узнать ее по значку.

Это лишь некоторые из причин, по которым стоит использовать значок веб-сайта. Добавив значок на свой веб-сайт, вы получите эти преимущества и расширите свой бизнес в Интернете.

Как создать фавикон

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

1. Используйте пространство с умом

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

Многие компании будут использовать свой логотип в качестве значка веб-сайта.

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

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

2. Будьте проще

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

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

Лучший маршрут — это простота.

Создайте что-нибудь чистое, связанное с брендом и узнаваемое.

3. Отражайте свой бренд

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

Walbert Animal Hospital — яркий пример фавикона, отражающего его бизнес.

Как видите, Walbert Animal Hospital использует отпечатки лап в качестве своего значка. Это отличная ассоциация с их бизнесом и отражение их бренда. Это просто и помогает людям их узнавать.

Вы хотите использовать правильные символы в своем значке. В этом примере люди ассоциируют отпечатки лап с животными.Когда пользователь видит эти отпечатки лап, он предполагает, что бизнес каким-то образом работает с животными.

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

4. Проконсультируйтесь с дизайнером

Если вы не знаете, что делать со своим значком, вы всегда можете проконсультироваться с веб-дизайнером. Веб-дизайнер — отличный вариант, потому что он предоставляет вам уникальный значок.Вы получите значок, правильно масштабированный для Интернета.

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

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

Начните создавать фавикон вашего веб-сайта сегодня

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

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

Хотите узнать больше о том, как создать высококачественный значок?

Свяжитесь с нами онлайн или позвоните нам сегодня по телефону 888-601-5359 , чтобы поговорить со стратегом.

Учебники — favicon.io

Что такое значок?

Фавикон — это небольшой значок или набор значков, связанных с веб-сайт, веб-страницу или веб-приложение. Он отображается внутри вкладки браузера и панель закладок. Примеры ниже показывают значки для Google, Reddit и Squarespace в браузере таб.

Ниже приведены некоторые значки с нескольких популярных веб-сайтов. отображается на панели закладок Chrome.

Для чего используется значок?

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

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

Какие альтернативные названия для фавикона?

Некоторые альтернативные названия для значка: значок браузера, избранное. значок, значок ярлыка, значок вкладки, значок URL-адреса и значок закладки. В слово favicon — это сокращение от «любимый значок» и происходит от Функция «Избранное» в Internet Explorer, наиболее современная браузеры называют «закладками».

Какие бывают распространенные форматы файлов значков?

ICO — фавикон.ico

Наиболее распространенными форматами значков являются ICO, PNG и SVG, но есть являются дополнительными форматами для определенных браузеров или устройств. ICO формат файла был разработан Microsoft и является исходным файлом формат значка. Формат уникален тем, что позволяет для нескольких небольших изображений в одном файле. Это выгодно, потому что маленькие значки, необходимые для значка в Формат ICO (16×16, 32×32 и 48×48 пикселей) можно масштабировать и оптимизирован независимо.При малых размерах вы не можете положиться браузер, чтобы автоматически изменять размер значка оптимальным образом. Формат ICO поддерживается всеми браузерами, и это единственный формат, поддерживаемый IE5 — IE10.

PNG — favicon.png

Формат PNG — хороший формат, потому что это формат, в котором больше всего люди привыкли и не нуждаются в специальных инструментах, чтобы Создайте. Современные экраны имеют высокое разрешение. проблема с маленькими размерами иконок для маленьких разрешений больше не существуют.Для браузеров, поддерживающих формат значков PNG часто качество значка, отображаемого в вкладка браузера или панель закладок будут выше, чем в формате ICO. Недостаток формата PNG в том, что он несовместим с IE5 по IE10.

SVG — favicon.svg

Формат SVG имеет преимущества перед форматами PNG и ICO, но у него пока нет отличной поддержки браузеров.Файлы SVG очень легкие и бесконечно масштабируемые. Это означает, что качество изображения превосходное без ущерба для времени загрузки в пользу тяжелых изображений. Только Chrome, Firefox и Opera поддерживают формат SVG. значки.

Какие бывают распространенные размеры значков?

Обратите внимание, что ваш значок должен быть квадратным.

Для формата ICO рекомендуемые размеры: 16×16, 32×32 и 48×48. пикселей.

Для формата PNG рекомендуемые размеры — 16×16 и 32×32, но браузеры принимают любое квадратное изображение PNG.

Влияют ли фавиконы на поисковую оптимизацию или SEO?

Наличие значка может косвенно повлиять на SEO. Некоторый поиск системы, такие как DuckDuckGo, отображают значок в поиске полученные результаты. Привлекающий внимание значок может увеличить количество кликов. рейтинги (CTR) в этих поисковых системах.Кроме того, значок — это необходимо для повышения узнаваемости бренда и доверия к нему. Пропавший без вести favicon может привести к потере доверия пользователей к сайту и увеличению показатели отказов.

Что такое изображение значка и как добавить его на свой веб-сайт

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

Что такое значок значка

Значок — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для представления веб-сайта или веб-страницы. Сокращенно от «избранного значка», значки чаще всего отображаются на вкладках в верхней части веб-браузера, но они также находятся на панели закладок вашего браузера, в истории и т. Д. В некоторых случаях, например в Google Chrome, они даже появляются на главной странице вашего браузера. Другими словами, значок служит значком вашего веб-сайта или визуальным знаком, с помощью которого можно идентифицировать ваш веб-сайт в Интернете.

Почему значки значков имеют значение

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

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

Брендинг: Для создания действительно сплоченного бренда важно не упускать из виду даже мельчайшие детали. Фавиконы способствуют бренду и видимости вашего веб-сайта, расширяя ваш стиль и язык за пределами веб-сайта и в веб-браузере.

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

Как создать фавикон

Для создания фавикона вы можете рассмотреть вопрос о найме профессионального дизайнера (если вы уже работаете с ним, вы можете включить фавикон в свое соглашение).Вы также можете создать значок самостоятельно, используя любую дизайнерскую программу по вашему выбору или несколько онлайн-инструментов. Одним из таких рекомендуемых инструментов является Wix Logo Maker, который позволяет вам создавать профессиональные и персонализированные значки, которые наилучшим образом отражают ваш стиль и потребности.

Размер: Оптимальный размер для создания значка — 16×16 пикселей, т.е. размер, в котором они обычно отображаются. Однако иногда они могут отображаться и в более крупных размерах (например, 32×32 пикселя). Если вам нужна помощь в подборе нужного размера для вашего изображения, попробуйте использовать инструмент Wix Image Resizer.

Файл: Предпочтительный формат файла для значка — JPEG или PNG.

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

Советы по созданию значка

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

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

Веб-сайт Wix художника и иллюстратора Адама Курца — отличный пример простого дизайна значка с его отчетливой желтой звездой. Другой пример — значок дизайнера ювелирных изделий и пользователя Wix Иларии Бонард i , состоящий из трех простых точек.

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

Для веб-сайта модного бренда Sorry’s Wix значок X является продолжением того же смелого черно-белого визуального языка, что и их одежда и логотип. Точно так же в значке eBay цвета бренда сочетаются с маленьким значком сумки для покупок, что идеально передает дух сайта.

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

Веб-сайт Wix некоммерческой организации Arte использует букву A из своего логотипа в качестве значка с добавленным неоново-зеленым фоном для привлечения внимания. Кроме того, на фавиконе, украшающем бруклинский веб-сайт Red Fern’s Wix, вообще нет текста. Вместо этого он использует только значок в виде листа, что обеспечивает максимальную читаемость.

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

Обратите внимание на то, что значок Google немного отличается от его логотипа, но при этом отражает те же ценности дизайна. На значке отображается только знакомая буква G, при этом все четыре фирменных цвета плавно объединены в одну букву. Другой подход был использован иллюстратором и пользователем Wix Шарлоттой Ме и , которая использует инициалы своего нарисованного от руки логотипа в качестве своего значка.

Цвет: Имейте в виду, что значок будет отображаться на фоне разного цвета, в зависимости от контекста и используемого браузера. Поэтому не забудьте протестировать свой значок на сером, белом и черном фоне, прежде чем завершать дизайн.

Как добавить значок на свой сайт Wix

Сайты Wix автоматически включают стандартный значок по умолчанию, но вы можете настроить его, перейдя на премиум-план и подключив свой сайт к домену.

Вы можете легко изменить свой значок на своем сайте Wix:

  1. На панели управления вашего сайта перейдите в Настройки.

  2. Нажмите «Управление» рядом с «Favicon».

  3. Нажмите «Загрузить изображение» и выберите существующее изображение или нажмите «Загрузить медиа», чтобы загрузить изображение со своего компьютера.

  4. Щелкните «Добавить на страницу». Теперь вы увидите предварительный просмотр того, как будет выглядеть ваш значок на вкладке браузера.

  5. Нажмите «Сохранить» и тада! Теперь у вашего веб-сайта есть значок. Он появится на вкладке вашего сайта, как только вы нажмете кнопку «Опубликовать».

Иден Спивак

Эксперт и писатель по дизайну

Что такое Favicon? | Bluehost Resource Center

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

Значок favicon , сокращенно от избранного значка, представляет собой крошечное изображение, которое идентифицирует и отличает конкретный веб-сайт или веб-страницу от других.

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

Продолжайте читать, чтобы узнать:

  • Что такое фавикон
  • Где найти фавикон в браузере
  • Почему фавикон необходим при создании веб-сайта

Почему фавиконы важны?

Добавление значка на ваш сайт — одна из лучших стратегий продвижения вашего сайта.Есть и другие причины, по которым изучение того, что такое значок и как его использовать, может принести пользу вашему веб-сайту. Значок:

Повышает узнаваемость и узнаваемость бренда

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

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

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

улучшает взаимодействие с пользователем

Основная цель значка — помочь пользователям быстро идентифицировать страницу, когда в одном окне браузера открыто несколько вкладок.

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

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

Придает веб-сайтам профессиональный вид

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

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

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

Для чего используются значки Favicons?

Favicons используются в нескольких важных областях, включая адресную строку браузера, историю и закладки.

Вкладки браузера

Фавиконы отображаются рядом с названием веб-сайта в интерфейсе браузера с вкладками.

Если у вас открыто несколько вкладок в одном браузере, значок поможет вам узнать, какие веб-сайты и какие. Он также показывает вам, куда вы хотите перемещаться.

История браузера

Значки значков в истории просмотров упрощают идентификацию веб-сайтов, которые вы ранее посещали. Если у вас длинный список просмотра, легко узнаваемый значок важен, чтобы помочь вам найти то, что вам нужно.

Раскрывающееся меню закладок

Фавиконы также появляются в списке закладок браузера.Закладки — это сохраненные вами ярлыки для ваших любимых, наиболее часто посещаемых страниц.

Панель закладок

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

Какой тип изображения представляет собой значок «Фавикон»?

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

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

Например, значки Facebook и Twitter выглядят так же, как их логотипы. Разноцветный конверт для Gmail и буква «W» для WordPress — другие примеры того, что такое значок.

Рекомендуемый формат значка значка — ICO . Формат ICO — это специальный многослойный файл изображения.Каждый слой содержит изображение разного размера для использования в разных контекстах, что удобно, когда вы создаете веб-сайт с иконкой.

Какого размера должен быть значок Favicon?

Стандартные размеры значков:

  • 16 × 16 пикселей для веб-браузеров
  • 32 × 32 пикселя для значков ярлыков на панели задач
  • 96 × 96 пикселей для значков ярлыков на рабочем столе

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

Нужен ли мне значок для моего веб-сайта?

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

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

Последние мысли: что такое фавикон?

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

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

Не поможет узнать, что такое значок, если вы не создадите его для своего веб-сайта. Использование значка значительно улучшит маркетинг вашего бренда и увеличит вовлеченность пользователей.
Если вам нужен профессиональный совет и помощь в разработке маркетинговой стратегии, Bluehost к вашим услугам. Наша команда экспертов окажет вам необходимую поддержку для вашего сайта WordPress. Подпишитесь на Blue Sky сегодня.

В чем смысл Favicons?

Когда я начинаю рассказывать людям о важности значка для их общей стратегии онлайн-брендинга, они обычно говорят одно и то же: «Не слишком ли далеко вы заходите в этом бренде?»

Обычно я отвечаю: «Нет, если вы серьезно относитесь к собственным усилиям по продвижению бренда!»

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

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

Я делюсь большим списком с ресурсами, связанными с иконками ниже, так что подумайте о том, чтобы добавить эту страницу в закладки для дальнейшего использования. Да, и если вы это сделаете, обратите внимание на значок WDD прямо в списке закладок;)

На тот случай, если вы не дизайнер или не обладатель черного пояса в favicon-art, эта статья охватывает, вероятно, все, что вам когда-либо понадобится знать об этих неуловимых маленьких квадратах 16 × 16 пикселей, и даже некоторые интересные любопытства, такие как хорошо.Так что наслаждайтесь!

Что такое значок?

Фавиконы — это небольшие квадратные изображения, обычно размером 16 × 16 пикселей, которые используются веб-браузерами для отображения графического представления посещаемого сайта в левой части адресной строки браузера. Вы, наверное, видели много значков раньше, даже если не знаете, что это такое. Если есть сомнения, вам поможет изображение ниже.

Два примера значков в браузере с вкладками Google Chrome.

Если вы хотите разобраться в истории Интернета, вот интересный факт:

Слово «favicon» — это переносное изображение, состоящее из слов «избранное» и «значок», и оно было названо так, потому что оно впервые поддерживалось Microsoft Internet Explorer 5, и на тот случай, если вы не используете IE, этот браузер закладки функция называется избранным.

Для чего нужен значок?

Еще на заре Интернета такие инструменты, как Google Analytics, были просто мечтами в умах некоторых интернет-ботаников, поэтому, как бы странно это ни звучало, в то время значки значков использовались как способ оценки посещаемости веб-сайтов. путем подсчета количества посетителей, которые добавили страницу в закладки. (Это еще один интересный фрагмент в истории Интернета!)

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

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

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

Как создать фавикон?

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

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

Вот список генератора значков, который вы ищете:

Указанные выше веб-сайты сильно различаются в зависимости от того, какой файл вы получите; особенно с точки зрения размера и расширения файла. Если вы хотите получить максимально совместимый файл, я настоятельно рекомендую загрузить изображение размером 16 × 16 пикселей в формате «ico».

Если вам нужно вдохновение, попробуйте просмотреть галереи значков ниже:

Как использовать ваш значок?

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

Шаг 1

Вам необходимо загрузить файл «favicon.ico» на свой сервер. Для этого укажите в адресной строке браузера свой FTP-сервер; ваш URL должен выглядеть примерно так:

Нажмите Enter, и браузер предложит вам ввести имя пользователя и пароль перед предоставлением доступа к файловому серверу. Как только вы войдете, просто загрузите файл «favicon.ico» в корневую папку, и все готово.

Шаг 2

Теперь вам нужно отредактировать HTML-страницу своего веб-сайта, чтобы браузеры могли найти ваше изображение значка. Не закрывайте окно FTP, найдите и загрузите файл index.html или header.php со своего сервера и выполните следующие действия в зависимости от полученного файла:

Если ваш веб-сайт состоит из простого HTML, вставьте приведенный ниже код в область HEAD файла index.html и не забудьте изменить yoursite.com на адрес своего собственного веб-сайта.

    

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD вашего файла header.php.

    

После этого загрузите файл туда, откуда вы его взяли. Готово!

На самом деле, большинство современных браузеров достаточно умны, чтобы найти ваш файл значка даже без какого-либо фрагмента кода, но только до тех пор, пока изображение значка имеет размер 16 × 16 пикселей, оно называется «значок.ico »и сохраняется в корневой папке папки вашего веб-сайта.

Как создать фавикон в Photoshop

Имея так много инструментов, которые помогут вам создать свой значок, зачем вам идти по трудному пути и создавать его в Photoshop? Что ж, если вы дизайнер и хотите получить максимальную отдачу от своего значка, это, безусловно, профессиональный способ сделать это. Хитрость в том, что Photoshop изначально не поддерживает файлы «ico», поэтому вам необходимо загрузить этот плагин из Telegraphics.

Обязательно установите его, прежде чем следовать приведенному ниже руководству. Фотошоп без него работать не будет.

Найдите параметр «ICO» в поле «Сохранить как» в Photoshop, чтобы убедиться, что плагин установлен.

Создайте новый документ в Photoshop, выбрав пункт меню «Файл» и следующую опцию «Новый», затем установите размер холста 64 × 64 пикселя. Почему? Поскольку конечный размер значка 16 × 16 настолько мал, наличие холста побольше для работы поможет вам добиться успеха в творчестве.Затем вставьте свой логотип в документ и высвободите свою волшебную творческую силу единорога.

Когда вы закончите, просто выберите меню «Изображение» и следующий параметр «Размер изображения» и уменьшите изображение до 16 × 16 пикселей. Не забудьте нажать «Resample Image» и выбрать «Bicubic Sharper», чтобы изображение не размывалось при изменении размера. Если вам не нравится конечный результат, просто отмените последние изменения с помощью «AltCtrl / AltCmd + Z» и продолжайте работать над дизайном, пока не будете довольны результатом.

Для того, чтобы закончить свой значок, все, что вам нужно сделать, это нажать на меню «Файл» и следующую опцию «Сохранить как», где вы не забудьте назвать свой файл «favicon.ico». Еще раз, работа сделана!

Заключение

Favicons — одна из тех мелочей, на которые мы обычно не обращаем слишком много внимания, но правда в том, что они далеко не незначительны, они являются очень важной частью Интернета, как с точки зрения пользовательского интерфейса, так и с точки зрения брендинга. -of-view.

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

Добавить комментарий

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