Как сделать фавикон и поставить его на сайт

22 мая 2013  17345  Favicon, html, вёрстка, иконки

 

По умолчанию, в качестве значка (иконки) любого сайта отображается значок браузера или CMS (системы управления сайтом). Чтобы выделить свой сайт в списке поисковой выдачи или в списке закладок пользователя, каждый веб-мастер обязательно создаст для него фирменный значок (иконку сайта) — favicon (сокр. от англ. FAVorites ICON). Это может быть логотип компании в миниатюре или произвольная картинка.

Стандартом для браузеров является файл изображения размером 16×16 пикселей формата ico. Традиционно значок сайта именуют favicon.ico

Значок сайта (favicon) может быть выполнен и в других форматах, например, png, gif или jpg. Однако, для кроссбраузерности (поддержки всеми браузерами и в любой версии) лучше использовать формат ico.

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

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер загрузит файл favicon.ico из корня сайта. Тем не менее, лучше указать положение значка в HTML коде заголовка (внутри элемента <head>).

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Рекомендации Яндекса

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

1. Важен правильный формат фавиконки. Распространенная проблема - обозначение формата только в названии файла, когда настоящий формат отличается. Совет: убедитесь в свойствах файла, что у вас нужный формат. Также часто при передаче файла фавиконки с сервера сайта указывается некорректный тип передаваемых данных (Content-Type). Если фавиконка имеет расширение ico, то и в type необходимо указывать принадлежность к ico, например, type="image/x-icon".

2. Само изображение должно быть размером 16х16 пикселей и однослойным.

3. Как и со страницами на сайте, индексирование начинается с обнаружения ссылки - ссылки на фавиконку:

  • — прописывайте адрес фавиконки в коде главной страницы;
  • — по возможности располагайте фавиконку в корне сайта;
  • — старайтесь использовать статический адрес фавиконки;
  • — кириллический адрес необходимо написать, используя Punycode;
  • — если сайт доступен по нескольким адресам (например, с www и без www, по протоколам http или https), то проследите, что везде размещена одинаковая фавиконка.

4. Фавиконку скачивает специальный робот. Проследите, что:

  • — в случае наличия нескольких адресов файла фавиконки в коде страницы первым расположен адрес для поискового робота;
  • — адрес фавиконки разрешён для скачивания в файле robots.txt ( https://webmaster.yandex.ru/robots.xml );
  • — фавиконка отдаёт код ответа сервера HTTP 200.

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

Онлайн-генераторы фавиконок

Для создания значка сайта существует большое количество онлайн-генераторов, где фавиконку можно нарисовать вручную или сделать её из какой-либо картинки.

Ваш сайт на экране Windows 8

За считанные минуты, в два этапа создайте плитку своего сайта для размещения рядом с приложениями на начальном экране Windows 8. Поверьте, он будет выглядеть гораздо лучше с вашим логотипом в виде изображения 144×144 пикселей.

http://www.buildmypinnedsite.com/

Наборы картинок для создания фавиконки

http://www.apsolyamov.ru/blog/izobrazhenija_ikonki_dlja_sajta

 

Комментарии для сайта Cackle
наверх