请问怎么让主页图标与网站图标不同 #183
-
站点链接问题描述不知道如何修改下图所示位置的图标 补充信息我想修改的是下图所示位置的图标,之前更改过网站图标,然后也改了apple-touch-icon.png,本以为这俩一个是设置网站图标,一个是设置主页图标的结果好像主页图标和网站图标同步了,请问这该如何修改 |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
在 如果需要设置主页的图标不同于网站图标, |
Beta Was this translation helpful? Give feedback.
-
确实可以独立出一个配置项 |
Beta Was this translation helpful? Give feedback.
在
/src/components/Message/index.vue
中观察到应该是第4-10行定义了主页图标的图片和其下的文本信息,其中图片为siteLogo
;而在第39行代码
const siteLogo = import.meta.env.VITE_SITE_LOGO;
中观察到这里siteLogo
被设置为.env
文件中所定义的VITE_SITE_LOGO
的值,同时VITE_SITE_LOGO
也是被用作网站图标的变量,因此当修改它时主页图标和网站图标会同时变化。如果需要设置主页的图标不同于网站图标,
首先修改
/src/components/Message/index.vue
的第39行,如改为const siteLogo = import.meta.env.VITE_SITE_ICON;
;然后在
.env
文件中添加新变量,如在第9行写上VITE_SITE_ICON = "/images/icon/myicon.png"
,这里的myicon.png
是你放在/image/icon/
目录下的准备作为主页图标的图片,注意到原图标是256×256大小的,你或许可以将准备换用的图标改为相似大小以避免出现适配问题