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

Favicon и заголовок окна

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

Иконка

1. Сайт должен иметь иконку, хоть чёрный квадрат, хоть кружок. Это необходимо для того чтобы пользователь мог отличить сайт в бесконечном ряду вкладок, в истории или в избранном.
2. Иконка не обязана повторять логотип сайта, всё-таки 16×16. Тут важно сохранить «читаемость», чтобы иконка не превратилась в цветное пятно. Её задача состоит в визуальной идентифицикации сайта. Иконка может напоминать логотип или содержать фирменные цвета.
3. Использование различных иконок для различного контента снижает различаемость, поэтому использовать разные иконки имеет смысл лишь в случае крайней необходимости.
4. Иконку можно использовать как индикатор входящих сообщений или каких-либо изменений, с учётом сохранения различаемости. Например:

   При проигрывании медиаконтента желательно отображать иконку со значком проигрывания, чтобы пользователь знал «в каком ухе у него жужжит»! Но следует помнить, что при добавлении в избранное сохранится та иконка которая отображалась в момент добавления, поэтому следует использовать её там где происходит быстрое потребление информации (twitter, вконтакте, youtube и т.п.), на сайтах предназначеных для долгого сплошного чтения такая индикация может только отвлекать.

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

Заголовок окна

1. Заголовок окна должен содержать текст близкий по содержанию к заголовку первого уровня (он должен быть один на странице). Т.е. он должен сообщать пользователю содержимое страницы.
2. Заголовок должен быть кратким, не более 5 слов.
3. Если в заголовоке отражается иерархия, то порядок должен быть от меньшего к большему, например:
   «Favicon — Типографика — Хабрахабр»
   Но не на оборот! Здесь важно помнить, что иконка идентифицирует ресурс, а заголовок — контент.
4. Знаки препинания подчиняются правилам для обычных заголовков: точку опускаем, вопросительный и восклицательный знаки оставляем.

Резюме

Как видите правила очень просты и подчинены логике. А некоторые используются для поисковой оптимизации, так что вдвойне полезны. 🙂

Тонкости

Следует отметить, что Firefox, Safari и Opera (в IE не проверял) поразному понимают и интерпретируют слеш идущий перед адресом иконки, поэтому его (слеш) лучше опускать. Так же следует отметить, что Firefox кеширует иконки надолго, поэтому при смене иконки имеет смысл указать версию в имени файла.

В помощь

• Favicon Generator
• Favicon.cc позволяет создавать иконки прямо в окне браузера, генерирует иконку налету и отображает её в браузере и в специальном окошке. Рекомендую.
• Favicon.com.mx
• 20 лучших генероторов иконок

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

Фавикон — небольшая графическая иконка, обычно в формате .ico или .png, которая видна на вкладках браузера перед названием веб-страницы. Термин произошел от английской фразы favorite icon — «избранный значок». Обычно на фавиконе изображен логотип бренда, первая буква его имени или картинка, связанная с тематикой веб-ресурса. Фавикон можно видеть в сниппетах поисковой выдачи Яндекса и Гугла, в закладках и во вкладках браузера. Нужен ли этот значок сайту, как он влияет на поведенческие метрики посетителей, помогает ли в продвижении? На все вопросы постараемся ответить в этой статье.

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

Название 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. Ручной вариант предполагает размещение иконки в корневой папке сайта. В код между тегами на главной прописывается следующее значение:

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

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

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

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

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

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

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

Резюме

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

Фавикон сайта

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

Главная eSputnik / Marketer Dictionary / Показатели эффективности / Фавикон сайта

• Для малого бизнеса
• Email-рассылки
• SMS-рассылки
• Viber-рассылки
• Web Push-уведомления
• Мобильные Push-уведомления
• Маркетинговое агентство
• App inbox
• Виджеты для сайта

• Для крупного бизнеса
• Автоматизация email-маркетинга
• Продвинутая сегментация
• Мультиязычные рассылки
• Рекомендации на сайте
• Мобильный маркетинг

• База знаний
• Блог
• Кейсы
• Примеры email-рассылок
• Руководство пользователя
• Документация по API

• О компании
• О нас
• Отзывы
• Условия использования сервиса
• Политика конфиденциальности
• Соглашение об обработке данных
• Соответствие GDPR
• Контакты

eSputnik Omnichannel CDP
2023 © All rights reserved.

Как называется иконка сайта, отображаемая во вкладках браузера

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

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

Образовано слово от английский «favorite icon» — знак избранного. Ранее использовался только для интернет ресурсов, добавленных в закладки.

Зачем нужна маленькая иконка сайта

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

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

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

Стандартный размер фавикона – 16×16 пикселей. Такой размер оптимально умещается на открытых вкладках, не мешает при просмотре информации в выдаче.

Формы фавикона могут быть самые разные – начиная со стандартных, квадратных. Заканчивая – «вырезанными» фигурами. Всего лишь достаточно создать файл, и первостепенно сохранить его в формате PNG – как называется картинка без фона.

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

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

Почему компании не вставляют логотип в фавикон

Как уже было написано ранее, для правильного отображения иконки необходимо подогнать изображение под определенный размер — 16×16 px. Зачастую, логотип не соответствует подобным размерам – при уменьшении не будет понятен смысл. Более того, чаще всего фирменные логотипы имеют прямоугольную форму, что не совсем удобно при формировании фавикона.

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

Некоторые сайты не заморачиваются с отображением так называемой иконки, и в качестве мини-логотипа ставят первую букву названия сайта, каким-либо образом «обрамляя ее».

Одна из самых запоминающихся букв – это большая W — превью Википедии.