视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
favicon不只是个图标
2020-11-27 15:36:29 责编:小采
文档


favicon 的概念

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

浏览器的支持

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

一个冷知识

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

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

  • 首先检查格式是否正确:

  • <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    现在格式已经没有那么严格了, 没有 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 里面;
    不是的话需要自己处理这个图标,再引用

    更多favicon 不只是个图标 相关文章请关注PHP中文网!

    下载本文
    显示全文
    专题