Html 将图标添加到 JSF 项目并在 <link> 中引用它

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5978684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:33:56  来源:igfitidea点击:

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

htmljsffavicon

提问by gaffcz

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

如何将网站图标添加到 JSF 项目并在<link>元素中引用它?

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.

但是,它没有显示任何图标。

回答by BalusC

A relative hrefis 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.

href对于当前请求 URI。可能它解析为无效的 URL。您需要添加上下文路径,以便它相对于域根。

Also, the relhas better to be shortcut iconto get it to work in older browsers too.

此外,rel最好shortcut icon也让它在旧浏览器中工作。

In case of using an .icofile, you also need to ensure that it's a real.icofile and not some .bmprenamed to .ico. You can generate one herebased on several image formats. You can however also just use a .pngor .giffile.

在使用.ico文件的情况下,您还需要确保它是一个真实的.ico文件,而不是一些.bmp重命名为.ico. 您可以根据多种图像格式在此处生成一个。但是,您也可以只使用一个.png.gif文件。

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 /resourcesfolder as follows

但是,如果您已将其作为 JSF 资源放置在/resources文件夹中,如下所示

WebContent
 |-- resources
 |    `-- images
 |         `-- favicon.ico
 :

which would make it accessible by <h:graphicImage name="images/favicon.ico">, then this should do it:

这将使 可以访问它<h:graphicImage name="images/favicon.ico">,然后应该这样做:

<link rel="shortcut icon" type="image/x-icon" href="#{resource['images/favicon.ico']}"/>

See also:

也可以看看:

回答by Godekere

I used the following and it works in both IE and Chrome

我使用了以下内容,它适用于 IE 和 Chrome

<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" type="image/x-icon" />   

回答by Dave Maple

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

回答by Kwesi Aryee

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

由于 JSF 使用资源作为存储图像文件夹的容器,因此您可以执行以下操作;

<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico"/>