Добавить favicon в проект JSF и указать его в <link>

Как добавить значок в проект JSF и указать его в элементе <link>?

Я пробовал, как показано ниже:

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

Однако он не показывал никаких значков.

Ответ 1

Относительный href относится к URI текущего запроса. Вероятно, он решил недействительный URL. Вам необходимо добавить путь к контексту, чтобы он стал относительно корня домена.

Кроме того, rel лучше быть shortcut icon, чтобы заставить его работать и в старых браузерах.

В случае использования файла .ico вам также необходимо убедиться, что это файл real .ico, а не некоторый .bmp, переименованный в .ico. Вы можете создать здесь здесь на основе нескольких форматов изображений. Однако вы также можете использовать файл .png или .gif.

В общем, при условии, что файл находится в

WebContent
 |-- images
 |    `-- favicon.ico
 :

тогда это должно сделать это:

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

Если вы однако разместили его как ресурс JSF в папке /resources следующим образом

WebContent
 |-- resources
 |    `-- images
 |         `-- favicon.ico
 :

который сделает его доступным с помощью <h:graphicImage name="images/favicon.ico">, тогда это должно сделать это:

<link rel="shortcut icon" type="image/x-icon" href="#{resource['images/favicon.ico']}"/>

См. также:

Ответ 2

Я использовал следующее и работает как в IE, так и в Chrome

<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" type="image/x-icon" />

Ответ 3

Поскольку JSF использует ресурсы в качестве контейнера для хранения папки файла изображения, вы можете сделать следующее:

<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico"/>

Ответ 4

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

<link rel="shortcut icon" type="image/x-icon" href="#" onclick="location.href='https://a.staticimageserver.com/img/favicon.ico'; return false;" />
<link rel="icon" type="image/x-icon" href="#" onclick="location.href='https://a.staticimageserver.com/img/favicon.ico'; return false;" />