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

22/05/2013  верстка, веб-разработка, image, html

Favicon

По умолчанию, в качестве значка (иконки) любого сайта отображается значок браузера или CMS (системы управления сайтом). Чтобы выделить свой сайт в списке поисковой выдачи или в списке закладок пользователя, каждый веб-мастер обязательно создаст для него фирменный значок (иконку сайта) — favicon (сокр. от англ. FAVorites ICON). Это может быть логотип компании в миниатюре или произвольная картинка.

Традиционно значок сайта именуют favicon.

Значок сайта (favicon) может быть выполнен форматах ico, png, gif или jpg.

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


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
// или //
<link rel="icon" type="image/png" href="/favicon.png">

Онлайн-генераторы фавиконок

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

Рекомендации Яндекса по фавиконкам

  1. Важен правильный формат фавиконки. Если фавиконка имеет расширение ico, то и в type необходимо указывать принадлежность к ico, например, type="image/x-icon".
  2. Само изображение должно быть размером 16 х 16, 32 × 32 или 120 × 120 пикселей и однослойным.
  3. Как и со страницами на сайте, индексирование начинается с обнаружения ссылки - ссылки на фавиконку:
    • прописывайте адрес фавиконки в коде главной страницы;
    • по возможности располагайте фавиконку в корне сайта;
    • старайтесь использовать статический адрес фавиконки;
    • кириллический адрес необходимо написать, используя Punycode;
    • если сайт доступен по нескольким адресам (например, с www и без www, по протоколам http или https), то проследите, что везде размещена одинаковая фавиконка.
  4. Фавиконку скачивает специальный робот. Проследите, что:
    • в случае наличия нескольких адресов файла фавиконки в коде страницы первым расположен адрес для поискового робота;
    • адрес фавиконки разрешён для скачивания в файле robots.txt;
    • фавиконка отдаёт код ответа сервера HTTP 200.

Рекомендации Google

  1. Значок сайта должен быть доступен и открыт для сканирования Гуглботом;
  2. Не следует часто менять адрес, по которому находится фавикон;
  3. Значок для ресурса должен быть кратным 48-ми пикселям (48х48, 96х96 и т.д.);
  4. Favicon должен быть графическим продолжением вашего бренда, что позволит пользователю быстро найти ресурс в мобильной выдаче;
  5. Характер фавикона должен быть нейтральным – дискриминационные и непристойные значки в выдаче не появятся. Google заменит их на собственные по умолчанию.
Михаил Апсолямов
Михаил Апсолямов Создаю сайты. Оказываю услуги seo-продвижения. Провожу аудиты сайтов. Пишу статьи на заказ. Услуги и цены.

 

наверх