Favicon html

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

Отображение иконки в строке браузера

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-InsFile Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:Program FilesAdobePhotoshop CS. Тогда полный путь для файла плагина будет c:Program FilesAdobePhotoshop CSPlug-InsFile Formats.

Размещение плагина для сохранения файлов в формате ICO

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>  <link rel="shortcut icon" href="/images/favicon.png" type="image/png"> </head>

htmlbook.ru

Задача

Подключить кроссбраузерно и по международным стандартам favicon.

Теория

Favicon (сокращенно от FAVorites ICON — иконка для избранного) — значок веб сайта, картинка, помогающая лучше идентифицировать сайт. Отображается браузером:

  • в адресной строке (перед URL страницы)
    favicon в адресной строке
  • в избранном (рядом с закладкой)
    favicon в избранном
  • во вкладках
    favicon во вкладках браузера
  • в результатах поиска некоторых поисковых систем (например, Яндекс)
    favicon в результатах поиска
  • а также может быть использован в качестве значка на рабочем столе
    favicon на рабочем столе

Основной формат для favicon — ICO. Такой формат поймут все современные браузеры. Более новые и "продвинутые" воспринимают форматы GIF (включая анимированные GIF), PNG, JPEG and APNG.

Размеры и цвета favicon — 16×16 пикселей, 256 цветов или TrueColor. Эта картинка будет отображаться рядом с адресной строкой, в закладках, табах и результатах поиска. Допускается использование нескольких картинок для favicon разных размеров (32х32, 48х48) и форматов, для нормального отображения иконки и на рабочем столе.

Размещение favicon

Ранее можно было favicon.ico разместить только в корне сайта. При этом не обязтельно было подключать favicon в HTML коде, браузер сам находил значок. Сейчас же favicon можно расположить где угодно в файловой архитекутре, указав к нему путь.

Заметка

Использование резервирования расположения на веб сайтах протеворечит архитектуре WWW, сайт лишается гибкости.

Подключение favicon

Подключение производится в секции head, посредством тега <link>.

Результат. По рекомендациям W3C тегу head добавляем атрибут profile, у которого есть ссылка на документ, поясняющий назначение атрибута rel. Документ http://www.w3.org/2005/10/profile вариант такого пояснения. Можно использовать его, а можно создать свой.

Заметки
  • В 2003 году ICO формат был зарегистрирован в IANA как MIME тип image/vnd.microsoft.icon. С тех пор тип image/x-icon является не корректным.
  • IE отобразит значок в адресной строке только после добавления сайта в избранное.
  • если зашли на сайт, где не было favicon, затем его подключили, чтобы увидеть иконку нужно обновить кеш (иногда требуется перезапустить браузер)
Примеры подключения favicon различных форматов
Заметка

В HTML требуется указывать полный путь к файлу favicon, в XHML можно использовать относительный.

Возможен еще следующий вариант подключения, предназначенный изначально для IE:

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

Заметка

Многие используют двойное подключение favicon двумя способами, чтобы наверняка во всех браузерах отобразился:

Данный фрагмент хоть и не рекомендован, но пока проходит валидацию.

Полезное

  • генератор favicon.ru
  • генератор genfavicon.com
  • Favicon.ico FAQ

xiper.net

Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.

Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«. Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.

Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:

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

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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.

Вот и всё, что хотелось рассказать об установке favicon на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

myrusakov.ru

Как подключить favicon?

Универсальный вариант

Этот вариант будет работать во всех браузерах:

Файл .ico должен быть размером 16 × 16 или 32 × 32.

Другие варианты

Внимательные читатели заметили, что shortcut в rel параметре присутствует только для IE ниже 9 версии.

Кроме того

Зачастую, браузеры ищут иконку в корне сайта и без объявления ее в коде страницы. Таким образом, если вы не указывали favicon.ico через html-тег, но она находится в корне сайта, то браузеры будут все равно ее отображать.

Поддержка форматов иконок

Mozilla Firefox:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG;

Google Chrome:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG;

Apple Safari:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG;;

Internet Explorer:
.ICO, .PNG*, .GIF*, Анимированный .GIF, .JPEG, .APNG;

Opera*:
.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG***;

——————

* — Только с версии 11.0
** — Только с версии 7.0
*** — Только с версии 9.5

Другие размеры и иконки для смартфонов

Для устройств от Apple разработчики предлагают создать несколько иконок разного формата. Одни будут использоваться в iPhone, iPad, другие в iMac и MacBook. Ну и конечно, высокое разрешение иконок нужно для корректного отображения на Retina дисплеях:

А для телефонов под управлением Android можно указывать иконки в разрешениях 120 × 120 или 192 × 192:

Готовый шаблон

Вот такой готовый код для быстрой вставки favicon на сайт для всех устройств:

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

Уделяйте внимание мелочам! Именно из мелочей складывается общее ощущение и восприятие.

dmitriyilichev.com

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.