【网页图标】favicon.ico文件的设置

如何在Vue Cli目录下面设置我们想要的网页图标？
文件目录结构如下：

第一步：打开你的项目文件地址打开找到public文件夹，粘贴.ico文件进去public文件夹
结果图：

第二步：在index.html文件里面添加一行代码：

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

在这里写的href是你的.ico文件的相对地址，怕你不明白这行代码添加到哪里，截了个图如下：

<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="shortcut icon" type="image/x-icon" href="./vesync-icon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head>

到此，重新保存启动Vue项目，访问即可

【网页图标】favicon.ico文件的设置相关推荐

网页图标favicon.ico介绍及使用
目录一.网页图标favicon.ico介绍二.关于shortcut icon和icon代码的区别介绍 1. 常用形式 2. 讨论 3. 关于type属性 4. 相关历史三.制作favicon.i ...
vue中网页图标favicon.ico不显示
1.通过服务器获取在index.html里,添加link,若href是引用服务器上的图片,在不跨域的情况下ok的 <link rel="shortcut icon" typ ...
前端如何设置浏览器网页标签页前的小图标favicon.ico
前端如何设置浏览器网页标签页前的小图标favicon.ico 步骤1: 将小图标favicon.ico文件(或者普通的icon小图片)放在项目的public或者static目录下步骤2: index ...
css网页favicon_网站常用的favicon.ico文件详解
FAVICON.ICO 是网站图标文件,浏览网站时显示在地址栏前边的那个图标关于Favicon 总是被命名为favicon.ico 默认存放在网站web根目录.我们常常看到这样的一个请求/favic ...
设置.exe程序图标（ico文件）
设置.exe程序图标(ico文件) 将需要设置的图片放置到源码目录新建一个.rc文件新建文件–>C++–>source文件–>命名为XX.rc(不能掉了rc后缀) 打开rc文 ...
favicon.ico文件简介
本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...
网站常用的favicon.ico文件
在项目中,经常看到favicon.ico报错,一直不明白是啥个东西,如下图.(如果你访问的页面上没有这个的话, 可以强制刷新下看看) 偶然间看到了一篇文章,才明白是怎么回事, 在此记录下:FAVICO ...
网站的图标 favicon.ico
网站图标是什么浏览器收藏夹和地址栏网站网址前面的个性化图标,常被成为网页小图标.网站缩略图标或者收藏夹图标,是网站的重要识别方式. 如上图中CSDN的C favicon.ico 默认情况网页未指定i ...
typecho图标_Typecho浏览器图标favicon.ico添加方法 - 新手站长网
摘要 Typecho设置浏览器图标favicon.ico的方法,先制作ico图片然后上传到主题所在目录,然后编辑外观在header.php文件中插入shortcut icon代码 Typecho如何添 ...

【网页图标】favicon.ico文件的设置

【网页图标】favicon.ico文件的设置相关推荐

最新文章

热门文章