Vaadin 23 非PWA应用添加favicon：位置与配置方法问询

图标放置位置 #

• 将favicon文件（推荐使用favicon.ico，尺寸选16x16或32x32）放入项目的src/main/resources/META-INF/resources/目录，这是Vaadin默认的静态资源目录，文件会被自动部署到应用根路径。

配置方法 #

有两种方案可选：

1. 默认自动识别
   只要把favicon.ico放到上述目录，Vaadin会自动让浏览器加载这个图标，不需要额外编写配置代码。

2. 自定义HTML配置（适配多格式/多尺寸图标）
   如果用的是其他格式（比如PNG）或需要多尺寸图标，可通过自定义index.html实现：

   • 若项目中没有src/main/resources/META-INF/resources/index.html，先创建该文件
   • 在文件的<head>标签内添加对应的link标签：

     <!-- 基础ICO图标 -->
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
     <!-- 适配苹果设备的图标 -->
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <!-- 不同尺寸的PNG图标 -->
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     

验证方式 #

启动应用后，可通过两种方式确认图标生效：

• 查看浏览器标签栏是否显示你的favicon
• 在浏览器地址栏直接访问图标路径（比如http://localhost:8080/favicon.ico，替换为你的应用实际地址），确认能正常加载图标

内容的提问来源于stack exchange，提问作者alexanoid