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. 聊聊.net应用程序的Docker镜像

    ​要在容器中运行.net应用程序,你需要在容器镜像中安装.net Framework或.net Core 运行时.这不是你需要自己管理的东西,因为微软提供的Docker镜像已经安装了运行时,你可以使用 ...

  2. pycharm2021永久激活

    Pycharm破解版地址: 链接: https://pan.baidu.com/s/1dEkzKRFMaeNjWF4h7y2TdQ 提取码: eqr3  Anaconda地址:版本是python3.6 ...

  3. SpringBoot单元测试的两种形式

    @ 目录 前言 demo环境 springbootTest Junit 总结 前言 最近公司要求2021年所有的项目代码单元测试覆盖率要达到90%,作为刚毕业的小白来说这简直就是噩梦啊,springb ...

  4. Failed to start ssh.service: Unit not found.

    Failed to start ssh.service: Unit not found. 报错内容: [Centos7@localhost ~]$ service ssh start Redirect ...

  5. Uber三代API 生命周期管理平台实现 Uber

    Uber三代API 生命周期管理平台实现 - InfoQ https://www.infoq.cn/article/H8Ml6L7vJGQz0efpWvyJ Uber 三代 API 生命周期管理平台实 ...

  6. redis 主从复制 和集群

    redis集群最少三个节点 之间相互通信ping-pong 投票选举机制 主从复制 的话 最少六个节点 ,主三从三

  7. 两个list<Map<String,String>>放入一个list中

    // public static void main(String[] args) {// List<Map<String, String>> list2 = new Arra ...

  8. 长连接 短连接 RST报文

    https://baike.baidu.com/item/短连接 短连接(short connnection)是相对于长连接而言的概念,指的是在数据传送过程中,只在需要发送数据时,才去建立一个连接,数 ...

  9. HTMl5 特点 标签语法 以及标签

    知识点关于HTML5 的特点以及其标签和标签语法.. <!-- [HTMl5 特点] 向下兼容 用户至上 化繁为简 无插件范围 访问通用性 引入语义 引入原生媒体支持--> <!-- ...

  10. Web信息收集之搜索引擎-GoogleHacking

    Web信息收集之搜索引擎-GoogleHacking 一.信息收集概述 二.Google Hacking 2.1 site 2.2 filetype 2.3 inurl 2.4 intitle 2.5 ...