怎样设置网站浏览器图标favicon

2021年1月4日 | 分类: 【技术】

【生成】

1. favicon.png & apple-touch-icon.png

使用图形编辑软件生成原始透明背景的PNG图

2. favicon.ico

使用以下在线工具生成ICO图

网址:https://www.favicon-generator.org/

3. favicon.svg

使用以下在线工具生成SVG图

网址:https://tool.gought.com/png2svg-image-converter/

【设置】

在网站的 header 部分设置:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.png" type="image/png" />
<link rel="mask-icon" sizes="any" href="/favicon.svg" color="red">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png"></head>