Как называется значок сайта: что это такое и как его сделать

Фавиконка — Вебмастер. Справка

Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.

Пример фавиконки:

Пример отображения фавиконки в результатах поиска:

1. Рекомендации по формату и размеру фавиконки
2. Как фавиконка может отображаться на сервисах Яндекса
3. Как изменить или удалить фавиконку

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

Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.

Совет. Размер 120 × 120 пикселей или формат SVG позволяют отображать логотип сайта четче и заметнее на сервисах Яндекса.

Как установить фавиконку

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

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

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

Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:

Фавиконка не появляется для моего сайтаУ сайта пропала фавиконкаВ поиске отображается некорректная или старая фавиконкаТеоретический вопрос про индексирование фавиконок

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

Прошло больше двух недель, фавиконка не появилась

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

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

Прошло больше двух недель, фавиконка не появилась

Такая ситуация возникает, если:

• У сайта по разным адресам расположены разные фавиконки. Если сайт доступен по адресам с префиксом www и без него, по протоколам HTTPS и HTTP, проверьте, что фавиконка везде одинаковая или именно та, которая должна индексироваться для каждого из сайтов.

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

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

Рекомендации не помогли, прошло больше двух недель

форматы, поддержка, автоматизация / Хабр

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

В каком формате должен быть фавикон?

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

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

<link rel="icon">
<link rel="icon" any">

Пора ли отправлять ICO на свалку?

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

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="images\tileimage. jpg">

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

<meta name="msapplication-square70x70logo" content="images/smalltile.png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">

Можно указать цвет фона плитки:

<meta name="msapplication-TileColor" content="#009900">

Можно указать имя закрепленного сайта:

<meta name="application-name" content="Rick and Morty">

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:

<meta name="msapplication-tooltip" content="Title">

Можно даже определить адрес документа:

<meta name="msapplication-starturl" content=". /">

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

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

<meta name="msapplication-config" content="browserconfig.xml">

browserconfig.xml

<?xml version=”1.0" encoding=”utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/img/favicons/mstile-70x70.png"/>
      <square150x150logo src="/img/favicons/mstile-150x150. png"/>
      <square310x310logo src="/img/favicons/mstile-310x310.png"/>
      <wide310x150logo src="/img/favicons/mstile-310x150.png"/>
      <TileColor>#000000</TileColor>
    </tile>
    <notification>
       <polling-uri src="notifications/contoso1.xml"/>
       <polling-uri2 src="notifications/contoso2.xml"/>
       <polling-uri3 src="notifications/contoso3.xml"/>
       <frequency>30</frequency>
       <cycle>1</cycle>
   </notification>
  </msapplication>
</browserconfig>

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

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

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

<tile>
  <visual lang="en-US" version="2">
    <binding template="TileWide310x150ImageAndText01"
      <image src="images/image1.png" alt="alt text"/>
      <text>Text Field 1</text>
    </binding>
  </visual>
</tile>

То, что написано в кавычках в атрибуте template  —  название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее.

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

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

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

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом

color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

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

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

iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

<link rel="apple-touch-icon" href="apple-touch-icon-57x57. png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon. png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

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

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

<meta name = "apple-mobile-web-app-title" content = "AppTitle">

Кстати, можно даже установить стиль строки состояния для веб-приложения:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

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

{
  "name": "Rick and Morty",
  "short_name": "Rick",
  "icons": [
  {
    "src": "/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
 }
],
  "theme_color": "#b3adad",
  "background_color": "#b3adad",
  "display": "standalone"
}

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE">

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

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

Вызов в <head>:

<link rel="manifest" href="manifest.json">

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

Автоматизация

В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

Что такое фавикон, зачем он нужен вашему веб-сайту и как его создать

12 минут чтения

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

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

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

Из Internet Explorer в поисковую выдачу Google

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

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

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

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

4. С мая 2019 года Google использует фавиконы в мобильной поисковой выдаче.

5. В октябре 2022 года Google выпустил «имена сайтов» для мобильной поисковой выдачи. Благодаря новому дизайну Google может отображать названия веб-сайтов более заметно.

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

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

Технические требования для создания фавиконки

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

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

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

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

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

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

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

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

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

Классический размер фавикона 16х16 пикселей, что соответствует 32х32 пикселя на экранах с высоким разрешением. В то время как Google использует 16x16px в своей мобильной поисковой выдаче, в его правилах говорится, что фавиконы такого размера не предоставляются. Вместо этого Google рекомендует создавать фавиконы с более высоким разрешением, кратным квадрату 48 пикселей. Итак, размер вашего фавикона должен быть 48x48px, 96x96px, 144x144px и так далее. Между тем, файлы SVG не обязательно должны иметь определенный размер.

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

(1 размер)

(2 размера)

Дополнительные рекомендации для фавиконки

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

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

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

UPD : Учитывая все эти изменения, Google рекомендует перепроверить соответствующую документацию по фавиконкам, чтобы обновить их в соответствии с последними рекомендациями. Кроме того, поисковый гигант также рекомендует использовать значки размером не менее 48 пикселей и обязательно следовать рекомендациям по фавиконам.

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

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

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

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

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

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

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

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

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

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

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

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

   
    ... 
     
     
    ... 
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Брендинг

SEO на странице

UX

16846 просмотров

Что, зачем и как создавать фавикон для вашего сайта

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

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

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

Содержание

• Что такое фавикон?
• Где можно увидеть фавиконку?
• Почему фавиконки важны?
• Какого размера фавикон?
• Как фавиконки влияют на SEO?
• Как создать фавиконку
• Как создать фавиконку
• Как добавить значок избранного в HTML

Приступим

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

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

У Google один из самых узнаваемых фавиконов. Вы можете увидеть разноцветную букву G в адресной строке моего браузера ниже.

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

Где можно увидеть фавиконку?

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

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

Фавиконы также расположены на:

• Панель поиска.
• История поиска.
• приложений панели инструментов.
• Закладки.
• Рекомендации для вашей строки поиска.
• Выпадающее меню ваших закладок.

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

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

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

Обратите внимание в поисковой выдаче для мобильных устройств, что веб-сайты Joy Us Garden и Easy to Grow Bulbs имеют значки цветов, а сайт The Succulent Source имеет серый шар. Это не имеет особого смысла для сайта о суккулентах, не так ли? Это потому, что глобус — это значок значка по умолчанию, который Google Chrome устанавливает для веб-сайтов, у которых нет собственного значка.

Если я быстро просмотрю страницу с результатами, я, вероятно, решу изучить Joy Us Garden и Легко выращиваемые луковицы вместо The Succulent Source по нескольким причинам.

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

Теперь представьте эти три веб-сайта во вкладках браузера на рабочем столе. Было бы намного проще запомнить пользовательские значки Joy Us Garden и Легко выращиваемые луковицы , чем значок по умолчанию Источник суккулентов . В море открытых вкладок я с большей вероятностью вернусь на вкладки с пользовательскими значками и проведу больше времени на этих сайтах.

Наконец, допустим, я нажимаю на каждый из этих сайтов. При посещении Joy Us Garden и Easy to Grow Bulbs я сразу заметил, что пользовательские фавиконы основаны на логотипах веб-сайта. Красочный логотип последнего показан ниже. Вы узнаете тюльпан как их значок.

Это помогает укрепить узнаваемость бренда и сделать их сайт более запоминающимся.

С другой стороны, при посещении The Succulent Source я впервые увижу их логотип. Они могли бы улучшить согласованность своего бренда, сопоставив свой логотип и фавикон.

 

Какого размера фавикон?

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

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

• 16×16 : Размер значков браузера.
• 32×32 : Размер значков быстрого доступа на панели задач.
• 96×96 : Размер значков ярлыков на рабочем столе.
• 180×180 : Размер значков Apple Touch.
• 300×300 : Размер, требуемый Squarespace.
• 512×512 :Размер, требуемый WordPress.

Как фавиконки влияют на SEO?

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

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

Авторитет бренда и имидж

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

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

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

Взаимодействие с пользователем

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

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

Теперь, когда мы понимаем, что такое фавикон, его назначение и разные размеры, давайте посмотрим, как его создать.

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

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

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

Когда у вас есть логотип, пора сделать фавикон.

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

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

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

Ознакомьтесь с этим блогом о тенденциях 2022 года для логотипов брендов.

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

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

Вот почему вы хотите взять самую узнаваемую часть своего логотипа и сделать ее фавиконкой. Easy to Grow Bulbs сделали именно это, взяв тюльпан со своего логотипа и сделав его фавиконкой.

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

Если вас устраивает изображение и размеры фавикона, вы можете сохранить файл в формате PNG или JPG и загрузить его в генератор значков.

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

 

Генераторы фавиконок

Ниже приведены некоторые из лучших генераторов фавиконок в Интернете. С помощью этих инструментов вы просто загружаете свою фавиконку. Затем программное обеспечение преобразует изображение в соответствующие форматы favicon и делает его доступным для загрузки. Этот процесс займет всего несколько минут.

Стандартные форматы фавиконов — ICO и PNG.

• ICO совместим со всеми браузерами, включая Internet Explorer.
• PNG — еще один распространенный формат. Единственным недостатком является то, что Internet Explorer не поддерживает файл PNG.

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

Favikon

Создать фавикон в Favikon очень просто. Вы просто загружаете изображение, обрезаете его, а затем загружаете получившийся значок в формате ICO или PNG. Ниже я загрузил иконку ламы из Проект «Существительное» .

Минус в том, что Favikon поддерживает только один размер: 16×16 пикселей. Чтобы узнать больше о размерах, воспользуйтесь инструментами ниже.

Favicon.io

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

Вы можете скачать результат в форматах ICO и PNG и в разных размерах. Варианты перечислены ниже:

• android-chrome-192×192.png
• android-chrome-512×512.png
• apple-touch-icon.png
• favicon-16×16.png
• favicon-32×32.png
• Favicon.ico

Favicon.ico и генератор значков приложений

С помощью этого бесплатного инструмента вы можете загрузить изображение в формате PNG или JPG и преобразовать его в форматы ICO и PNG в еще большем количестве размеров.

Варианты загрузки перечислены ниже:

• apple-icon-57×57.png
• apple-icon-60×60.png
• apple-icon-72×72.pnf
• apple-icon-76×76.png
• apple-icon-114×114.png
• apple-icon-120×120. png
• apple-icon-144×144.png
• apple-icon-152×152.png
• apple-icon-180×180.png
• android-icon-192×192.png
• favicon-32×32.png
• favicon-96×96.png
• favicon-16×16.png

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

Прежде чем мы рассмотрим этот процесс ниже, важно отметить, что это относится к владельцам сайтов, которые создали свой сайт с нуля или с помощью среды разработки, такой как Bootstrap CSS. Если вы использовали конструктор веб-сайтов или CMS, например, WordPress или альтернативы WordPress, то процесс будет немного отличаться.

Как добавить фавиконку в HTML

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

Допустим, вы сохранили файл PNG как «favicon.ico». Затем вы должны добавить следующий фрагмент кода между тегами:

.
 
  
 

Обратите внимание, : ваш значок не обязательно должен быть помещен в корневую директорию вашего сайта — обычно это так. Если вы сохранили его в другом месте, просто убедитесь, что атрибут href указан правильно. Поэтому, если вы сохранили его в подпапке с именем «images», вам нужно ввести .

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

Если вы создали версию 16×16, 32×32, 48×48 и 180×180, например, вы должны добавить следующий фрагмент кода: