favicon.ico All In One

favicon.ico All In One

link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico"

https://www.cnblogs.com/xgqfrms/p/9914771.html

https://stackoverflow.com/questions/10218178/necessary-to-add-link-tag-for-favicon-ico/40791812#40791812

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />

<link rel="icon" type="image/png" href="http://example.com/favicon.png" />

<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />

<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />

<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

demo

https://cdn.xgqfrms.xyz/

<link href="x-logo.png" rel="shortcut icon" type="image/png">

vuepress

    head: [
        ['meta', {name: 'theme-color', content: '#3eaf7c'}],
        ['meta', {name: 'apple-mobile-web-app-capable', content: 'yes'}],
        ['meta', {name: 'apple-mobile-web-app-status-bar-style', content: 'black'}],
        // icon
        ['link', {href: '../favicon.ico', rel: 'shortcut icon', type: 'image/x-icon'}],
        // ['link', {href: '../logo.png', rel: 'shortcut icon', type: 'image/png'}],
        //  cdn 引入样式
        ['link', {href: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css', rel: 'stylesheet'}],
        // cdn 引入组件库 umd
        // ['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],
        // ['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],
        ['script', {src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js'}],
        ['script', {src: 'https://unpkg.com/element-ui/lib/index.js'}],
        ['script', {src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js'}],
    ],

服务器 favicon.ico 缓存 bug 和解决方案

solutions

1. cdn 引入

2. 改变默认 favicon.ico 文件名，如 favicon-logo,

3. 创建 public 文件夹，添加 favicon.ico

    description: description,
    head: [
        ['meta', {name: 'theme-color', content: '#3eaf7c'}],
        ['meta', {name: 'apple-mobile-web-app-capable', content: 'yes'}],
        ['meta', {name: 'apple-mobile-web-app-status-bar-style', content: 'black'}],
        // icon
        // ['link', {href: 'http://dap-dev.ads.lilith.sh/favicon.ico', rel: 'shortcut icon', type: 'image/x-icon'}],
        ['link', {href: '../favicon-logo.ico', rel: 'shortcut icon', type: 'image/x-icon'}],
        // ['link', {href: '../favicon.ico', rel: 'shortcut icon', type: 'image/x-icon'}],
        // ['link', {href: '../favicon.png', rel: 'shortcut icon', type: 'image/png'}],
        //  cdn 引入样式
        ['link', {href: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css', rel: 'stylesheet'}],
        // cdn 引入组件库 umd
        // ['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],
        // ['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],
        ['script', {src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js'}],
        ['script', {src: 'https://unpkg.com/element-ui/lib/index.js'}],
        ['script', {src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js'}],
    ],

refs

https://www.cnblogs.com/xgqfrms/tag/favicon.ico/

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有️xgqfrms, 禁止转载 ️，侵权必究️！

---