css网页favicon_如何制作网站的favicon

Favicon(Favorites Icon的缩写)，中文叫网页图标，一般为各网站的LOGO(如下图)，从视觉上起到宣传、醒目、易于区分的效果。没有设置favicon的网站，浏览器会赋予默认的图标(比如Chrome的灰色地球)，这样的体验不是很好，那如何制作呢？

详细步骤：

1、准备一张尺寸不小于260 * 260的正方形图片(.png/.jpg、透明/不透明都可以)

2、进入Favicon Generator网站，点击按钮“Select your Favicon image”

3、选择步骤1准备的图片(我准备了一个魔法棒的图片)，上传成功后点击对话框右下角的按钮“Continue with this picture”

4、然后翻到网页最底部，点击按钮“Generate your Favicons and HTML code”，接下来耐心等待十几秒，直到出现按钮“Favicon package”，点击它，下载压缩包

5、压缩包解压后，得到如下文件：

6、将里面的文件放进你网站项目的favicon(新建一个)文件夹里，复制该网页提供的代码(如下)，粘贴到项目首页的

标签内，注意所有的引用路径：./favicon/xxx.ico。至此，普通网页(非单页面应用)制作Favicon就已经结束了

注意：

经实验，在Vue.js项目中(以上方法无效)，仅需引入favicon.ico一个文件即可。将favicon.ico复制到Vue.js项目的src/static文件夹中，index.html页面

标签内引入：

build/webpack.dev.conf.js找到如下所示的代码块，添加一行代码：

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true,

favicon: './static/favicon.ico' // 添加这行！

}),

执行npm run dev重启项目，刷新页面，完成！

css网页favicon_如何制作网站的favicon相关推荐

css网页favicon_网站常用的favicon.ico文件详解
FAVICON.ICO 是网站图标文件,浏览网站时显示在地址栏前边的那个图标关于Favicon 总是被命名为favicon.ico 默认存放在网站web根目录.我们常常看到这样的一个请求/favic ...
张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例图3-1 网站div结构布局示意图 3.2界 ...
div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
张洪斌 html css,网页设计与制作张洪斌刘万辉体设计.doc
网页设计与制作张洪斌刘万辉体设计 <网页设计与制作>课程整体设计课程代码KC11课程性质专业基础课建议学时48适用专业软件技术及相关专业建议教学方式"教.学.做" ...
张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc 1.淮安市高校教学资源共建共享平台CSS样式设计初学网页制作的人经常会觉得对 ...
div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式
大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...
css网页favicon_设置网站图标（favicon）
每个网站都有自己的图标(favicon),除了便于识别与书签收藏,也是一个厂牌吧.浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前. ...
web前端期末大作业(我的家乡广安网页设计与制作)HTML+CSS网页设计实例企业网站制作
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
css网页favicon_自用代码css获取任意网址的/favicon.ico的方法教程
尝试过使用网友说的API接口获取找到的都是失效了暂时就使用这种办法获取如果有好的方法望评论告知谢谢 alt="" width="14" height=& ...

css网页favicon_如何制作网站的favicon

css网页favicon_如何制作网站的favicon相关推荐

最新文章

热门文章