Favicon (Фавикон) - иконка для сайта. Урок 39. Favicon (Фавикон) - это маленький графический файл, который является мини аватаром сайта и отображается браузерами рядом с урлом странички на вкладках, в разделе "избранное", а также в других местах. Технология Favicon очень старая, а правила использования весьма мутные, или, что звучит лучше, гибкие. Стандартный классический подход: файл favicon.ico в корневой папке сайта. Как создать файл ico.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
39. Favicon (Фавикон) - иконка для сайта.
Favicon (Фавикон) - это маленький графический файл, который является мини аватаром сайта и отображается браузерами рядом с урлом странички на вкладках, в разделе "избранное", а также в других местах.
Технология Favicon очень старая, а правила использования весьма мутные, или, что звучит лучше, гибкие.
Попробуем эти правила озвучить в терминах, доступных для понимания.
<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 файла у нас два пути:
На тему конвертации существует много разработанного софта, который нужно либо устанавливать на компьютер, либо использовать в виде онлайн сервисов.
Из множества подобных ресурсов мне понравились следующие два, прежде всего, отсутствием явных глюков при конвертации:
Теперь возьмем за основу тестовую страничку с предыдущего урока (38), добавим в данной тестовой страничке (39) подключение только что сделанной иконки и сравним отображение в браузере.
Страничка без подключения иконки отображается с общей иконкой домена koci.inumo.ru, а вот страничка с подключенной иконкой, отображается с новой подключенной иконкой. Т.е. частная иконка перебивает общую иконку, что вполне логично.
До полноты картины добавим еще на тестовую страничку мета теги description и keywords, в результате получаем вполне боеспособный образчик с точки зрения требований валидатора и SEO оптимизатора.
Посмотреть тестовый пример можно здесь:
article_039.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_039.zip ← скачайте пример, чтобы установить на свой сайт...
Технология 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="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 файла у нас два пути:
- Прямо так и ставить gif файл. Выше мы убедились, что некоторые так и делают.
- Сконвертировать gif файл в ico файл.
На тему конвертации существует много разработанного софта, который нужно либо устанавливать на компьютер, либо использовать в виде онлайн сервисов.
Из множества подобных ресурсов мне понравились следующие два, прежде всего, отсутствием явных глюков при конвертации:
- - Онлайн сервис конвертации файлов.
- - Бесплатный конвертор файлов ico. Устанавливается на компьютер пользователя.
Страничка без подключения иконки отображается с общей иконкой домена koci.inumo.ru, а вот страничка с подключенной иконкой, отображается с новой подключенной иконкой. Т.е. частная иконка перебивает общую иконку, что вполне логично.
До полноты картины добавим еще на тестовую страничку мета теги description и keywords, в результате получаем вполне боеспособный образчик с точки зрения требований валидатора и SEO оптимизатора.
Посмотреть тестовый пример можно здесь:
article_039.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_039.zip ← скачайте пример, чтобы установить на свой сайт...
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок_18 :: Урок_19 :: Урок_20 :: Урок_21 :: Урок_22 :: Урок_23 :: Урок_24 :: Урок_25 :: Урок_26 :: Урок_27 :: Урок_28 :: Урок_29 :: Урок_30 :: Урок_31 :: Урок_32 :: Лаба_2 :: Урок_33 :: Урок_34 :: Урок_35 :: Урок_36 :: Урок_37 :: Урок_38 :: Лаба_3 :: Урок_39
Следующие странички, рекомендуемые для посещения и изучения:
Урок 40
Страничка сделана на основе контента курса HTML сайта kocby.ru