如何使用 JSF 2.0 在 HTML 头部部分输出 favicon <link>？答案

【问题标题】：How can I output a favicon <link> in the HTML head section using JSF 2.0?如何使用 JSF 2.0 在 HTML 头部部分输出 favicon <link>？
【发布时间】：2011-06-16 14:24:38
【问题描述】：

使用 h:outputStylesheet 我可以在 HTML 头部部分中嵌入 CSS 资源，但是如何为 favicon 图像资源构建一个 <link> 来呈现 HTML，如下例所示：

HTML 输出：

<head>
... 
<link rel="icon" type="image/png" href="favicon.png" />
...
</head>

图片资源位于<web>/resources/images。

如果我在 JSF 模板中使用直接 HTML 代码，例如 href="/resources/images/favicon.png"，则找不到资源 - 导航到 /resources/images/favicon.png 会导致错误

/resources/images/favicon.png/index.jsf 没找到

（我已将 index.jsf 设置为 web.xml 中的索引页面，这可能会解释此路径）

【问题讨论】：

标签： jsf resources jsf-2 favicon

【解决方案1】：

您的 webapp 显然在非空上下文路径上运行。前导斜线 / 将您带到域根目录。使用#{request.contextPath} 动态内联上下文路径。

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

（请注意，我还修复了 rel 以使其与跨浏览器兼容）

【讨论】：

【解决方案2】：

href="/resources/images/favicon.png" 实际上是在您的服务器的根目录中查找http://localhost/resources/images/favicon.png，而不是在您的 Web 应用程序目录中。

您的 href 位置需要包含 Web 应用程序目录 href="/webappname/resources/images/favicon.png" http://localhost/webappname/resources/images/favicon.png

如果您的 .xhtml 文件与资源文件夹位于同一目录中，则删除该对象的正斜杠也应该可以。 href="resources/images/favicon.png"

【讨论】：

网络应用名称可以在部署时设置，在硬编码资源中使用它可能很危险。在我的示例中，应用程序直接部署在服务器根http://localhost:8080/
@BalusC 我不是指像 /web/index.xhtml 和 /web/resources/ 这样的资源文件夹