Using h:outputStylesheet I can embed CSS resources in the HTML head section, but how can I build a <link>
for a favicon image resource which renders HTML like in this example:
HTML output:
<head>
...
<link rel="icon" type="image/png" href="favicon.png" />
...
</head>
The image resource is located in <web>/resources/images
.
If I use direct HTML code in the JSF template like href="/resources/images/favicon.png"
the resource is not found - navigating to /resources/images/favicon.png leads to the error
/resources/images/favicon.png/index.jsf not found
(I have set index.jsf as index page in web.xml which might explain this path)
A favicon is a small image that is located in the browser tab to the left of a webpage's title.
You can open a new window using a data URI. Here's the code: <input type="button" value="test" id="TheButton" /> function Start() { $('#TheButton').
Your webapp is apparently running on a non-empty context path. The leading slash /
brings you to the domain root. Use #{request.contextPath}
to dynamically inline the context path.
<link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.png" />
(note that I fixed the rel
as well to make it crossbrowser compatible)
The href="/resources/images/favicon.png"
is actually looking in the root direcotry of your server http://localhost/resources/images/favicon.png and not inside your web application directory.
Your href location will need to include the web application directory href="/webappname/resources/images/favicon.png"
http://localhost/webappname/resources/images/favicon.png
If your .xhtml file is in the same directory as your resources folder then removing the forward slash at the being should work as well.
href="resources/images/favicon.png"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With