Ответ 1

Я клонировал ваш проект из GitHub, чтобы взглянуть на него. После того, как вы использовали его, используя Jekyll, значок не отображался, как вы отметили.

Я сделал несколько быстрых тестов, преобразовывая файл favicon в файл .png, а не файл .ico, и изменив объявление favicon на следующее, и это позволило ему отобразить значок.

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

Я пытался заставить favicon работать, сохраняя формат файла .ico, и не смог сделать это сначала. Тем не менее, я сделал быстрый поиск и наткнулся на этот вопрос, favicon, не отображаемый Firefox.

В этом вопросе у айзера была аналогичная проблема с отсутствием значка, и в итоге он смог быстро найти решение, добавив ? в конец ссылки на файл favicon в объявлении favicon. Я попытался это сделать, и это сработало. Вот что было бы объявлением favicon:

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

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

Однако, если вы хотите сохранить файл как файл .ico, тогда вы должны прочитать вопрос, с которым я связался, прежде чем вы попытаетесь использовать второй метод, поскольку принятый ответ на вопрос отличается от этого решения. Также я не уверен, почему работает второй метод, и это кажется немного взломанным.

Ответ 2

Я считаю, что в настоящее время правильный способ сделать это:

<link rel="shortcut icon" type="image/png" href="{{ "/favicon.png" | prepend: site.baseurl }}" >

Предполагая, что вы используете png. Следующее также работало для меня с .ico вместо .png:

<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" >

Я работал с Chrome на Linux. Ответ "Экскалибур нуль" или ответ Рибтока не помогли мне.

Ответ 3

Я использую

<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >

И у меня есть значок в папке images.

Ответ 4

Быстрое решение

Оставьте косая черта, чтобы сделать адрес href относительным.

Например:

Изменить

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

в

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

В моем сайте github pages это работает отлично.

Объяснение

Используйте мой сайт https://hustlion.github.io/spanish-cards/ в качестве примера:

Когда вы используете <link rel="shortcut icon" type="image/png" href="/favicon.png">, адрес значка будет https://hustlion.github.io/favicon.png, потому что корень сайта (как указано слэшем в /favicon.png) равен https://hustlion.github.io/.

Однако, когда вы используете <link rel="shortcut icon" type="image/png" href="favicon.png">, это относится к пути https://hustlion.github.io/spanish-cards/, поэтому адрес значка будет правильно разрешен как https://hustlion.github.io/spanish-cards/favicon.png.

Примечания

Эта проблема возникает, особенно когда вы используете страницы github для своего конкретного репозитория.

Ответ 5

Я получил его на работу с помощью:

<!-- Add favicon -->
<link rel="shortcut icon" 
      type="image/png" 
      href="{{ '/favicon.png' | relative_url }}" >

Примечания к фрагменту:

1. Формат PNG для иконки сайта,
2. относительный URL в теге HTML head (в минимизации это head.html).
3. Добавление relative_url говорит Liquid, чтобы добавить к указанному пути url и baseurl.

Ответ 6

На всякий случай кто-то будет искать это. Оба подхода не работали для меня. Но когда я добавил site.url, он работал

<link rel="shortcut icon" type="image/png" href="{{site.url}}/favicon.png">

Ответ 7

Ничто из вышеперечисленного не сработало для меня, но шаги в этом видео (предполагая тему минимума) сработали.

1) Добавьте каталог _includes в корневой каталог вашего проекта

• Terminal: найдите _includes/head.html, набрав bundle show minima
• Скопируйте _includes/head.html из поиска в корень вашего проекта

2) Измените _includes/head.html чтобы включить ссылку на favicon

• Следующее работает для меня: <link rel="shortcut icon" type="image/png" href="/favicon.png">
• Важно: / перед /favicon.png имеет значение. Без / ваш корневой каталог веб-сайта будет иметь ваш значок, но никакие другие конечные точки не будут.

3) Добавьте jekyll-seo-tag в ваш _config.yml. Это должно выглядеть примерно так:

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag

Ответ 8

В моем случае мне пришлось добавить файл favicon.ico в папку ресурсов и ссылаться на него следующим образом:

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

Ответ 9

согласно документации:

1) поместите файл favicon.ico в папку assets/images проекта jekyll как assets/images/favicon.ico

2) создайте файл _includes/head_custom.html, если он еще не существует

3) добавить необходимый основной контент:

<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/favicon.ico">

Готово.