如何将网页的title前面的图标替换成自己公司的图标

简介: 如何将网页的title前面的图标替换成自己公司的图标

步骤1:

首先要准备自己的图标(logo),图标是什么格式无所谓,但是要显示在页面title前面的图标必须是.ico格式的图片,这就需要将自己的图标或者Logo转换成为.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里列两个制作网站:

在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制

http://www.bitbug.net/   生成的图标背景是图片的背景,图片如果为透明背景,那么生成的ico图标也是透明的。

http://www.uupoop.com/ico/?action=make   如果自己的原图片背景是透明的,则生成的ico是带黑色背景的,如果自己的图片有背景,就会生成带自己图片背景的图标。

步骤2:

将生成的ico图标放在自己的项目文件中,在header标签中,引用一下,比如:

<link href="/自己的ico文件名.ico" rel="shortcut icon"/>

例如:<link href="/favicon.ico" rel="shortcut icon"/>

注意:link引入的写法还有要求,自测了一下,总共有以下几种写法:

1、<link rel="shortcut icon" href="../icon/favicon.ico">

2、<link rel="SHORTCUT ICON" href="../icon/favicon.ico">

3、<link rel="icon" href="../icon/favicon.ico">

4、<link rel="Shortcut Icon" href="../icon/favicon.ico">

 

完结!

 

相关文章
|
19天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
8月前
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
163 0
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
网页导航hot图标按钮
网页导航hot图标按钮
104 0
网页导航hot图标按钮
|
JavaScript
网页切出当前标签页时更改标题状态
网页切出当前标签页时更改标题状态
118 0
点击element-ui表格中的图标,上方显示具体的文字描述
点击element-ui表格中的图标,上方显示具体的文字描述
点击element-ui表格中的图标,上方显示具体的文字描述
|
搜索推荐 项目管理 UED
网站页面title标题的设置方法技巧
网站页面title标题的设置方法技巧
1052 0
|
搜索推荐 算法
网页标题设置,为什么在SERP中,显示结果不一致?
在网站建设与运营的过程中,我们经常会遇到各种各样的问题,特别是关于网页标题设置的问题,如果一个页面标题出错,那么,你整个页面建设的过程,就完全是事倍功半,得不偿失。 那么,网页标题设置,为什么在SERP中,显示结果不一致? 根据以往标题优化的经验,我们认为,产生这个问题的原因,主要有如下三方面: 1、标题配置错误 所谓的标题配置错误,不见得就是你在自身网站web页面中显示的标题配置错误,而是在相对应网页模板中title标签配置错误,基于这个原因,通常,搜索引擎都会识别<title></title>标签中的标题,而非是站内显示的标题。
1444 0
|
JavaScript 前端开发 安全
扩展EasyUI在页面中马上显示选中的本地图片
在编写前台页面的时候,有时须要将选中的图片夹杂着其它信息一起上传到服务端,在选着本地图片的时候,为了获得更好的效果,须要将该图片显示在页面上。
2432 0