web-dev-qa-db-fra.com

Ajoutez un favicon au projet JSF et référencez-le dans <link>

Comment ajouter un favicon à un projet JSF et le référencer dans <link> élément?

J'ai essayé comme ci-dessous:

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

Cependant, il n'a montré aucun favicon.

htmljsffavicon
29
gaffcz

Un href relatif est relatif à l'URI de la demande actuelle. Il a probablement résolu une URL non valide. Vous devez ajouter le chemin du contexte avant qu'il ne devienne relatif à la racine du domaine.

De plus, le rel vaut mieux être shortcut icon pour le faire fonctionner également dans les anciens navigateurs.

En cas d'utilisation d'un .ico fichier, vous devez également vous assurer qu'il s'agit bien d'un réel .ico fichier et pas certains .bmp renommé en .ico. Vous pouvez en générer un ici basé sur plusieurs formats d'image. Vous pouvez cependant également utiliser simplement un .png ou .gif fichier.

Dans l'ensemble, à condition que le fichier se trouve dans

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

alors cela devrait le faire:

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

Si vous l'avez toutefois placée en tant que ressource JSF dans le /resources dossier comme suit

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

ce qui le rendrait accessible par <h:graphicImage name="images/favicon.ico">, alors cela devrait le faire:

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

Voir également:

60
BalusC

J'ai utilisé ce qui suit et cela fonctionne dans les deux IE et Chrome

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

En remarque, j'inclus toujours les deux lors du référencement d'un favicon:

<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

Étant donné que JSF utilise les ressources comme conteneur pour stocker le dossier de fichiers image, vous pouvez effectuer les opérations suivantes;

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