如何将网页的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">

 

完结!

 

相关文章
|
6月前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
4月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
4月前
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
38 0
|
5月前
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
67 0
|
6月前
|
区块链
html网页title旁边的小图标制作教程
html网页title旁边的小图标制作教程
JavaScrip - tab栏切换案例
JavaScrip - tab栏切换案例
114 0
|
小程序
微信小程序:VantWeapp组件Tab 标签页下划线显示位置不对
微信小程序:VantWeapp组件Tab 标签页下划线显示位置不对
512 0
|
JavaScript 前端开发
使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色
使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色
414 0
使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色
点击element-ui表格中的图标,上方显示具体的文字描述
点击element-ui表格中的图标,上方显示具体的文字描述
点击element-ui表格中的图标,上方显示具体的文字描述