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

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

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

Термин «фавикон» — это дословное производное от английского «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.ico» и уменьшить его размер до 32х32 пикселя. Но такой способ может не всегда работать корректно. Например, не корректно отражаться или вовсе не распознаваться на некоторых устройствах. Поэтому тут лучше воспользоваться специальными сервисами. Они называются онлайн генераторы фавиконов.

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

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

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

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

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

А что делать если Вам очень понравился фавикон на другом сайте и Вы хотите себе такой же? В принципе фавикон можно скачать с любого сайта. Сделать это можно несколькими способами. Самый простой — это попробовать открыть само изображение на отдельной странице. Для этого введите в строку браузера «домен сайта/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 недели.

Поделиться с друзьями в соцсети:

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *