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, 禁止转载 ️，侵权必究️！

favicon.ico All In One的更多相关文章

  1. [转载]网站地址栏小图标favicon.ico的制作方法

    有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将 ...

  2. favicon.ico 404

    favicon.ico是一个图标文件.就是浏览网站时显示在地址栏的那个图标. 类似是百度的 显示在网站地址最前面的一张图片 可以在网站根目录(TOMCAT_HOME/webapps/ROOT/favi ...

  3. favicon.ico 404的问题(title栏前面的图标)

    1.页面中自定义图标 去  http://www.bitbug.net/   定制图片,有32*32,16*16等样式可供选择 2.在页面中引入定义的图片 <link rel="sho ...

  4. PHP获取网站图标（favicon.ico）文件

    有的网站源码中加入了这几行代码: <link rel="shortcut icon" href="/favicon.ico" type="ima ...

  5. Magento后台简单更换favicon.ico

    刚才需要更换网站的favicon.ico,就是浏览器url前面的那个小图标. 网上稍微搜搜一下,然后就震惊了,号多方法是替换文件的方法,而且文件散步在网站的各个角落. 其实,后台是有直接上传更换的方法 ...

  6. 关于favicon.ico，shortcut icon，icon

    引入一篇文章.关于favicon.ico二三事. http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html 一直对favicon ...

  7. favicon.ico应用与正则表达式验证邮箱（可自动删除前后的空格）

    1.favicon.ico制作:favicon.ico可以ps制作;“shortcut icon”中间有一个空格 <head> <link rel="shortcut ic ...

  8. 站点图标favicon.ico

    favicon.ico图标: 网站的favicon.ico需要一次额外的http请求,无论你是否有在html里面添加 link链接 <link rel="shortcut icon&q ...

  9. favicon.ico文件简介

    本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...

  10. 移动端页头推荐配置 出现找不到favicon.ico错误原因和解决方法

    favicon 在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico .为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一: ...

随机推荐

  1. spring data JPA 使用EntityentiListeners实现数据审计功能设计

    当系统中有审计需求时,特别是需要对某些数据进行动态监控时,我们可以使用EntityentiListeners来实现,当然这是基于使用JPA而不是mybatis的情况下. 当前我们的需求场景: 1.需要 ...

  2. CACTI优化-流量接口统计total输入和输出流量数据

    看图,没有优化前(没有显示流入和流出的总流量是多少): 优化后(有显示流入和流出总流量统计): 如何实现呢?本节就是处理的过程小结.第一步:登陆cacti管理平台进入控制台->模板->图形 ...

  3. Python+Selenium+Unittest实现PO模式web自动化框架（7）

    1.TestDatas目录的功能 TestDatas目录下存放的是测试数据,比如:登录功能的测试用例数据. # --^_^-- coding:utf-8 --^_^-- # @Remark:登录测试数 ...

  4. jQuery 移入显示div，移出当前div，移入到另一个div还是显示。

    jQuery 移入移出 操作div 1 <style type="text/css"> 2 .box{ 3 position: relative; 4 } 5 .box ...

  5. Mybatis SQL映射文件详解

    Mybatis SQL映射文件详解 mybatis除了有全局配置文件,还有映射文件,在映射文件中可以编写以下的顶级元素标签: cache – 该命名空间的缓存配置. cache-ref – 引用其它命 ...

  6. 公共错误码 - 支付宝开放平台 https://opendocs.alipay.com/open/common/105806

    公共错误码 - 支付宝开放平台 https://opendocs.alipay.com/open/common/105806

  7. go mod 以及vscode解决被墙的插件问题

    https://blog.csdn.net/weixin_39003229/article/details/97638573?utm_medium=distribute.pc_relevant.non ...

  8. 简单makefile

    https://www.cnblogs.com/prettyshuang/p/5552328.html#_label0

  9. Redis集群拆分原则之AKF

    当我们搭建集群的时候,首先要想明白需要解决哪些问题,搞清楚这个之前,想想单节点.单实例.单机有哪些问题? 单点故障 容量有限 可支持的连接有限(性能不足) ...... 为了解决这些问题,我们需要对服 ...

  10. 扒一扒ELF文件

    ELF文件(Executable Linkable Format)是一种文件存储格式.Linux下的目标文件和可执行文件都按照该格式进行存储,有必要做个总结. 目录 1. 链接举例 2. ELF文件类 ...