dimayakovlev.ru

Пример кода подключения иконки веб-сайта в шаблон для Jekyll

Для отображения иконки веб-сайта актуальные веб-браузеры и роботы поисковых систем автоматически загружают файл с именем favicon.ico из корня веб-сайта. Такое поведение позволяет отказаться от явного указания файла иконки в коде страницы до тех пор, пока не появляется потребность использовать для иконок файлы других форматов или с другими именами. Например, файлы иконок в формате SVG или индивидуальные иконки для отдельных страниц веб-сайта. В этих случаях путь к файлу иконки должен быть указан явно при помощи HTML-тега link в разделе head HTML-документа. Как подключить иконку веб-сайта в шаблоне Jekyll покажу на примере кода, который использую сам.

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

Для применения кода скопируйте и поместите его в Liquid-шаблон, отвечающий за формирование HTML-кода раздела заголовка страниц. То есть, между HTML-тэгами <head></head>.

{%- if page.favicon or site.favicon %}
  {%- assign favicon = page.favicon | default: site.favicon %}
  {%- assign favicon_ext = favicon | split: "." | last | downcase %}
  {%- if favicon_ext == 'svg' %}
    {%- assign favicon_type = 'image/svg+xml' %}
  {%- elsif favicon_ext == 'ico' %}
    {%- assign favicon_type = 'image/vnd.microsoft.icon' %}
  {%- elsif favicon_ext == 'gif' %}
    {%- assign favicon_type = 'image/gif' %}
  {%- elsif favicon_ext == 'png' %}
    {%- assign favicon_type = 'image/png' %}
  {%- elsif favicon_ext == 'bmp' %}
    {%- assign favicon_type = 'image/bmp' %}
  {%- elsif favicon_ext == 'jpeg' or favicon_ext == 'jpg' %}
    {%- assign favicon_type = 'image/jpeg' %}
  {%- else %}
    {%- assign favicon_type = '' %}
  {%- endif %}
  <link rel="icon" href="{{ favicon | relative_url }}"{% if favicon_type != '' %} type="{{ favicon_type }}"{% endif %}>
{%- endif %}

Как работает код

Главная иконка веб-сайта задаётся в переменной favicon в файле настроек _config.yml:

favicon: /favicon.svg

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

---
title: Страница с индивидуальной иконкой
favicon: /assets/images/icons/custom-icon.png
---

Если переменная уровня страницы page.favicon не объявлена, используется значение из переменной site.favicon. Если и переменная site.favicon не объявлена, то Liquid-код, выводящий HTML-тег link, не выполняется. В этом случае, при обращении к странице, веб-браузер будет пытаться загрузить файл /favicon.ico о существовании которого следует позаботиться заранее.

Для заполнения значения атрибута type HTML-тега link MIME-тип формата иконки определяется на основе расширения файла. Для иконки в формате ICO используется тип image/vnd.microsoft.icon. Используемый ранее тип image/x-icon признан устаревшим. Важно помнить, при несовпадении указанного в HTML-коде MIME-типа с Content-type иконки, возвращаемым веб-сервером, иконка в веб-браузере показана не будет.

Если всё сделано правильно, ваш веб-сайт не останется без иконки.