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

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.


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?


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


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


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

Related

My favicon for my HTML website does not show

I'm building a website in HTML, and hosting it via GitHub Pages. You can take a look of it here: http://marcuscodes.me/
It has previously shown normally with this code:
I also tried using favicons:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
I have tried adding a ? to my path as shown here:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
However, it still does not show.
I have tried these steps:
Refreshing browser cache
Using different browser
using different device
You can view the full source code here. https://github.com/inkthought-labs/website
Thanks for any help!

In your index.html, you used this to supposedly create the favicon:
<link rel="icon" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png">
However, you forgot the type attribute. It should be:
<link rel="icon" type="image/png" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png" />
Additional note: If permitted by copyright licenses, it is best that you download the image to your local storage and then set the location into the href attribute. In the scenario that the website host removes the image, it will not display.
<link rel="icon" type="image/png" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png" />

Favicon icon not shown on IE11

I have a favicon image generated that I would like to display in IE 11 but for the life of me I cannot figure out how to get it to display in IE 11.
I used a favicon generator at XXX to create my 32x32 favicon image then uploaded it to YYY where I generated the final favicon.ico image file comprising I expect the image in four different sizes.
I then uploaded the favicon.ico image file to my server's root directory.
I inserted the <link rel="shortcut icon" href="../Resouce/images/favicon.ico" type="image/x-icon" /> in the tag pair in my index.html file and uploaded it to my server's root directory. But when I load my home page in IE 11 no favicon is displayed. I am stumped. I have tried clearing my browser cache but still no joy.

Can you show some code, and have you tried:
<link rel="icon" href=" - path to your favicon.ico - " type="image/x-icon" />
<link rel="shortcut icon" href="- path to your favicon.ico -" type="image/x-icon" />
or this:
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">

Unable to set favicon using Jekyll and github pages

I am trying to set a favicon.ico for my github page, but it doesn't work. When I serve it locally I see the standard "empty" favicon and when I push it I see the facebook icon. Why is it so? I have the right favicon.ico in the root directory of my project and I added the line
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
to the relevant default.html. You can see the sources here: https://github.com/drorata/drorata.github.io

I cloned your project from GitHub to take a look at it. After serving it using Jekyll, the favicon did not display, as you noted.
I did some quick testing by converting the favicon file to be a .png rather than a .ico file and changing the favicon declaration to the following, and that was able to get it to display the favicon.
<link rel="shortcut icon" type="image/png" href="/favicon.png">
I tried getting the favicon to work while keeping the .ico file format, and was unable to do so at first. However, I did some quick searching and came across this question, favicon not displayed by Firefox.
In that question the asker had a similar issue with the favicon not showing, and was eventually able to come up with a quick fix by adding a ? to the end of the link to the favicon file in the favicon declaration. I attempted this and it worked. Here is what the favicon declaration would be:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?">
Either of those two methods seem to be able to fix your issue. Personally I'd recommend using the first method, whereby you convert the image to a .png file, as it seems a bit simpler and less hacky.
However, if you want to keep the file as a .ico file then you should read over the question that I linked to before you attempt the second method, as the accepted answer for the question differed from that solution. Also I'm not sure as to why the second method works, and it does seem a little bit hacky.

I believe, currently, the correct way to do this is:
<link rel="shortcut icon" type="image/png" href="{{ "/favicon.png" | prepend: site.baseurl }}" >
Assuming you are using a png. The following also worked for me with a .ico instead of .png:
<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" >
I was working with Chrome on Linux. Neither Excalibur Zero's answer or Ribtoks answer worked for me.

Quick solution
Leave the slash out to make the href address relative.
For example:
Change
<link rel="shortcut icon" type="image/png" href="/favicon.png">
to:
<link rel="shortcut icon" type="image/png" href="favicon.png">
In my github pages site this works perfectly.
Explanation
Use my site https://hustlion.github.io/spanish-cards/ as an example:
When you use <link rel="shortcut icon" type="image/png" href="/favicon.png">, the icon address will be https://hustlion.github.io/favicon.png, because the root of the site (as specified by the slash in /favicon.png) is https://hustlion.github.io/.
However, when you use <link rel="shortcut icon" type="image/png" href="favicon.png">, this is relative to the path https://hustlion.github.io/spanish-cards/, so the icon address will be resolved properly as https://hustlion.github.io/spanish-cards/favicon.png.
Notes
This path issue happens especially when you are using github pages for your specific repository.

I use
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >
And I have favicon in folder images.

Nothing above worked for me, but the steps in this vid (assuming the minima theme) did.
1) Add _includes directory to your project root
Terminal: find _includes/head.html by typing bundle show minima
Copy _includes/head.html from finder into your project root
2) Modify _includes/head.html to include favicon link
The following works for me: <link rel="shortcut icon" type="image/png" href="/favicon.png">
Important: the / in front of /favicon.png matters. Without the /, your website root will have your favicon but no other endpoints will.
3) Add the jekyll-seo-tag plugin to your _config.yml. It should look something like this:
# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
- jekyll-seo-tag

according to documentation:
1) put favicon.ico file into assets/images folder of jekyll project as assets/images/favicon.ico
2) create a _includes/head_custom.html file if not yet exists
3) add needed overriding content:
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/favicon.ico">
Done.

I got it to working using:
<!-- Add favicon -->
<link rel="shortcut icon"
type="image/png"
href="{{ '/favicon.png' | relative_url }}" >
Notes on the snippet:
PNG format for the favicon,
a relative URL in the HTML head tag (in minimia this is head.html).
Adding relative_url tells Liquid to prepend the url and baseurl to the given path.

Just in case someone will be looking for this. Both approaches didn't work for me. But when I appended the site.url, it worked
<link rel="shortcut icon" type="image/png" href="{{site.url}}/favicon.png">

In my case, I had to add the favicon.ico file to the assets folder and reference it as follows:
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico">

I couldn't get the images to display and I use markdown for my posts, appending what worked for me so that others may benefit.
![Description of the image]({{ site.baseurl }}/assets/images/image.png)
This works both locally and on github pages as well

Where do I put my favicon?

I have been searching everywhere for where to put my favicon. Currently I have it in my document root(/var/www/favicon.ico)(I am using apache2 on ubuntu), and my code looks like this in my index.html (The only other file in /var/www)
<link rel="shortcut icon" href="/var/www/favicon.ico" type="image/x-icon" />
Is it supposed to go in my ServerRoot?
I have tried clearing chromes cache, but every time all I get is the same freenom (My domain name provider's) favicon. When I go to my website http://www.website.cf/favicon.ico, I can see their 16*16 icon.
Sorry if I have botched some terminology, I'm a linux/apache newb. Thanks for any help!

Put it in your web root. This is the default location and web browsers will always look there first. Then you won't need to use a <link> tag but if you do you would use:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Based on your cpode sample above that would be in your /var/www directory.

Put the fevicon icon in root directory(Default Location of website) and use this code:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>

Why does my favicon not show up?

The following is used to set the favicon in my html code:
<link rel="icon" type="img/ico" href="img/favicon.ico">
However, the icon does not show. Why?
Note:
I have confirmed that the file is on-disk at the correct path.

Is it really a .ico, or is it just named ".ico"?
What browser are you testing in?
The absolutely easiest way to have a favicon is to place an icon called "favicon.ico" in the root folder. That just works everywhere, no code needed at all.
If you must have it in a subdirectory, use:
<link rel="shortcut icon" href="/img/favicon.ico" />
Note the / before img to ensure it is anchored to the root folder.

Try this:
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Favicons only work when served from a web-server which sets mime-types correctly for served content. Loading from a local file might not work in chromium. Loading from an incorrectly configured web-server will not work.
Web-servers such as lighthttpd must be configured manually to set the mime type correctly.
Because of the likelihood that mimetype assignment will not work in all environments, I would suggest you use an inline base64 encoded ico file instead. This will load faster as well, as it reduces the number of http requests sent to the server.
On POSIX based systems you can base64 encode a file with the base64 command.
To create a base64 encoded ico line use the command:
$ base64 favicon.ico --wrap 0
And insert the output into the line:
<link href="data:image/x-icon;base64,HERE" rel="icon" type="image/x-icon" />
Replacing the word HERE like so:
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AERpOgA5cCcA7vDtAF6jSABllFcAuuCvAK2trQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjMzMzMzNxARYzMzMzVBEEERYzMzNhERZxRGMzZxQEA2FER3cRSAgTNxgEEREIQBMzFIARERFEEzNhERARFAATMzYREBEAhBMzMzEYEBFEEzMzNhEQQRQDMzMzcRgEAAMzMzNhERgIEzMzMyERgEQDMzMzMRAEgEMzMzMxERAEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />

Try adding the profile attribute to your head tag and use "image/x-icon" for the type attribute:
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
If the above code doesn't work, try using the full icon path for the href attribute:
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="http://example.com/img/favicon.ico">