37

How do I add a favicon to a JSF project and reference it in <link> element?

I tried as below:

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

However, it didn't show any favicon.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
gaffcz
  • 3,469
  • 14
  • 68
  • 108

4 Answers4

71

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:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 1
    Then you have to be more specific about the webbrowser used and the real URLs used. E.g. MSIE? Firefox? Etc. And does http://localhost:8080/contextname/images/favicon.ico return the image? Etc. Is the generated HTML source correct? Rightclick page and *View Source* etc. Do basic debugging, man :) – BalusC May 12 '11 at 14:04
  • 1
    Aha, that's it. Everything is OK, but I don't know why, my project (made in eclipse) is published on http://localhost:13899/PORTAL/index.xhtml instead of http://localhost:8080/PORTAL/default.xhtml I changed the port manually and favicon works. Now I have to find out where to change the port forever. Thank you!!! – gaffcz May 12 '11 at 14:11
13

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" />
Godekere
  • 350
  • 3
  • 8
6

Since JSF uses the resources as a container for storing the image file folder, you can do the following; 

<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico"/>
Kwesi Aryee
  • 310
  • 2
  • 15
  • 1
    That's not mandatory. It's just a free choice. The OP isn't using the resources folder. Only when you would like to use `` and/or `` and/or `@ResourceDependency`, then you **must** use the resources folder. – BalusC Aug 05 '11 at 11:17
  • 3
    For targetting the icon (if stored in the images subdirectory of resources directory), you can also use `href="#{resource['images:favicon.ico']}"` – DenisGL Apr 06 '12 at 07:49
  • `href="#{request.contextPath}/resources/images/favicon.ico"` is more readible – udoline Jun 21 '21 at 15:15
4

As a side note, I always include both of these when referencing a 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" />
Dave Maple
  • 8,102
  • 4
  • 45
  • 64
  • 2
    The first one works on all browsers, the second one fails on MSIE. Just remove the second one. See also http://en.wikipedia.org/wiki/Favicon – BalusC May 12 '11 at 16:08
  • 2
    nice. you just saved me one line per resource for the rest of my days. – Dave Maple May 12 '11 at 16:20