Здравствуйте, дорогие читатели блога PROgeek.ru. Сегодня я Вам поведаю о том, что такое Favicon, зачем он нужен, где, почему и как его можно создать, и как говорится «с чем его едят». Конечно же, продвинутые вебмастеры знают о фавиконах абсолютно все, однако, мне поступило много писем на почту от начинающих вебмастеров с просьбой посвятить одну статью фавиконам. В двух словах Favicon можно охарактеризовать как иконку Вашего сайта с расширением «.ico», которая отображается во вкладках практически всех популярных браузеров, а также выводится в поисковой выдаче Яндекса, напротив Вашего сайта с левого края (в поисковой выдаче Гугла Favicon не отображается).

Вот как отображается Favicon во вкладке браузера:

Фавикон сайта

А вот как выводится в поисковой выдаче Яндекса:

Фавикон в поисковой выдаче Яндекса

У Вас наверно возник один вопрос, а зачем нужен Favicon кроме как для эстетического приложения к сайту? Но как показывают опросы, большинство пользователей интернета, при осуществлении поиска в поисковой системе Яндекс, не последнее место отводят наличию фавикона в поисковой выдаче при осуществлении выбора для перехода на сайт. Также, наличие фавикона является показателем того, что вебмастер сайта исполнил все требования поисковика, чтобы фавикон выводился в поисковой выдаче.

Как известно, специально для Favicon поисковик Яндекс много лет тому назад создал бота (YandexFavicons), который с определенной периодичностью осуществляет обновление данных о фавиконах. Имейте ввиду, что если Вы сегодня прикрепили Favicon.ico на Ваш сайт, то не стоит ожидать, что он сразу же отобразится в Яндексе. Должно пройти определенное время, после чего фавикон будет радовать Вас и Ваших посетителей в поисковике Яндекс.

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

Как создать Favicon.ico самому

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

Однако, следует отметить, что Photoshop не может сохранять файлы с расширением .ico, и для того, чтобы создать фавикон в Photoshop’е, Вам необходимо установить плагин, который позволит Вам сохранять файлы с расширением .ico. О таком плагине я писал в этой статье (там же можете скачать сам плагин).

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

Онлайн генераторы Favicon

  1. favicon.ru — один из популярных инструментов для создания фавикона в рунете. Это сервис примечателен тем, что он позволяет как самому нарисовать фавикон, так и преобразовать фавикон из изображения. Для того, чтобы преобразовать изображение в фавикон, нажмите на кнопку «Выберите файл», соответственно выберите нужное изображение, и нажмите «Открыть». Вас перекинет на новое окно, в котором Вам можно будет отредактировать картинку. Потом Вас снова перекинет на начальную страницу, но теперь в форме рисования фавикона будет готовый рисунок. Если Вам угодно, Вы можете подкорректировать полученный рисунок в форме, либо, если хотите получить свой Favicon, нажмите на «Скачать Favicon»: фавикон ру
  2.  favicon.by — по функционалу и исполнению очень похож с первым примером. Также, как и в первом варианте, Вы можете либо сами нарисовать Favicon, либо преобразовать из изображения: фавикон.бу
  3. ru.toolson.net — сервис для онлайн генерации фавиконов. Стоит отметить, что в данном сервисе можно генерировать фавиконы только из готовых изображений. Для генерации фавикона поддерживаются следующие форматы: jpg, jpeg, png, gif и bmp. Сам процесс генерации не сложный. Нужно всего лишь следовать указанным на сервисе шагам. Минусом данного сервиса, как отмечалось выше является отсутствие возможности самому нарисовать Favicon. ICON ГЕНЕРАТОР
  4. www.degraeve.com — удобный зарубежный сервис для создания Favicon в режиме онлайн. Также, по функционалу идентичен приведенному первому примеру. Сервис работает молниеносно быстро (что очень радует). Вы также можете либо сами нарисовать Favicon, либо преобразовать его из изображения: degraeve

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

 

Как установить Favicon на сайт и прописать путь до него

Теперь перейдем к более сложному для новичков-вебмастеров вопросу — как же установить на свой сайт Favicon? На самом деле, все очень просто. Вам всего лишь нужно отыскать на сервере Вашего сайта корневую папку/директорию. В львиной доле корневой папкой/директорией является папка public_html, реже папки www, domains, HTDOCS. В данную папку Вам необходимо разместить файл Favicon.ico. Разместили? Отлично, теперь можете смело любоваться своим фавиконом.

Если у Вас не отображается Favicon — то тому есть несколько причин: либо у Вас прописан специальный адрес к отображению фавикона, либо Вы не разместили фавикон в корневую папку/директорию.

Также, следует иметь ввиду, что Favicon в CMS устанавливается определенным образом, который описан в документации к CMS.

(Visited 319 times, 1 visits today)