Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

favicon

jsf

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.

like image 285
gaffcz Avatar asked May 12 '11 13:05

gaffcz


People also ask

Can favicon be URL?

A favicon (/ˈfæv. ɪˌkɒn/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.

What is favicon link tag?

A favicon is a small file containing the one or more icons which are used to represent the website or a blog. It is also known as a tab icon, website icon, URL icon, or a bookmark icon. This icon is actually displayed on the address bar, browser's tab, browser history, bookmark bar, etc.

Can I add favicon in CSS?

You can't set a favicon from CSS - if you want to do this explicitly you have to do it in the markup as you described. Most browsers will, however, look for a favicon. ico file on the root of the web site - so if you access http://example.com most browsers will look for http://example.com/favicon.ico automatically.


2 Answers

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?
like image 196
BalusC Avatar answered Sep 19 '22 12:09

BalusC


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" />    
like image 22
Godekere Avatar answered Sep 21 '22 12:09

Godekere