如何在网页标题栏title加入icon图标?

打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的ico图标呢?

方法一:找一个或者作一个格式为ico的图片,然后把图片的名字改为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了。

这样的话浏览器会不停的搜索您的网站的根目录,只要它一发现了名字叫做favicon.ico 这个图片,就会将该图标显示在访问者的地址栏和收藏夹列表中了。

另一种实现方法是在网页HEAD标记中添加如下代码:

标题栏:
<link rel="icon" href="ico地址" type="image/x-icon">
收藏夹:
<link rel="shortcut icon" href="ico地址" type="image/x-icon">

注意:图标要用 16*16 色的。。。

其实很多软件可以制作图标的,你在百度搜一下图标制作软件就可能了。

另外,如果将 16*16 的 bmp 文件改为 ico ,在WINDOWS 支持,但放在浏览器或别的软件就会出错 。

如:<HEAD> <LINK REL=”SHORTCUT ICON” HREF=”http://www.anjoweb.com/favicon.ico”></HEAD>使用这个做法的话,就不一定要把图形文件放在网站的根目录下面了,你可以放在任何位置,甚至直接连结到其他网站上面的图形文件也可以,而且图形文件的文件 名也不一定要叫做 favicon.ico,可以自己随便取。 不过要注意的是使用这个做法的话,只有在把有加入上面 HTML 语法的页面加入书签的时候才会有作用。

我开始使用的是第一种方法,当时没有注意到图标的像素大小限制,用的是128*128的ico图标,在Chrome浏览器中显示正常,不过在IE中不显示。所以还是建议按规则生成图标。

在这里顺便给大家推荐一个在线ICO图标制作的网址:

http://www.ico.la/

原文地址:https://www.cnblogs.com/easyTrue/p/9089673.html

时间: 2024-11-05 13:03:41

如何在网页标题栏title加入icon图标?的相关文章

如何在网页标题栏title加入logo图标?

打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式的图片,将图片命名为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了.这样的话浏览器会不停的搜索您的网站的根目录,只要它一发现了名字叫做favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了.

如何在网页标题栏title加入logo(icon)图标?

打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式的图片,将图片命名为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了.这样的话浏览器会不停的搜索您的网站的根目录,只要它一发现了名字叫做favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了.

在网页标题栏title加入图标?

方法一:制作一个ico格式的图片,将图片命名为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了.这样的话浏览器会不停的搜索您的网站的根目录,只要它一发现了名字叫做favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了. 方法二:在网页HEAD标记中添加如下代码:标题栏:<link rel="icon" href="ico地址" type="im

如何在网页标题栏中插入图片图标

1. 制作ico文件,你可以先制作出gif.jpg.png的都可以,大小在16px*16px最佳2. 在百度搜“在线jpg转ico”,会有这样的网站,你按照步骤操作,得到ico文件3. 将ico文件放置在网站根目录下4. 在你的<head>...</head>添加<link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel=&qu

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

首先要准备自己的图标,图标必须是.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里给大家介绍两个网站 在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 http://www.bitbug.net/   生成的图标背景是图片的背景,图片如果为透明背景,那么生成的ico图标也是透明的 例如:<link rel="shortcut icon" href="/favicon.ico"/>

网页中的title中设置图标

一直想指导每个网页中title旁边的图标是怎么实现的,像这个百度的图标,今天做了一下,很简单,下面记录一下. 做一个图片,一般的图标都可以,把图标后缀改为.ioc格式就OK了,放在项目路径下,保证该图片可以被访问到,然后在你的页面中加上一行代码,像这样: <link href="../../../images/head.ioc" rel="shortcut icon" />,这样就OK了.

练习-为网页添加icon图标;为网页添加关键字/作者;超链接;input的type属性有哪些常用属性值-form表单

  前  言 练习 学习HTML5有两个月了,每天都要学习新的知识,感觉以前学过的有点不熟悉了,复习巩固一下,发表一篇博客园. 本章复习的是HTML5中的基础语言/js的使用 1为网页添加icon图标 <link rel="icon" type="image/x-icon" href="img/logo.png"/> rel:用于标明被连接文件与当前文件的关系.此处选icon,表明被链接图片是当前网页的icon图标 type:表明被连

字体在网页中画ICON图标

用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background-position:xpos ypos;相对位置为左上角的 0 0,向右向下取负值 实例部分的html代码及js代码(通过js来改变背景图的位置) 1 <ul class="sprite"> 2 <li> 3 <s class="s-icon"

在网页中制作icon图标

用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮preferences来设置).它有“Use i”使用<i>标签来画图标:“Use Attribute Selectors”使用属性选择器:“Use a Class”使用class属性. 使用<i>标签时,会将font-family等字体值赋值给所有<i>标签.使用属性选择器时