Сделать красивый фавикон для своего веб-ресурса

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

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

Что такое Фавикон и как его создать?

Сам по себе это маленький значок, который отображается рядом с https адресной строке браузера и выглядит довольно беспомощным. Он же такой маленький. Но поисковики его любят, не зря же он переводится с английского языка «FAVoritesICON» — «значок для избранного»  

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

Обычно картинка данного значка выбирается в размере:

  • 16х16;
  • 32х32;
  • 120х120;

Это все прямо из рекомендации Яндекс Вебмастера, формат картинки могут быть:

  • GIF;
  • JPEG;
  • PNG;
  • и BMP.

Однако для правильного отображения на сниптете сайта и без проблемной загрузки, опят же Яндексом рекомендуется, чтобы фавиконка была в формате ICO. Но честно говоря, в подобном формате значка я не смог загрузить на свой последний сайт. Ранее это мне удалось, и на моем другом сайте стоит фавиконка в формате ICO.

Проблемы с загрузкой в формате ICO

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

Поэтому я взял картинку в формате JPEG, и ничего все обошлось. И ничего страшного работает он у меня и на последнем сайте с таким форматом. Просто после загрузки фавиконки также важно добавить код в файл header.php в раздел head:

<link rel=»icon» href=»https://example.com/favicon.ico» type=»image/x-icon»>

Надеюсь ясно, что здесь https://example.com/favicon.ico — это есть ссылка на файл фавикон, т. е. ссылка на значок которую создали, image/x-icon а тип файла, т.е. указывает в каком формате значок. Следовательно если у меня фавикон создан в формате JPEG то должен быть image/jpeg. Тгда код будет выглядеть таим образом:

<link rel=»icon» href=»https://example.com/favicon.ico» type=»image/jpeg»>

А здесь на рисунке видно, где я его добавил в header.php, и как раз в раздел head. Здесь просто нужно быть внимательным и обратить внимание, что он у меня в формате JPEG, я его отметил на картинке:

Добавляем код фавикона в файл header.php

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

«После завершения процедуры загрузки значка на сайт желательно проверить, работоспособность данного элемента. Файл должен открываться по переходу ссылке (ответ сервера 200 ОК) и важно проверить не запрещен ли индексации значка в файле robots.txt, если даже сам файл не запрещен, возможно запрещен каталог, где находится файл значка.»

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