快捷導(dǎo)航

Spring Boot 項(xiàng)目設(shè)置網(wǎng)站圖標(biāo)的方法

更新時(shí)間：2020年02月07日 11:32:52 作者：程序猿DD

這篇文章主要介紹了Spring Boot 項(xiàng)目設(shè)置網(wǎng)站圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

正常情況下，每個(gè)網(wǎng)站都會(huì)有一個(gè)對(duì)應(yīng)的網(wǎng)站圖標(biāo)（Favicon），在瀏覽器訪問網(wǎng)站時(shí)，對(duì)應(yīng)的瀏覽器標(biāo)簽上會(huì)出現(xiàn)對(duì)應(yīng)的圖標(biāo)。如下圖百度的圖標(biāo)：

對(duì)此Spring Boot項(xiàng)目也提供了支持，但不同版本有所區(qū)別，在最新版本中的使用，網(wǎng)絡(luò)上大多數(shù)文章已經(jīng)失效，本篇文章帶大家看一下Spring Boot 2.x版本中的使用情況。

Spring Boot不同版本對(duì)Favicon的支持

在早些版本中Spring Boot對(duì)Favicon進(jìn)行了默認(rèn)支持，并且通過如下配置進(jìn)行關(guān)閉操作：

spring.mvc.favicon.enabled=false ## 關(guān)閉

默認(rèn)顯示效果如下：

但在Spring Boot項(xiàng)目的issues中提出，如果提供默認(rèn)的Favicon可能會(huì)導(dǎo)致網(wǎng)站信息泄露。如果用戶不進(jìn)行自定義的Favicon的設(shè)置，而Spring Boot項(xiàng)目會(huì)提供默認(rèn)的上圖圖標(biāo)，那么勢(shì)必會(huì)導(dǎo)致泄露網(wǎng)站的開發(fā)框架。

因此，在Spring Boot2.2.x中，將默認(rèn)的favicon.ico移除，同時(shí)也不再提供上述application.properties中的屬性配置。更多詳細(xì)信息可查看對(duì)應(yīng)的issues：https://github.com/spring-projects/spring-boot/issues/17925 。

自定義Favicon

既然在當(dāng)前版本中Spring Boot不支持默認(rèn)的Favicon，我們就來(lái)看看如何自定義網(wǎng)站的Favicon。

正常情況下，直接將命名為favicon.ico的網(wǎng)站圖標(biāo)放在resources或static目錄即可顯示，但如果使用的版本無(wú)法顯示。

首先排除瀏覽器緩存的問題。在撰寫本文時(shí)多次遇到瀏覽器緩存導(dǎo)致無(wú)法展示的情況。一般操作步驟，清除瀏覽器緩存，重啟瀏覽器，即可展示。

同時(shí)，如果需要在頁(yè)面中通過代碼進(jìn)行引入。下面展示使用Thymeleaf時(shí)的引入方式：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8"/>
 <title>Hello Favicon</title>
 <link rel="icon" th:href="@{/favicon.ico}" rel="external nofollow" rel="external nofollow" type="image/x-icon"/>
 <link rel="bookmark" th:href="@{/favicon.ico}" rel="external nofollow" rel="external nofollow" type="image/x-icon"/>
</head>
<body>
<h1>Hello Favicon!</h1>
</body>
</html>

如果使用其他前端框架，可使用如下方式：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>Hello Favicon</title>
 <link rel="icon" href="/favicon.ico" rel="external nofollow" rel="external nofollow" type="image/x-icon"/>
 <link rel="bookmark" href="/favicon.ico" rel="external nofollow" rel="external nofollow" type="image/x-icon"/>
</head>
<body>
<h1>Hello Favicon!</h1>
</body>
</html>

上述方式有一個(gè)弊端，那就是需要在每個(gè)展示的頁(yè)面中都添加對(duì)應(yīng)的代碼。

注意事項(xiàng)

在使用的過程中，遇到最多的問題其實(shí)就是緩存導(dǎo)致的問題，比如Thymeleaf緩存未關(guān)閉、瀏覽器緩存等。

所以，如果在瀏覽器中打開網(wǎng)頁(yè)并沒有展示出效果，并不代表程序沒起效。這時(shí)，可采用直接訪問favicoin的形式來(lái)驗(yàn)證。

http://localhost:8080/favicon.ico

在瀏覽器訪問上述鏈接，如果能夠展示圖標(biāo)，則說明已經(jīng)可以正常訪問了。

另外，在web項(xiàng)目中，如果自定義了Web相關(guān)組件或攔截器也有可能導(dǎo)致無(wú)法顯示或404，可對(duì)其進(jìn)行有針對(duì)性的排查。

總結(jié)

以上所述是小編給大家介紹的Spring Boot 項(xiàng)目設(shè)置網(wǎng)站圖標(biāo)的方法，希望對(duì)大家有幫助！

您可能感興趣的文章: