Как называется значок веб-сайта в браузере

Обновлено: 03.07.2024

Вы можете встретить термин "фавикон", когда речь идет о создании и разработке веб-сайтов. Но что именно? Что ж, в этой статье мы ответим на ваш вопрос и покажем, как добавить фавикон на свой сайт. Начнем!

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

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

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

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

Выберите один из двух способов ниже, чтобы добавить фавикон на свой веб-сайт!

Разрешить браузерам автоматически создавать значок

Самый простой способ добавить значок на свой сайт — загрузить его в виде файла .jpg или .ico из файлового менеджера вашего хостинга. Для этого выполните следующие действия:

Подготовьте квадратное изображение в формате .jpg или .ico для логотипа вашего веб-сайта.

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

Загрузите обычное изображение и отредактируйте файл header.php вашей темы

В качестве альтернативы, если у вас есть изображение, отличное от формата .jpg или .ico (jpg, BMP, gif и т. д.), вы также можете использовать его в качестве значка своего веб-сайта. Однако вам необходимо изменить файл header.php в используемой в настоящее время папке темы. Для этого выполните следующие действия на панели hPanel.

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

Измените части /jpg и /favicon.jpg в соответствии с форматом и названием изображения, которое вы собираетесь использовать.

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

Если вы не видите новый значок значка, очистите кеш браузера и перезапустите браузер.

Заключение

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

Вы можете добавить его автоматически, загрузив изображение .jpg или .ico с именем favicon в папку public_html. Кроме того, вы можете загрузить обычное изображение (jpg, BMP, gif и т. д.) и изменить файл header.php в папке используемой темы.

Было ли это руководство полезным? Оставьте комментарий ниже!

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

Я работаю над веб-сайтом и хочу добавить небольшой значок на вкладку браузера.

Как я могу сделать это в HTML и где в коде мне нужно это разместить (например, в заголовке)? У меня есть файл логотипа .jpg, который я хочу преобразовать в значок.

раньше нажал клавишу ввода - в любом случае спасибо за ответ. Я просто собирался сказать, что первая часть (которую я вставил выше) по ссылке, которую вы дали, похоже, не работает? Однако вторая часть сработала отлично - спасибо

13 ответов 13

Фавикон можно добавить на веб-сайт двумя способами.

Просто добавьте к элементу следующий код:

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

Поэтому все, что вам нужно сделать, это сделать так, чтобы запрос /favicon.ico к вашему веб-сайту возвращал ваш значок. К сожалению, этот параметр не позволяет использовать значок PNG.

Используйте инструмент для преобразования вашего png в файл ico. Вы можете ввести «генератор фавиконов» и найти множество онлайн-инструментов.

Поместите адрес ico в шапку со ссылкой -tag:

спасибо! Я правильно выполнил шаги, и он действительно хорошо работает в IE и Firefox, но по какой-то причине он не работает в Google Chrome, нужно ли мне удалять кеш? или что мне оттуда делать?

Лучший из тех, что я нашел, это http://www.favicomatic.com/. Я говорю «лучший», потому что он дал мне самую четкую фавиконку и не требовал редактирования после их преобразования. Он будет генерировать фавиконы размером 16x16 и 32x32 и цитировать их «Каждый проклятый размер, сэр!» Кроме того, их сайт выглядит круто и им легко пользоваться.

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

Я просмотрел первые 20 или около того результатов поиска в Google, и этот оказался лучшим.

Я бы не стал помещать все это в тэг head. Я бы добавил только теги, необходимые для поддержки устройств, которые вам нужно поддерживать. Честно говоря, можно обойтись и одним

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

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

Мой файл browserconfig.xml. Полное объяснение выше.

Мой файл manifest.json. Полное объяснение выше.

Список файлов в проекте (обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатегов):

Общие накладные расходы

Если убрать комментарии, это 3 КБ дополнительного HTML, если вы не поддерживаете заставки, это 1,5 КБ. Если вы используете сжатие GZIP для своего HTML-контента, что каждый должен делать в наши дни, у вас остается около 634 байт накладных расходов на запрос для поддержки всех платформ или 446 байт без заставок. Я лично считаю, что стоит поддерживать устройства IOS, Android и Windows, но это ваш выбор, я просто даю варианты!

Боковое примечание о текущем веб-значке/экране-заставке/ситуации с настройками

Однако значки — не единственная настройка в наши дни, есть несколько других настроек, зависящих от поставщика (показаны выше), но файл favicon.svg подходит для большинства случаев использования.

Обновить

Обновлено для включения новой версии Android/Chrome версии M39+ favicon/темы. Интересно, что они использовали тот же подход, что и Microsoft, но используют файл JSON вместо XML.

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

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

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

От Internet Explorer до поисковой выдачи Google

Еще в 1999 году значок значка был представлен в Internet Explorer, чтобы помочь пользователям отличить веб-страницы, добавленные в закладки, от других. А поскольку страницы с закладками назывались (и, вероятно, до сих пор) «Избранными» в Internet Explorer, слова «избранное» и «значок» были объединены вместе, чтобы создать новый термин.

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

<р>2. Помимо адресной строки, фавиконки также можно найти в истории браузера.

<р>3. Страницы с закладками также будут иметь фавикон, как на панели закладок…

<р>4. …а также в разделе «Другие закладки».

<р>5. С мая 2019 года Google использует значки фавиконов в поисковой выдаче для мобильных устройств, а в начале 2020 года поисковая выдача на ПК также получила новый вид.

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

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

Соответствие техническим требованиям

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

Но с чего нужно начать?Начните с выбора правильного формата и размера фавиконки.

Формат фавиконки

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

Раньше Internet Explorer поддерживал только этот формат файла, но современные веб-браузеры позволяют использовать значки PNG, а некоторые браузеры даже поддерживают значки GIF, JPEG и SVG. Единственным исключением являются более ранние версии Internet Explorer, такие как 10 и ниже, — они совместимы только с файлами ICO.

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

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

Чтобы узнать, какие форматы favicon поддерживаются разными браузерами, посетите веб-сайт Can I Use. Здесь вы можете увидеть, например, какие версии браузеров совместимы с иконками PNG и SVG.

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

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

Итак, какой размер фавикона предпочтительнее? Google рекомендует использовать максимально возможное разрешение 192×192. Недавно некоторые веб-мастера получили письмо от Google, в котором им рекомендовалось использовать фавиконы с высоким разрешением, чтобы получать больше кликов. На данный момент Google просто растягивает существующие значки с низким разрешением, когда требуется больший размер — например, для домашнего экрана Android. В результате все изображения выглядят размытыми и мешают работе пользователя.

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

Используйте квадратный значок. и не содержать неприемлемых символов (например, свастики) — иначе Google не будет показывать их и вместо них будет использовать общий значок фавикона.
Файл Favicon должен быть доступен для поисковых роботов Google.

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

Обращение к Интернету за помощью в создании фавиконки

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

Можно ли этого избежать?

Конечно. На самом деле существует несколько способов создания фавиконки веб-сайта, например:

1) Создайте его в графическом редакторе типа Photoshop с помощью специального плагина Favicon.ico.

2) Оформить его в специальных онлайн-сервисах (например, Katvin или favicon.cc) и потом скачать оттуда в подходящем формате.

4) Загрузите готовые фавиконы из специальных баз данных, таких как Flaticon или Findicons, с тысячами вариантов на выбор.

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

Украшение вашего сайта фавиконкой

Сначала загрузите свой значок в корневой каталог сайта с помощью файлового менеджера, например Filezilla. Затем все, что вам нужно сделать, это вставить следующий фрагмент кода в метатег:

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

Простой дизайн фавикона не значит хуже

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

И когда вы будете это делать, задайте себе следующие вопросы:

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

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

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

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

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

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

Проверка фавикона на наличие критических ошибок

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

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

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

Находится ли графическое изображение в корневой папке ресурса в формате файла ICO, PNG или GIF?
Правильно ли написан код, ведущий к изображению на страницах ресурса?
Является ли значок сайта понятным и уникальным?
Доступен ли файл значка для поисковых роботов?

Я хочу отметить, что путь к изображению напрямую влияет на то, насколько хорошо отображается фавикон. Если вы хотите каким-либо образом удалить или отредактировать свой значок, все, что вам нужно сделать, это удалить или изменить файл favicon.ico (JPEG, GIF, PNG).

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

Почему без фавиконки не обойтись

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

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

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

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

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

Келли — бывший технический предприниматель Google и разработчик Apple. Она консультировала компании всех размеров и на всех стадиях роста. Вы можете найти ее опыт в Fit Small Business в области маркетинга, бизнес-сайтов и бизнес-тенденций.

АВТОР: Эми Никол Смит

Опубликовано 27 апреля 2021 г.

Эта статья является частью большой серии статей о веб-сайтах для малого бизнеса.

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

Где вы увидите фавиконы

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

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

Диспетчер закладок

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

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

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

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

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

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

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

Favicons и SEO

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

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

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

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

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

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

Создание собственного фавикона

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

Размер вашего фавикона

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

Читайте также: