Web

Идеальный фавикон Зачем каждому сайту нужен фавикон и как его правильно сделать

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

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

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

Пример нескольких значков

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

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

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

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

Пример сайта без фавикона

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

Пример значков в истории браузера Google

3. Страницы, отмеченные закладками, также будут отмечены значком на панели закладок…

Пример значков с закладками

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

Фавиконы в других закладках

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

Пример значков в результатах поиска

Фавиконы привлекают внимание пользователей и повышают узнаваемость бренда. Если пользователи посетят веб-сайт с запоминающимся значком пару раз, они легко смогут отличить его от других в будущем. Подумайте об известном бренде, с которым вы взаимодействуете ежедневно — например, 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, другие вполне могут наверстать упущенное в ближайшее время. 

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

Снимок экрана: Могу ли я использовать PNG

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

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

Размеры значков рабочего стола, Android, iPhone

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

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

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

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

<link rel = "icon" sizes = "<16> X <16>">

<link rel = "icon" sizes = "<16> X <16>, <32> X <32>">

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

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

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

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

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

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

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

Скриншот Favicon CC

3) Используйте существующее изображение, например, вашего логотипа, и загрузите его в онлайн-генератор значков , такой как Favicon.io , Realfavicongenerator.net и т. Д.

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

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

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

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

<head>

  ...

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

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

  ...

</head>

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

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

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

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

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

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

Вы четко понимаете свой фавикон, когда он 16 × 16 пикселей? Сделайте все возможное, чтобы в вашем значке не было мелких деталей, и не пытайтесь включить в него все мыслимые цвета.

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

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

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

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

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

  • http://www.google.com/s2/favicons?domain=mysite.com

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

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

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

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

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

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

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

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

Уведомление о фавиконе в аудиторской проверке веб-сайта SE Ranking

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

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

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

Понравилось?
0 из 5 звезд. 0 голосов.

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

Ваш адрес email не будет опубликован.

Back to top button