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

Последнее обновлене - 24 октября 2024 в 01:20

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

Итак, будем считать, что вы уже выбрали картинку для придания неповторимости вашему сайту. Я имею ввиду такое изображение, которое единственное в своём роде и его больше нигде нет в сети Интернет. Рекомендую проверить картинку на уникальность! Примите также во внимание, что выбирать картинку лучше без мелких деталей, так как их в браузере всё равно видно не будет — сольются.

Если всё в порядке, то при помощи фотошопа или какого-нибудь онлайн редактора сделайте картинку квадратной. После этого, её необходимо преобразовать из формата png или jpeg в ico. Для этого в сети имеется множество онлайн сервисов — просто наберите в поиске: «фавикон онлайн».

К слову сказать, фавикон можно использовать и в формате png, jpeg или gif. Разница с форматом ico состоит лишь в весе файла. В последнем случае он меньше.

Что касается размеров фавиконки, то ранее считался идеальным выбор в 16×16 или 32×32 пикселей. Так я всегда и делал, пока на днях не получил предупреждение в Яндекс Вебмастере или рекомендацию: «Добавьте файл favicon в формате SVG или 120×120 пикселей».

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

Но такие сервисы всё же есть. Можно воспользоваться услугами хотя бы этого генератора — BWS (Best Web Service).

Я выбрал размер 128x128px. Посмотрим, когда теперь исчезнет проблема на сайте.

При желании, можно использовать SVG формат. С преобразованием изображения в данном случае прекрасно справится конвертер Convertio.

После того, как вы сохраните готовый файл favicon.ico себе на компьютер, его необходимо отправить туда, где его должны обнаружить роботы ПС, то есть в корневую папку сайта на сервере. Когда вы это сделаете, файл будет открываться в браузере при переходе по такому адресу: https://vashsupersite.com/favicon.ico.

Далее, чтобы фавикон был обнаружен поисковиками и начал отображаться в закладках браузера и поисковой выдаче, добавьте на него ссылку в HTML-код между тегами head и /head:

При размещении в корне сайта favicon.svg, favicon.png, favicon.jpeg, favicon.gif, HTML-код выглядит так:

Теперь обновите кэш, и фавикон начнёт отображаться в браузере. Через пару недель он станет виден в поисковой выдаче Яндекса.

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

Генератор предложит вставить на сайт, между тегами head вот такой код:

Всем WEB!