CODEWITHSUNDEEP
htmljsffavicon
gaffcz
gaffcz

Reputation: 3479

Add favicon to JSF project and reference it in <link>

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.

Upvotes: 37

Views: 40431

Answers (4)

Godekere
Godekere

Reputation: 350

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" />

Upvotes: 13

BalusC
BalusC

Reputation: 1109292

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:

Upvotes: 71

Kwesi Aryee
Kwesi Aryee

Reputation: 308

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"/>

Upvotes: 6

Dave Maple
Dave Maple

Reputation: 8412

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" />

Upvotes: 4

Related Questions