Комплексная Образовательная Система
"Интернет"
~~~ KOCI.INUMO.RU ~~~

Favicon (Фавикон) - это маленький графический файл, который является мини аватаром сайта и отображается браузерами рядом с урлом странички на вкладках, в разделе "избранное", а также в других местах.

Технология Favicon очень старая, а правила использования весьма мутные, или, что звучит лучше, гибкие.

Попробуем эти правила озвучить в терминах, доступных для понимания.

• <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> - это классический и, по моему мнению, наиболее правильный вариант использования. Располагаться этот тег должен в секции head, т.е. между тегами head></head>. Некоторые авторитетные ресурсы (Гугль, Википедия и др.) смело отклоняются от данного стандарта, ниже мы отобразим некоторые из этих отклонений. Но сами будем все-таки стараться максимально держаться указанной выше версии.
• Правило 1: один сайт (домейн) - одна иконка - вроде бы можно и нарушать, и лепить для каждой странички сайта оригинальные иконки. Но зачем это делать? К тому же надо учитывать, что эти иконки как-то хитро кэшируются по-разному разными браузерами. Поэтому, разумно сделать одну нормальную иконку для всех страниц сайта, и больше ее не менять.
• Формат иконки ico - и это правило сейчас, вроде бы можно не соблюдать, а использовать более привычные для вебмастеров файлы gif или png, и т.п. Наверное, это больше дань старой традиции прошлого века. Мы все-таки будем придерживаться этой традиции.
• Находиться иконка должна в корневой папке - тоже, вроде бы, старое необязательное сегодня ограничение, но мы, на всякий случай, будем придерживаться и его тоже, руководствуясь замечательным принципом человека в футляре: "как бы чего не вышло (плохого)".
• Название должно быть favicon.ico - и это правило можно не соблюдать, но мы соблюдать его все-таки будем.
• Размер 16х16 пикселей - и опять же, могут быть и другие размеры, например: 32х32. Мы будем делать иконки размером 16х16.

Теперь рассмотрим отклонения от стандарта: <link rel="icon" href="/favicon.ico" type="image/x-icon" /> - вполне возможно, что данный вариант даже более правильный, чем рекомендуемая мною версия выше. До сих пор в размышлениях, что же лучше (более правильно): rel="icon" или rel="shortcut icon" - для меня это загадка, я не понимаю в чем разница реагирования браузерами на эти версии.
<link rel="shortcut icon" href="//bits.wikimedia.org/favicon/wikipedia.ico" /> - так подключает иконку Википедия, т.е. она не считает, что иконку следует размещать в корне сайта.
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16"> - это из рекомендаций W3C, т.е. все-таки правильно rel="icon", можно использовать файлы gif и следует указывать размер с помощью атрибута sizes="16x16"
<link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png"> - тоже от W3C, можно использовать файлы png, и можно указывать несколько размеров через пробел.
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml"> - тоже от W3C, теперь уже с файлом svg, причем размер можно указывать как любой, т.е. sizes="any"
<meta content="/images/google_favicon_128.png" itemprop="image"> - это уж совсем хитрая версия, с изумлением увиденная на сайте Гугля. Без специальной подготовки повторять ее не рекомендую (и сам не буду, привожу чисто для справки).

Теперь от теории переходим к практике.

Первое, что следует сделать, это создать файл с мини аватаром размером 16х16 в формате gif или png.

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

Но для создания простой иконки, типа вот такой: , вполне достаточно знаний, полученных на курсе Фотошоп с нуля.

Синяя буква - эта есть буква H (английская), а вовсе не Н (русская).

Означает она HTML, тему данного раздела.

После создания gif файла у нас два пути:

1. Прямо так и ставить gif файл. Выше мы убедились, что некоторые так и делают.
2. Сконвертировать gif файл в ico файл.

Мы пойдем вторым путем, т.к. слишком простые и легкие решения нам неинтересны.

На тему конвертации существует много разработанного софта, который нужно либо устанавливать на компьютер, либо использовать в виде онлайн сервисов.

Из множества подобных ресурсов мне понравились следующие два, прежде всего, отсутствием явных глюков при конвертации:

1. - Онлайн сервис конвертации файлов.
2. - Бесплатный конвертор файлов ico. Устанавливается на компьютер пользователя.

Теперь возьмем за основу тестовую страничку с предыдущего урока (38), добавим в данной тестовой страничке (39) подключение только что сделанной иконки и сравним отображение в браузере.

Страничка без подключения иконки отображается с общей иконкой домена koci.inumo.ru, а вот страничка с подключенной иконкой, отображается с новой подключенной иконкой. Т.е. частная иконка перебивает общую иконку, что вполне логично.

До полноты картины добавим еще на тестовую страничку мета теги description и keywords, в результате получаем вполне боеспособный образчик с точки зрения требований валидатора и SEO оптимизатора.

Посмотреть тестовый пример можно здесь:
article_039.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_039.zip ← скачайте пример, чтобы установить на свой сайт...