Фавикон: что это такое, как создать и как установить на сайт

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

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

Термин «фавикон» — это дословное производное от английского «Favorites ICON», что в переводе обозначает «избранная иконка». Что в общем-то точно отображает его суть — это небольшая картинка(значок) сайта, который отображается в браузере и поисковой системе. У каждого сайта свой фавикон. Но сам фавикон не является обязательным элементом для сайта, поэтому его может и вовсе не быть.

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

1. Откройте сайт в браузере и посмотрите на отображение страницы.
2. Откройте сайт на смартфоне.
3. Введите доменное имя в поисковую строку, нажмите «Enter» и посмотрите как отображается страницы в поиске.
4. Напротив сайта должна быть небольшая картинка — это и есть фавикон. Если картинка отсутствует, значит у сайта отсутствует фавикон.

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

Ранее в интернете использовался стандартный размер 16х16 пикселей, потом стал применяться еще и размер 32х32 пикселя. Сейчас для разных устройств можно использовать следующие размеры.

Десктоп	Андроид	iPhone	iPad	Google TV
16х16	36х36	57х57	72х72	96х96
32х32	48х48	60х60	76х76
48х48	72х72	120х120	144х144
	96х96	144х144	152х152
	144х144	180х180
	192х192

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

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

Сейчас можно создавать favicon в следующих форматах: ico, png, svg, jpeg, gif. Самый распространенным является формат favicon.ico, но можно использовать и все выше перечисленные. Формат ico поддерживается всеми браузерами и является самым старым из всех перечисленных. Последние 2 формата (jpeg, gif) могут поддерживаться не всеми браузерами.

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

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

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

• Favicon.cc
• Favicon.by
• Onlinefavicon.com

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

Как сделать фавикон из картинки

Самый простой способ сделать фавикон из картинки — это просто переименовать файл в «favicon.ico» и уменьшить его размер до 32х32 пикселя. Но такой способ может не всегда работать корректно. Например, не корректно отражаться или вовсе не распознаваться на некоторых устройствах. Поэтому тут лучше воспользоваться специальными сервисами. Они называются онлайн генераторы фавиконов.

С их помощью можно конвертировать любое изображение в готовый фавикон. Найдите подходящую картинку в интернете, желательно квадратного размера. Если картинка есть, но она не квадратная, ее вполне можно обрезать при помощи Microsoft Office на своем компьютере. Далее воспользоваться онлайн генератором.

Список онлайн генераторов фавиконов

• Favicon.by
• Favicon-generator.org
• Realfavicongenerator.net
• Bestwebservice.ru/ico_converter/
• Pr-cy.ru/favicon/
• Onlinefavicon.com
• Favicongenerator.com

Где скачать готовый фавикон бесплатно

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

• Faviconka.ru
• Favicon.by/collection
• Iconj.com/gallery.php

Как скачать фавикон с другого сайта

А что делать если Вам очень понравился фавикон на другом сайте и Вы хотите себе такой же? В принципе фавикон можно скачать с любого сайта. Сделать это можно несколькими способами. Самый простой — это попробовать открыть само изображение на отдельной странице. Для этого введите в строку браузера «домен сайта/favicon.ico» и нажмите Enter. Если фавиконка создана в стандартном формате, то на странице появится само изображение. Его можно скачать на свой компьютер, нажав правую кнопку мышки и выбрав «Сохранить картинку».

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

http://favicon.yandex.net/favicon/site.ru

http://www.google.com/s2/favicons?domain=site.ru

Надпись «site.ru» замените на нужный домен, с которого хотите скачать фавикон. Для примера попробуем скопировать фавикон с Яндекса. Вводим в строку браузера: http://favicon.yandex.net/favicon/yandex.ru и получаем изображение.

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

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

1. Найдите письмо с паролем и логином для входа в хостинг-аккаунт, которое пришло Вам при регистрации.
2. Перейдите в панель хостинга и пройдите авторизацию.
3. Перейдите в «Менеджер файлов». На разных панелях этот раздел может называться по-разному, но суть одна — место где хранятся основные файлы сайтов.
4. Найдите свой сайт и перейдите в «public-html» — корневой каталог публикуемых на домене файлов. И загрузите в него файл favicon.ico.
5. Адрес загрузки должен быть: http://site.ru/favicon.ico
6. Соответственно вместо «site.ru» должен быть Ваш домен.
7. Теперь нужно внести изменения в шаблон сайта. Для Вордпресса это можно сделать из панели администратора. Найдите на панели справа пункт «Внешний вид» и выберите строку «Редактор тем».
8. Откройте в редакторе файл header.php.
9. После тега «head» вставьте следующую строку, заменив «site.ru» на свой домен. Далее сохраните изменения.

< link rel=«icon» href=«https://site.ru/favicon.ico» type=«image/x-icon» >

Как поменять фавикон на другой

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

Что делать если фавикон не отображается в Яндексе

Во-первых, проверьте правильно ли размещен файл фавикона на сайте. Для этого проверьте отображается ли изображение в браузере, а потом проверьте фавикон через поисковые системы для Яндекса и Google. Не забудьте заменить «site.ru» на свой домен.

В браузере: http://site.ru/favicon.ico

В Яндексе: http://favicon.yandex.net/favicon/site.ru

В Google: http://www.google.com/s2/favicons?domain=site.ru

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