网站微图标,页标签,favicon.ico

随便打开一个网页:比如 http://www.baidu.com/

可以看到在浏览器的标签头上面显示了一个图标,也就是我们常说的favicon.ico,

由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理,所以还是新建web项目如下:

home.html 代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>home page</title>
    <link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
</head>
<body>
    home page
</body>
</html>

下面两行代码就可以告诉浏览器使用wangyi.ico 作为home.html的图标了:(用第一行就可以有效果了),

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

所以如果你的网站favicon.ico 不起作用,或者是想要让favicon.ico 的兼容性更好,要使用下面几个步骤:

1:检查网站根目录下面的favicon.ico,也就是:http://host/favicon.ico.,而不是http://host/some/favicon.ico.

2:确保<link rel="icon" href="http://host/favicon.ico" type="image/x-icon" />

<link rel="shortcut icon" href="http://host/favicon.ico" type="image/x-icon" />

使用的是http://host/favicon.ico

3:如果你的网站带端口,或者是测试版本的话,那么尤其要注意360等浏览器,它们在请求favicon.ico 的时候会忽略端口号的。

时间: 2025-01-12 11:01:53

网站微图标,页标签,favicon.ico的相关文章

网站如何添加和制作favicon.ico图标教程

经常看到有部分网站没有 favicon.ico 图标,所以今天打算普及一下相关知识,希望还没有 favicon.ico 图标的站长们,能够制作出自己独特的图标. 那么到底什么是favicon.ico? 好搜百科给出的解释:所谓 favicon,即 Favorites Icon 的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是 Favicon 的全部,根据浏览器的不同,Favicon 显示也有所区别:在大多数主流浏览器如 FireFo

Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico文件找不到

今天使用sublime以localhost方式打开html文件时(使用wamp环境提供一个Apache服务器,html文件存在于wamp环境的www文件夹下),出现favicon.ico文件找不到问题 查看D:\wamp\logs文件夹的apache_error.log文件发现以下错误信息: [Thu May 11 16:40:06 2017] [error] [client ::1] File does not exist: D:/wamp/www/favicon.ico, referer:

favicon.ico 404

favicon.ico是一个图标文件.就是浏览网站时显示在地址栏的那个图标. 类似是百度的 显示在网站地址最前面的一张图片 可以在网站根目录(TOMCAT_HOME/webapps/ROOT/favicon.ico)放一张图片 命名为FAVICON.ICO 解决办法:1.页面中自定义图标去 http://www.bitbug.net/ 定制图标图片,有32*32,16*16等样式可供选择 2.在页面中引入定义的图片<link rel="shortcut icon" href=&q

【Web】网站主如何更改网页标签的图标(favicon.ico)

修改web项目的favicon图标,方式有两种:全局方式和局部方式 全局方式: 进入服务器\webapps\ROOT,然后用自己的favicon.ico替换服务器自带的favicon.ico图片 局部方式: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href=&qu

为网站设置图标,显示在浏览器标签页

这句话起什么作用 ? <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />是定义站点的icon图标,跟网页中的图片有本质上的区别,icon是显示在地址栏最前面的一个16*16的小图标 是图片,ico格式的图片用于为网站设置图标,显示在浏览器标签页

在浏览器的标签页显示网站标志图标(或指定图标)的方法

对于不同的浏览器,方法是有差别的1.对于IE或TT浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索2.这大概是所有浏览器通用的在标签页加入指定图标的方法:把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入<link rel="shortcut icon" href="favicon.ico" type="image/x-icon&

为网站添加favicon.ico图标

前言 貌似每次都是等到网站快收尾时才做favicon.ico的,这次也不例外.这年代-- 步骤 1.PS制作正方形图标,格式为jpg.jpeg.gif或png. 2.将图标转换为ICO格式,网上有很多在线转换工具,如http://www.ico.la/old.html . 3.将转换好的ICO格式图标放到网站中. 4.网页代码<head></head>之间添加: <link rel="shortcut icon" href="images/fav

[转]网站地址栏小图标favicon.ico的制作方法

有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可以使你的站点在众多网址中突出显示,对于用户体验起到很好的作用,好了,废话不多说,现在来告诉大家怎么做favicon.ico这个网站图标文件. 虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,这非常糟

&lt;link rel=&quot;icon&quot; href=&quot;images/favicon.ico.png&quot; /&gt; 插入网站最上面标题旁的图标

<link rel="icon" href="images/favicon.ico.png" /> 插入网站最上面标题旁的图标