web-dev-qa-db-ja.com

faviconをJSFプロジェクトに追加し、<link>で参照します

ファビコンをJSFプロジェクトに追加して<link>要素で参照するにはどうすればよいですか？

私は以下のように試しました：

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

ただし、ファビコンは表示されませんでした。

htmljsffavicon
29
gaffcz

相対hrefは、現在のリクエストURIを基準にしています。無効なURLに解決された可能性があります。ドメインルートからの相対パスになるように、コンテキストパスを付加する必要があります。

また、relは、古いブラウザでも動作するように_shortcut icon_にする必要があります。

_.ico_ファイルを使用する場合、それがreal_.ico_ファイルであり、一部の_.bmp_は_.ico_に名前が変更されました。複数の画像形式に基づいて1つ ここ を生成できます。ただし、_.png_または_.gif_ファイルを使用することもできます。

全体として、ファイルが次の場所にある場合

_WebContent
 |-- images
 |    `-- favicon.ico
 :
_

それからこれはそれをするべきです：

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

ただし、次のように_/resources_フォルダにJSFリソースとして配置した場合

_WebContent
 |-- resources
 |    `-- images
 |         `-- favicon.ico
 :
_

_<h:graphicImage name="images/favicon.ico">_でアクセスできるようにするため、次のようにします。

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

以下も参照してください。

60
BalusC

私は以下を使用しました、そしてそれはIEとChromeの両方で動作します

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

補足として、ファビコンを参照するときは常にこれらの両方を含めます。

<link rel="shortcut icon" type="image/x-icon" href="https://a.staticimageserver.com/img/favicon.ico" />
<link rel="icon" type="image/x-icon" href="https://a.staticimageserver.com/img/favicon.ico" />
4
Dave Maple

JSFはリソースをイメージファイルフォルダーを格納するためのコンテナーとして使用するため、以下を実行できます。

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