При создании своего сайта следует продумать все детали: содержание, дизайн, расположение и многое другое. Так же следует не забыть о такой маленькой детали, как иконка сайта (favicon), ведь именно эту маленькую картинку увидит пользователь в первую очередь при использовании поисковых систем (например, Yandex), в закладках ваш сайт будет легче найти и, конечно же, это добавит законченность в графическое оформление сайта.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это значок web-сайта (web-страницы), который отображается браузером в адресной строке перед URL страницы, в поисковых системах, в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Способы создания:

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

Если вы решили создать favicon  своими руками, то у вас несколько вариантов действий:

·         взять готовое изображение или нарисовать в любом графическом редакторе, а затем преобразовать его в формат ico  с помощью сайта  www.Favicon.ru. А можно воспользоваться, хорошо всем известным графическим редактором Adobe Photoshop, уменьшить размер изображения до 16´16 пикселей (32´32 для изображения в формате png) и сохранить его в формате ico (предварительно необходимо установить плагин ICOFormat http://www.telegraphics.com.au/sw/);

·         создать favicon с помощью специальной программы для создания иконок, например, IconLover (платная программа, с 30-м испытательным сроком), IcoFX (бесплатная программа), IconDeveloper (бесплатная программа), также можно воспользоваться услугами сайта http://www.favicon.cc/, предоставляющего редактор иконок в интернете.

Несколько советов по созданию favicon:

1)      favicon должен быть выполнен в том же стиле что и сайт (цветовая схема, элементы и т.д.), таким образом, является полноценной неотделимой частью сайта;

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

3)      favicon должен быть информативным и простым для восприятия, отображать тематику сайта;

4)      следует позаботиться об оригинальности, конечно можно скачать готовую иконку в интернете, но лучше потратить время и создать самому, тем самым гарантируя, что такой favicon будет представлять только ваш сайт.

Размещение favicon:

Иконка готова, теперь закачиваем на сервер файл, обычно файл называют favicon.ico (лучше, но не обязательно в корневой каталог, поскольку это позволит большинству браузеров отображать иконку автоматически).

Далее в HTML-коде в разделе HEAD, следует прописать следующие строки:

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

Если вам хочется, что бы favicon был анимированный, то  следует изображение сохранить в формате gif и изменить код таким образом:

<link rel="shortcut icon" href="favicon.gif" type="image/gif"/>
<link rel="icon" href="favicon.gif" type="image/gif"/>

Чтобы было проще разобраться с приведенным кодом ниже приведена таблица с описанием и возможными вариантами значений атрибутов rel, href и type: