5

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

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

Фавикон, что это такое ?

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

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

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

Можно конечно сохранить и в формате PNG, JPEG, но в этом случае иконка не будет поддерживаться в браузере Internet Explorer.

Иногда делают анимированные иконки с форматом .GIF, но данное расширение поддерживают только браузеры Firefox и Opera.

Поэтому, чтобы сохранить работоспособность в разных браузерах (кросбраузерность),  рекомендую сохранять изображение фавиконки в формате .ico .

Основные размеры разрешения картинки  должны быть 16х16, 24х24, 32×32, или 64х64 пикселей. В противном случае изображение не будет отображаться в браузере. Стандартный размер фавиконки 16х16 пикселей, именно он сохраняется в файле favicon.ico . Другие размеры изображения, также сохраняются в данном файле и загружаются по необходимости.

Для чего нужен фавикон?

Большинство браузеров автоматически находят файл favicon.ico. У Яндекса,  существует специализированный робот для поиска. Вы можете проверить как будет выглядеть ваша иконка на специальном сервисе Яндекса  http://favicon.yandex.net/favicon/ваш сайт.ru ( Вместо “Ваш сайт.ru” подставьте адрес своего сайта).

Фавикон является своего рода отличительным знаком (брендом, логотипом) вашего ресурса, привлекает дополнительное внимание пользователей, повышает узнаваемость и доверие

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

Перечислим основные преимущества установки фавикона:

  1. Присутствие фавикона, положительно влияет на ранжирование в Яндексе. Не спроста создан специальный робот для отслеживания. На многих сервисах анализа сайтов, присутствует позиция проверки наличия иконки сайта.
  2. При открытии большого количества вкладок в браузере, скрывается название сайта, но изображение иконки остается на вкладке. Что помогает пользователю быстро найти и перейти на ваш сайт.
  3. Доказано, что пользователь сперва выбирает в поисковой выдаче тот сайт, у которого есть фавикон. Соответственно это влияет на посещаемость и продвижение сайта.
  4. При сохранении вашего сайта в закладки, именно фавикон будет являться ярлыком вашего ресурса. Особенно это удобно при работе с мобильными устройствами (смартфоны, планшеты)

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

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

Существуют различные способы получения фавикона для вашего ресурса.

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

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

Можно подобрать подходящую картинку на различных платных и бесплатных специализированных биржах изображений.

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

Изготовить иконку собственными силами. Это можно легко сделать при помощи практически любого графического редактора (Paint, Gimp, Photoshop). Учтите изображение должно быть контрастным по сравнению с фоном и не должно быть перегружено мелкими деталями, иначе оно будет плохо различимым.

Не забудьте сохранить изображение в нужном размере и  формате (.ico или .png.)

Если вы новичок и не умеете работать в графических редакторах, вам в помощь создано множество онлайн сервисов позволяющих сделать фавикон. (favicon.cc. Favicon.ru и другие)

Для примера давайте рассмотрим один из них Favicon.ru.

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

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

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

Установка фавикона на сайт.

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

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

Если в вашем шаблоне нет такой функции, не расстраивайтесь  разберемся как сделать это ручками!

Необходимо заранее подготовленную картинку favicon.ico, забросить в корневой каталог сайта и робот Яндекса самостоятельно его найдет и проиндексирует. Но этот способ не совсем корректен и может занять продолжительное время.

Для грамотной установки, готовую иконку favicon.ico необходимо загрузить в корневую папку сайта  public_html или index_html.  Для этого используйте файловый менеджер в панели управления хостингом  или FTP – клиент .

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

Замените vash-site.ru на название вашего сайта. Вставьте полученный код между тегами <head>…</head> на  каждой странице вашего сайта. Если у вас сайт на движке WordPress, то вам необходимо вставлять этот код в файл шаблона  сайта header.php,  между тегами <head>…</head>. Не забудьте обновить файл после редактирования.

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

Все теперь вы можете перейти в браузер, открыть ваш сайт и посмотреть что получилось.

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

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

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

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

комментариев 5
  1. Александр
    19.02.2018 в 20:07

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

  2. admin
    15.03.2017 в 17:36

    Ну если уникальный, зачем его проверять. Если только узнать есть он в поиске по картинкам.

  3. Наталья
    15.03.2017 в 15:37

    Я свой фавикон делала сама. Он, в любом случае, уникален. А вот проверять его не пробовала.

  4. admin
    12.03.2017 в 20:41

    Попробовал проверить свой фавикон по поиску картинок, был найден мой сайт. Чтобы не было повторений, делайте уникальную иконку самостоятельно или обратитесь к специалисту. Удачи!

  5. Татьяна
    12.03.2017 в 07:20

    А вот интересно, можно ли проверить фавикон на уникальность? Или хотя бы узнать, у кого еще такие, как и у меня, фавиконы на сайтах? Интересно было бы.
    Или он устанавливается только тогда, когда нет аналогов? Но я нигде не видела надписи : фавикон свободен. 🙂

Добавить комментарий