`
zccst
  • 浏览: 3319792 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

网页小图标Favicon

阅读更多
zccst转载

Favicon是favorites icon的缩写,亦被称为website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)。Favicon是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标,而目前也有很多网页浏览器支持此功能。浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前。



过去,为保证favicon出现,网站设计者和开发者采用了多种方法。很难明确地保证favicon可以在所有电脑上显示,即使是用同一版本的一种浏览器。

下列代码另一个局限就是它把favicon关联到了某个特定的HTML或XHTML文档上。为避免这一点,favicon.ico文件应置于根目录下。多数浏览器将自动检测并使用它。

建议包含以下两行HTML代码:
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

然而,只有第一行是必须的,因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词(“shortcut”将被忽略,而仅适用“icon”);而Internet Explorer将会把它作为一个单独的名称(“shortcut icon”)。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像(例如动画GIF)时,才有必要添加第二行。
在HTML中,link组件必须在head组件里(在<head>和</head>之间)。
对于XHTML,link必须使用“ />”结束(或“></link>”),而不可以使用“>”结束。
href可以,但不必指向/favicon.ico的位置。它可以指向任何URL。
图像通常可以使用任何被浏览器支持的图像格式。
.ico文件格式通常可以被所有可以显示favicon的浏览器读取。
设置服务器,以发送正确的MIME标识:
ICO 文件 image/vnd.microsoft.icon(或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型,因为多数主流浏览器现在支持它)
GIF 文件 image/gif
PNG 文件 image/png
使用适当的分辨率和色深。
ICO:包括多种分辨率(最常使用的是16×16和32×32,Mac OS X有时使用64×64和128×128)以及位深(比特每像素)(多数使用4、8、24 bpp,即16、256和1600万色)。
GIF:使用16×16,256色。
PNG:使用16×16,256色或24位。
注意:当favicon.ico被置于文档根目录时,将会被一些不处理link组件的浏览器找到,即使没有您的站点上没有指向它的链接。
分享到:
评论

相关推荐

    经典网页小图标 经典网页小图标

    网页小图标,也被称为favicon,是网站不可或缺的一部分,它们通常位于浏览器地址栏、书签、标签页等位置,为用户提供视觉标识,帮助用户快速识别和区分不同的网站。这些图标不仅提升了用户体验,也是品牌形象的一种...

    常用16x16网页小图标

    网页小图标,通常被称为favicon,是网站或应用程序的标识之一,它们在浏览器的地址栏、书签、标签页以及手机应用的主屏幕上显示。这些图标尺寸多样,但16x16像素的图标因其小巧而广泛应用,尤其在早期网页设计中,...

    vue小图标favicon不显示的解决方案

    Vue 小图标 Favicon 不显示的解决方案 一、Vue 小图标 Favicon 的重要性 在 Web 应用程序中,小图标 Favicon 是一个非常重要的组件,它可以帮助用户快速识别网站的身份和品牌形象。然而,在使用 Vue 框架时,小...

    网页制作小图标,常用到的小图标

    - **ICO**:用于网站的favicon(浏览器标签页上的小图标),支持多种尺寸和格式。 3. **图标库的使用**: - **在线图标库**:如FontAwesome、Material Design Icons等,提供大量的免费和付费图标,可以直接复制...

    精心收藏的网页小图标

    在IT行业中,网页小图标(通常称为favicon)是网站设计不可或缺的一部分,它们为用户提供了一种快速识别和记忆网站的方式。这些图标通常是PNG、ICO或SVG格式的图像,大小多为16x16像素或32x32像素,但也可以更大以...

    favicon.ico 图标大全

    【favicon.ico 图标大全】是为了解决网页标识问题而提供的资源集合,它包含了各种流行、个性化的图标设计,适用于不同网站的需求。Favicon(Favorites Icon)是网站的图标,通常显示在浏览器的地址栏、书签栏以及...

    网站浏览器导航图标favicon.ico

    这个小图标是网站品牌形象的重要组成部分,它可以帮助用户快速识别和区分不同的网页。在“网站浏览器导航图标favicon.ico”这个主题中,我们将深入探讨如何创建和设置这个特殊的图标。 favicon.ico 文件格式: ...

    网页小图标收集.rar

    网页小图标,通常被称为Favicon,是每个网站为了增加其独特性和识别度而使用的标志性图像。这些图标在浏览器的地址栏、收藏夹、历史记录以及标签页上显示,使用户能够快速识别出他们访问过的网站。这个名为"网页小...

    1000张网页小图标

    网页小图标,通常被称为favicon,是网页设计中的一个重要元素,为网站提供了一种独特而易于识别的视觉标识。这些小图标不仅增强了用户界面的美观度,还有助于提高品牌识别度,尤其是在浏览器标签、书签、历史记录...

    php 抓取任意网站 favicon 小图标

    在PHP编程中,抓取网站的favicon小图标是一项常见的任务,通常用于在浏览器标签或书签中显示网站的标识。Favicon是“Favorites Icon”的缩写,是一个网站的图标,通常为16x16像素的PNG或ICO格式。本项目提供了一套...

    html常用网页小图标

    总结起来,HTML网页中的小图标是网页设计不可或缺的部分,它们可以通过多种方式引入并进行自定义,以满足不同的设计需求和用户体验。选择合适的图标格式,正确引入和使用图标类库,以及考虑无障碍性都是制作高质量...

    40×40网页常用小图标大全

    在Windows系统中,ICO图标不仅用于桌面程序,还可以作为网站的favicon,即浏览器标签页上的小图标,帮助用户快速识别和区分不同的网页。 这些图标的大全集合为网页设计师提供了极大的便利,他们可以根据项目需求...

    favicon ico网页图标制作 IconWorkshop软件下载.docx

    在 HTML 网页中,可以使用以下代码来引入 favicon.ico 图标:&lt;head&gt; &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt; 这样,网页打开后,图标将会显示为设计的 ICO 小图标。 六、IconWorkshop 软件的...

    1000个网页小图标

    网页小图标是构建网站界面的重要元素之一,它们通常以SVG、PNG或ICO等格式存在,用于表示各种功能、状态或导航指示。在这个“1000个网页小图标”的资源包中,您将找到大量的图标设计,适用于各种网页设计需求。 1. ...

    推荐-网页设计常用小图标

    "推荐-网页设计常用小图标"这个压缩包文件显然包含了设计师在构建网页时可能会用到的各种图标资源。 首先,让我们来看看"preview.jpg",这通常是一个预览图,展示压缩包内所有图标的整体外观。通过预览,设计师可以...

    网页小图标,web程序实用型

    在构建Web程序的过程中,网页小图标(Favicon)是一个不可忽视的细节,它不仅提升了网站的专业形象,还能帮助用户快速识别和记住你的网页。本文将深入探讨网页小图标的重要性和制作方法,以及如何将其有效地应用到...

    html网页设计小图标

    在网页设计中,小图标(通常称为favicon)扮演着至关重要的角色。它们是网页的视觉标识,能够在浏览器的地址栏、书签、历史记录以及移动设备的主屏幕上为用户提供直观的辨识。"html网页设计小图标"这个主题涵盖了...

    ICO转换工具网页中如何设置在网页地址栏中的小图标:

    ICO工具,网页图标可以转换,网页中如何设置在网页地址栏中的小图标: 在浏览器地址栏有csdn有一个"圆圈"图标 如何在自己的jsp网页之中设置? 通常做法是: 要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,...

    网页小图标

    网页小图标,通常被称为favicon,是网站不可或缺的一部分,它们在浏览器的地址栏、标签页、书签以及手机主屏幕上为用户提供了易于识别的视觉标识。这些小图标尺寸多样,包括常见的16*16像素和32*32像素,以适应不同...

Global site tag (gtag.js) - Google Analytics