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. celery应用

    celery---分布式任务队列 Celery是一个简单,灵活且可靠的分布式系统,可以处理大量消息,同时为操作提供维护该系统所需的工具. Celery是一个基于python开发的模块,可以帮助我们对任 ...

  2. css animation @keyframes 动画

    需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes  做动画 html <span class="horn" :class=& ...

  3. 全栈性能测试修炼宝典-JMeter实战笔记（二）

    性能测试初体验 性能测试实质:利用工具去模拟大量用户操作来验证系统能够承受的负载情况,找出潜在的性能问题,分析并解决:找出系统性能变化趋势,为后续的扩展提供参考 测试分类 测试内容中,负载测试.压力测 ...

  4. Windows Server 2012 R2 英文版汉化安装中文语言包教程更改为中文版

    是这样的,一台海外的windows机器默认是英文版的,但是特别费劲用起来,就更改为中文版,因为海外的供应商并不提供中文版镜像. 1.首先打开控制面板,找到add language,拉到底就是有中文,很 ...

  5. JavaWeb——Servlet开发

    什么是Servlet? Servlet运行的过程 Servlet的生命周期 生命周期的各个阶段 Servlet的配置 使用Web.xml配置 使用注解配置 Servlet相关接口 ServletCon ...

  6. 通过Portainer统一管理不同服务器的Docker

    通过Portainer统一管理不同服务器的Docker 一.可视化管理工具Portainer的安装 二.跨服务器管理Docker 2.1开启2375监听端口 2.2Portainer配置远程管理 一. ...

  7. Flutter--Dart基础语法（四）异步

    前言 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,Flutter 开源.免费,拥有宽松的开源协议,支持移动.Web.桌面和嵌入式平台. Fl ...

  8. 配置七牛云图床 + Typora

    配置七牛云图床工具 使用图床+Typora可以方便快捷的撰写图文博客 我这里以七牛云进行示例,讲解如何去配置 七牛云是属于收费图床,目前还在测试,不过对于使用量不大的我来说应该免费是足够了的,不过需要 ...

  9. Flink-v1.12官方网站翻译-P004-Flink Operations Playground

    Flink操作训练场 在各种环境中部署和操作Apache Flink的方法有很多.无论这种多样性如何,Flink集群的基本构件保持不变,类似的操作原则也适用. 在这个操场上,你将学习如何管理和运行Fl ...

  10. Docker下使用centos无法使用systemctl怎么办

    提交正在使用的容器: docker commit [ContainerId] 提交停止正在运行无法使用Systemctl的容器: docker stop [ContainerId] 删除这个容器(可选 ...