Что такое favicon и как ее создать?

2013-05-09

Добрый день, дорогие читатели моего блога-блокнота Web Proделки!

А знаете ли вы, что такое фавикон? Правильнее сказать, favicon?

Это такая маленькая картинка – значок веб-сайта или веб-страницы, необходимая для его быстрой идентификации пользователем при добавлении ресурса в избранное. Увидеть такие иконки вы можете в адресной строке перед URL страницы, на вкладках вашего браузера или в качестве картинки рядом с закладкой страницы, а также в результатах поиска Яндекса перед элементом списка.

favicon2favicon1

Favicon нужна для лучшего запоминания веб-сайта посетителями: с помощью нее пользователю легче найти и выделить взглядом строку с вашим ресурсом в списке избранного. Именно эту функцию и отражает само название favicon = favorite icon, т.е. иконка для избранного, любимая иконка. Кроме того, она может “цеплять взгляд”, привлекать внимание человека среди множества других результатов поиска,  побуждая нажать на ссылку, ведущую именно на вашу веб-страницу. Соответственно, фавикон должна быть уникальной, запоминающейся и красивой, вызывающей ассоциации с вашим сайтом. Чаще всего favicon представляет собой микро логотип сайта, являясь, как вы наверное уже поняли, одним из важных компонентов поисковой оптимизации и раскрутки веб-сайта. Было бы неплохо, чтобы ваш веб-сайт имел такую картинку, не так ли?

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

Как же ее сделать?

Создание favicon

Вы можете создать ее самостоятельно в графическом редакторе, например, Photoshop, уменьшив размер логотипа вашего веб-сайта до 16 х 16 пикселей и отредактировав его при необходимости. Или же воспользоваться одним из сервисов для рисования favicon в режиме он-лайн, например, таким.

Специализированные сайты для создания favicon удобны тем, что вы можете не только нарисовать значок в их редакторе, но и, как правило, загрузить и отредактировать свое изображение. Это полезно в том плане, что не все графические редакторы умеют сохранять картинки в формате .ico, а так, у вас появляется возможность сначала нарисовать фавиконку в Photoshop, сохранив ее как обычную картинку с расширением .jpg или .gif, а потом преобразовать в необходимый формат .ico  путем загрузки и сохранения через специальный интернет-сайт. В общем, возможностей несколько и ваше преимущество в том, что вы можете выбрать удобный именно вам вариант. Кстати, надо заметить, что существуют специализирующиеся на создании favicon сайты, предоставляющие, кроме редактора, услуги по разработке значка-логотипа профессиональными дизайнерами.

Установка favicon

Итак, будем считать, что картинкой favicon.ico мы уже обзавелись одним из вышеперечисленных способов. Что же делать с ней дальше?

А дальше ее необходимо разместить в определенной папке вашего сайта и прописать путь к ней в коде веб-страниц. Тут нет ничего сложного, но тоже существует несколько вариантов в зависимости от того, как именно работает ваш веб-сайт.

1. Если у вас простой статичный сайт, функционирующий без какого-либо движка, то созданную вами иконку, в формате .ico, нужно поместить в корневую директорию вашего сайта (например, «www» или «public_html») и на каждой странице между тегами <head>  и </head>  добавить такие строки:

2. Если ваш веб-сайт или блог работает на движке, например, WordPress, то вы можете либо поставить постоянный логотип, скопировав ваш файл favicon.ico в папку хостинга public_html и добавив в файл header.php код:

либо, изменить значок-фавикон только для определенной темы, поместив файл с иконкой не в корневую папку сайта, а в папку этой темы.

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

Если же в теме не было favicon, то понадобится добавить в файл header.php выбранной темы код:

Вот и все. Теперь обновите страничку вашего сайта в интернет-браузере – и рядом с ее заголовком во вкладке и строке адреса появится созданная вами favicon.

Поздравляю, теперь ваш веб-сайт будет иметь для пользователей свое уникальное “лицо”, выделяясь среди прочих и привлекая внимание новых посетителей.

Удачи!

Статья пригодилась? Буду признательна, если поделитесь в соцсетях:

Комментарии


Комментариев пока нет, будьте первым.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">