favicon 不只是个图标

Tecode 发布于2019-08-01 16:04 / 2051人阅读

摘要：的概念中文译名是收藏夹图标，不仅是网站的头像，也是其可以让浏览器的收藏夹中除了显示相应的标题外，还以图标的方式区分不同的网站。这显然是应该予以避免的。

favicon 的概念

favicon 中文译名是收藏夹图标，不仅是网站的头像，也是其可以让浏览器的收藏夹中除了显示相应的标题外，还以图标的方式区分不同的网站。

浏览器的支持

FF 浏览器还支持动态的 favicon，让你的网站更有个性

一个冷知识

favicon 在一定程度上减轻服务器的流量带宽占用，一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。

偶尔设置了 favicon 发现没有显示

首先检查格式是否正确：

现在格式已经没有那么严格了，没有 type 也是可以的

格式没错的话， ctrl + F5 强制清除缓存，就可以看到标签页的图标了。

webpack 怎么打包 favicon ？

如果你是用 html-webpack-plugins 来处理 html的话，这个插件已经提供了 favicon ，你只要写好 favicon 所在的路径就可以了，如：

const htmlPlugin = new HtmlWebpackPlugin({
    favicon: path.resolve(publicDir, "./imgs/favicon.ico")
});
pluginsConfig.push(htmlPlugin);

插件就会自动帮你打包到 html 的 head 里面;
不是的话需要自己处理这个图标，再引用

GPU云服务器云服务器不只是婚姻不只是脚本不只是新影如何给c语言加个图标

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50278.html

【HEXO】从零搭建HEXO博客修改默认主题/参数/favicon 替换个人主页

摘要：下面我以主题举例，覆盖默认主题。其他元素使用相同的方法都可以修改。像这种超链接跳转的修改，在文件中找到直接把属性的值改变即可。准备：搭建环境大致分为以下两步：安装Node.js 安装git 配置Node.js环境下载Node.js安装 Windows Installer 32-bithttps://nodejs.org/dist/v4.2.3/node-v4.2.3-x...

My_Oh_My 2019-08-29 16:59 评论0 收藏0
【HEXO】从零搭建HEXO博客修改默认主题/参数/favicon 替换个人主页

摘要：下面我以主题举例，覆盖默认主题。其他元素使用相同的方法都可以修改。像这种超链接跳转的修改，在文件中找到直接把属性的值改变即可。准备：搭建环境大致分为以下两步：安装Node.js 安装git 配置Node.js环境下载Node.js安装 Windows Installer 32-bithttps://nodejs.org/dist/v4.2.3/node-v4.2.3-x...

Near_Li 2019-08-02 11:43 评论0 收藏0
为VUE 脚手架中自定义title标签页小图标

摘要：效果如图所示一在项目同级目录下添加文件二在项目中引入三配置配置文件文件夹下面在下面两个配置文件中加入具体位置四重新运行项目效果如图所示: showImg(https://segmentfault.com/img/remote/1460000018900485?w=1526&h=834); 一、在项目index.html同级目录下添加favicon.ico文件 showImg(htt...

livem 2019-08-23 16:59 评论0 收藏0
iNotify.js 2 实现浏览器的title闪烁滚动声音提示，弹出通知

摘要：实现浏览器的闪烁滚动声音提示等系统弹出通知。它没有依赖，压缩只有只有，实例预览。下载使用有消息了。文字的方向它的值可以是自动从左到右从右到左。一个图片的，将被用于显示通知的图标。当用户关闭通知时被触发。 JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统弹出通知。它没有依赖，压缩只有只有4.66kb(gzipped: 1.70kb)，...

fantix 2019-08-22 18:44 评论0 收藏0