Spring Boot 项目设置网站图标

作者 | 二师兄

来源 | 公众号「程序新视界」

正常情况下,每个网站都会有一个对应的网站图标(Favicon),在浏览器访问网站时,对应的浏览器标签上会出现对应的图标。如下图百度的图标:

对此Spring Boot项目也提供了支持,但不同版本有所区别,在最新版本中的使用,网络上大多数文章已经失效,本篇文章带大家看一下Spring Boot 2.x版本中的使用情况。

Spring Boot不同版本对Favicon的支持

在早些版本中Spring Boot对Favicon进行了默认支持,并且通过如下配置进行关闭操作:

spring.mvc.favicon.enabled=false ## 关闭

默认显示效果如下: 

但在Spring Boot项目的issues中提出,如果提供默认的Favicon可能会导致网站信息泄露。如果用户不进行自定义的Favicon的设置,而Spring Boot项目会提供默认的上图图标,那么势必会导致泄露网站的开发框架。

因此,在Spring Boot2.2.x中,将默认的favicon.ico移除,同时也不再提供上述application.properties中的属性配置。更多详细信息可查看对应的issues:https://github.com/spring-projects/spring-boot/issues/17925。

自定义Favicon

既然在当前版本中Spring Boot不支持默认的Favicon,我们就来看看如何自定义网站的Favicon。

正常情况下,直接将命名为favicon.ico的网站图标放在resources或static目录即可显示,但如果使用的版本无法显示。

首先排除浏览器缓存的问题。在撰写本文时多次遇到浏览器缓存导致无法展示的情况。一般操作步骤,清除浏览器缓存,重启浏览器,即可展示。

同时,如果需要在页面中通过代码进行引入。下面展示使用Thymeleaf时的引入方式:

 
  1. <!DOCTYPE html>

  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">

  3. <head>

  4. <meta charset="UTF-8"/>

  5. <title>Hello Favicon</title>

  6. <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>

  7. <link rel="bookmark" th:href="@{/favicon.ico}" type="image/x-icon"/>

  8. </head>

  9. <body>

  10. <h1>Hello Favicon!</h1>

  11. </body>

  12. </html>

如果使用其他前端框架,可使用如下方式:

 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8"/>

  5. <title>Hello Favicon</title>

  6. <link rel="icon" href="/favicon.ico" type="image/x-icon"/>

  7. <link rel="bookmark" href="/favicon.ico" type="image/x-icon"/>

  8. </head>

  9. <body>

  10. <h1>Hello Favicon!</h1>

  11. </body>

  12. </html>

上述方式有一个弊端,那就是需要在每个展示的页面中都添加对应的代码。

注意事项

在使用的过程中,遇到最多的问题其实就是缓存导致的问题,比如Thymeleaf缓存未关闭、浏览器缓存等。

所以,如果在浏览器中打开网页并没有展示出效果,并不代表程序没起效。这时,可采用直接访问favicoin的形式来验证。

http://localhost:8080/favicon.ico

在浏览器访问上述链接,如果能够展示图标,则说明已经可以正常访问了。

另外,在web项目中,如果自定义了Web相关组件或拦截器也有可能导致无法显示或404,可对其进行有针对性的排查。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. Spring Boot官方文档:https://spring.io/projects/spring-boot 2. Thymeleaf官方文档:https://www.thymeleaf.org/documentation.html 3. Spring Security官方文档:https://spring.io/projects/spring-security 4. Spring Data JPA官方文档:https://spring.io/projects/spring-data-jpa 5. Hibernate官方文档:https://hibernate.org/orm/documentation/ 6. MySQL官方文档:https://dev.mysql.com/doc/ 7. Bootstrap官方文档:https://getbootstrap.com/docs/4.6/getting-started/introduction/ 8. jQuery官方文档:https://api.jquery.com/ 9. Maven官方文档:https://maven.apache.org/guides/ 10. GitHub文档:https://docs.github.com/en/github 11. Git官方文档:https://git-scm.com/doc 12. IntelliJ IDEA官方文档:https://www.jetbrains.com/help/idea/ 13. Eclipse官方文档:https://www.eclipse.org/documentation/ 14. Visual Studio Code官方文档:https://code.visualstudio.com/docs 15. VS Code插件市场:https://marketplace.visualstudio.com/ 16. Postman官方文档:https://learning.postman.com/docs/ 17. Swagger官方文档:https://swagger.io/docs/ 18. Google Material Icons:https://fonts.google.com/icons?selected=Material+Icons 19. FontAwesome Icons:https://fontawesome.com/icons?d=gallery 20. Unsplash免费高清图片:https://unsplash.com/ 21. Pexels免费高清图片:https://www.pexels.com/ 22. Pixabay免费高清图片:https://pixabay.com/ 23. Canva在线设计工具:https://www.canva.com/ 24. Figma在线设计工具:https://www.figma.com/ 25. Adobe XD在线设计工具:https://www.adobe.com/products/xd.html 26. Iconfont阿里巴巴矢量图标库:https://www.iconfont.cn/ 27. 菜鸟教程:https://www.runoob.com/ 28. Java API文档:https://docs.oracle.com/en/java/javase/16/docs/api/index.html 29. Stack Overflow技术问答社区:https://stackoverflow.com/ 30. CSDN技术社区:https://www.csdn.net/

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值