Add favicon to JSF project and reference it in <link>
I used the following and it works in both IE and Chrome
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" type="image/x-icon" />
A relative href
is relative to the current request URI. Likely it resolved to an invalid URL. You need to prepend with the context path so that it becomes relative to the domain root.
Also, the rel
has better to be shortcut icon
to get it to work in older browsers too.
In case of using an .ico
file, you also need to ensure that it's a real .ico
file and not some .bmp
renamed to .ico
. You can generate one here based on several image formats. You can however also just use a .png
or .gif
file.
All in all, provided that the file is located in
WebContent
|-- images
| `-- favicon.ico
:
then this should do it:
<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/images/favicon.ico"/>
If you've however placed it as a JSF resource in the /resources
folder as follows
WebContent
|-- resources
| `-- images
| `-- favicon.ico
:
which would make it accessible by <h:graphicImage name="images/favicon.ico">
, then this should do it:
<link rel="shortcut icon" type="image/x-icon" href="#{resource['images/favicon.ico']}"/>
See also:
- Wikipedia - Favicon
- How to reference CSS / JS / image resource in Facelets template?