una - link favicon html5

Agregar favicon al proyecto JSF y hacer referencia a él en<link>

Question

¿Cómo agrego un favicon a un proyecto JSF y lo menciono en el elemento <link> ?

Lo intenté como a continuación:

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

Sin embargo, no mostró ningún favicon.

Answer 1

Como JSF usa los recursos como un contenedor para almacenar la carpeta del archivo de imagen, puede hacer lo siguiente;

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

Answer 2

Como nota al margen, siempre incluyo ambos al hacer referencia a 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" />

Answer 3

Un href relativo es relativo al URI de solicitud actual. Probablemente se resolvió con una URL no válida. Debe anteponer la ruta de contexto para que se convierta en relativa a la raíz del dominio.

Además, es mejor que rel sea ​​un shortcut icon para que funcione también en navegadores más antiguos.

En caso de utilizar un archivo .ico , también debe asegurarse de que se trata de un archivo .ico real y no de un .bmp renombrado como .ico . Puede generar uno here función de varios formatos de imagen. Sin embargo, también puedes usar un archivo .png o .gif .

Con todo, siempre que el archivo esté ubicado en

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

entonces esto debería hacerlo:

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

Sin embargo, si lo ha colocado como un recurso JSF en la carpeta /resources siguiente manera

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

que lo haría accesible por <h:graphicImage name="images/favicon.ico"> , entonces esto debería hacerlo:

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

Ver también:

• Wikipedia - Favicon
• ¿Cómo hacer referencia al recurso CSS / JS / image en la plantilla Facelets?

Answer 4

Usé lo siguiente y funciona tanto en IE como en Chrome

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