Shortcut Icon地址栏显示图标

最新推荐文章于 2023-05-30 11:43:07 发布
最新推荐文章于 2023-05-30 11:43:07 发布
阅读量1.8k 收藏
点赞数
分类专栏： Web 文章标签： internet 浏览器 html 文档 url ie

转自：http://hnhuaxiatang.javaeye.com/blog/792982

 

Shortcut Icon 就是在网站地址的前面出现的那个小图标。

   想要让你的网站显示个性图标，首先需要制作个icon的图标（用PS自己做或者用在线的制作，具体网站见附录 ），
其次需要在页面的“<head></head>”间添加如下代码：

Html代码 复制代码
  1. <!--可以在收藏夹中显示出图标-->   
  2. < link   rel = "Bookmark"    type = "image/x-icon"    href = "favicon.ico" />   
  3. <!--可以在地址栏中显示出图标-->   
  4. < link   rel = "icon"    type = "image/x-icon"   href = "favicon.ico"   />   
  5. < link   rel = "shortcut icon"    type = "image/x-icon"   href = "favicon.ico"   />   
Html代码
  1. <!--可以在收藏夹中显示出图标-->   
  2. < link   rel = "Bookmark"    type = "image/x-icon"    href = "favicon.ico" />   
  3. <!--可以在地址栏中显示出图标-->   
  4. < link   rel = "icon"    type = "image/x-icon"   href = "favicon.ico"   />   
  5. < link   rel = "shortcut icon"    type = "image/x-icon"   href = "favicon.ico"   />    
<!--可以在收藏夹中显示出图标-->
<link rel="Bookmark"  type="image/x-icon"  href="favicon.ico"/>
<!--可以在地址栏中显示出图标-->
<link rel="icon"  type="image/x-icon" href="favicon.ico" />
<link rel="shortcut icon"  type="image/x-icon" href="favicon.ico" />


注意点：

  • 一般ICON的分辨率是16*16，大小1-2k ，建议不宜过大
  • href也可以是绝对路径或URL 比如：href="/favicon.ico" href="http://www.xxx.com/favicon.ico"
  • 当favicon.ico被置于文档根目录时，将会被一些不处理link元件的浏览器找到，即使站点上没有指向它的链接
  • 把图标命名为favicon.ico 一般不用写link就可以应用于站点下的每一个页面文件
  • favicon.ico不是必须要放在根目录，名称也可以自己定义，只是在link中具体的href对应好即可


PS：如果你已经安装上面介绍的步骤更新到网站目录以后，用IE仍然不显示小图标，问题很可能出在缓存的历史记录上。
请选择选择Internet选项，删除浏览历史记录，重新刷新页面一般即可解决。

附录：提供在线制作icon的网站

qqzhuyuehe
关注
专栏目录
​关于shortcut icon和icon代码的区别介绍​
fqfq123456的专栏
02-18 651
<template id="web.layout" name="Web layout">&lt;!DOCTYPE html&gt; <html t-att="html_data or {}"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chro.
关于shortcut icon和icon代码的区别介绍
09-28
sshortcut icon和icon代码之间究竟有何区别呢.下面介绍一下
使用link rel=“shortcut icon“为网页标题加图标
u011200562的博客
07-07 8304
<title>会员卡券</title> <link rel="shortcut icon" href="http://GT/img/favicon.png" type="image/x-icon"> 通过查询资料，网络上有两种写法： 语句一：<link rel="shortcut icon" href="图片地址" /> 语句二：<link rel="icon" href="图片地址" type="image/gif" /> type可以设置
关于网页图标添加shortcut icon与icon
江湖小葡萄
05-08 2617
shortcut icon: <link rel="shortcut icon " href="favicon.ico" type="image/x-icon"> icon: <link rel="icon" href="favicon.ico" type="image/x-icon"> 1,ico是一种图标格式,在网页标题前面出现的图标.网页的图标一般命名为favicon.ico,包括多种分辨率,最常使用的是16×16和32×32;并且存放地址一般在项目的根目录下...
Android 应用Icon快捷(shortcut)功能的详解(一)
05-30 4179
快捷方式可帮助用户快速访问您的应用的某些部分，从而为他们呈现特定类型的内容如何以快捷方式来呈现内容取决于您的用例，以及快捷方式的上下文是属于应用驱动型还是用户驱动型。虽然静态快捷方式的上下文不会更改，而动态快捷方式的上下文会不断变化，但这两种情况下的上下文都由您的应用驱动。如果用户选择了希望应用以哪种方式（例如使用固定快捷方式）向其呈现内容，则此时的上下文是由用户定义的。以下场景展示了各类快捷方式的一些用例：静态快捷方式最适合在用户与应用互动的整个生命周期内使用一致结构链接到内容的应用。
浏览器地址栏中显示自定义小图标
12-13
**浏览器地址栏中显示自定义小图标** **什么是Favicon？** Favicon，全称Favorites Icon，是一个专门设计用于浏览器的特殊图标。它的主要功能是在浏览器的收藏夹、地址栏以及标签页上显示一个代表网站身份的小图标...
HTML5的<link rel="shortcut icon"标签是干什么用的
01-09
这个图标通常出现在浏览器的地址栏左侧、书签栏以及新标签页中，为用户提供了一个快速识别网站的视觉标识。它让网站在众多网页中脱颖而出，增强了用户的浏览体验。 标签是HTML中的一个元数据标签，它主要用于链接...
在地址栏里显示logo的实现方法
10-30
在地址栏里显示网站logo通常被称为“favicon”（Favorites icon的缩写），它是一个网页图标，用于帮助用户识别网站，并在浏览器的地址栏、书签列表、历史记录等地方显示该网站的标志。实现这一功能需要通过简单的...
phpcms在地址栏中显示网站图标的方法(增加网站ico图标)
09-29
通过以上步骤，你便能在PHPCMS中成功实现地址栏的网站图标显示，提升网站的专业性和辨识度。记得图标的设计应该简洁明了，与你的品牌和网站主题相一致，这样更能吸引用户的注意力，加深他们对网站的印象。
shortcut icon图标移动端和PC端设置
sven_chen93的博客
04-06 1683
之前收到客户的需求，需要在移动端和PC端，使用不同的shortcut icon，很简单的几句代码，记录一下 首先在head里引入小图标 <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" /> 然后在index.html文件里最后面，新增一个script标签，我以最大767px作为分界线，...
设置网站地址图标：Link标签中shortcut icon和icon的区别
NerdSully的专栏
03-24 4634
语句一: 语句二 备注:语句一 Shortcut Icon 就是在网址列前面出现的Icon 问题:语句二 icon的作用是怎么?和语句一有什么区别? 指导 过去，为保证favicon出现，网站设计者和开发者采用了多种方法。很难明确地保证favicon可以在所有电脑上显示，即使是用同一版本的一种浏览器。 下列代码另一个局限就是它把favicon关联到了某个特定的HTML或
用link标签实现 shortcut icon（给网页标题前添加一个小图标favicon.ico）
热门推荐
guxuehua的博客
09-19 3万+
用link标签实现 shortcut icon
网页图标favicon.ico介绍及使用
荷塘月色
07-29 1万+
favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上，是展示网站个性的缩略logo标志，也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的。
tomcat 浏览器导航栏图标怎么更改
最新发布
10-24
在Java中，Tomcat本身并不直接处理浏览器的导航栏图标（也称为Favicon）。但是，你可以通过修改部署的应用程序中的资源文件来更改显示在浏览器地址栏或新标签页上的小图标。 Favicons通常是一个`.ico`、`.png` 或 `.jpg` 文件，大小一般为16x16像素或32x32像素。要更改Tomcat应用程序的Favicon，你需要做以下步骤： 1. **创建或找到你的图标**： - 创建一个新的图标文件，确保它是.ico格式，因为它可以在所有平台上正确显示。 - 如果已经有合适的图标，确保其放在Web应用的根目录下，例如`webapps/yourapp/images/favicon.ico`。 2. **上传到服务器**： - 将新的图标文件上传到你的Tomcat服务器上，替换原有的Favicon文件。 3. **配置Web应用**： - 对于WAR（Web Archive）文件，你需要更新它的`META-INF/web.xml`文件，添加以下元数据，指定新的图标路径： ```xml <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" /> ``` - 如果是使用`<Context>`元素配置Tomcat，则在`context.xml`文件中类似设置： ```xml <ResourceLink name="favicon.ico" global="favicon.ico" webpath="/images/favicon.ico"/> ``` 4. **重启Tomcat**： - 更改后，需要重启Tomcat服务使更改生效。 现在，当你访问这个Web应用时，浏览器应该会使用你设置的新图标了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值