`
hyshucom
  • 浏览: 818078 次
文章分类
社区版块
存档分类
最新评论

关于浏览器地址栏和标题栏显示的小图标

 
阅读更多
写这篇文是因为原来我一直觉得这个图标是个很高级的东西啊。。。真的接触了才知道原来只是那么简单。不过这个小小的细节会给网站增色不少哦!

ICO图标的制作

第一步,简单的ICO图标只需要一张图片,JPG、PNG、GIF都可以。可以用GIF就意味着你还可以做个有动画效果的高级图标O(∩_∩)O,不过不推荐这么做,因为GIF动画文件比较大,会延迟页面加载速度。【注意】图片必须为16px * 16px大小。

第二步,使用网上在线图标转换的服务,将图片文件转换为ICO图标。比如:http://free.logomaker.cn/tools/icoMaker.aspxhttp://free.logomaker.cn/tools/icoMaker.aspx【注意】IE同志的要求比较高,自己把后缀名改为ico的做法,他是不承认滴,这个蛋疼的问题曾让我纠结了很久。

在地址栏显示你的图标

将转换好的ICO文件复制到你的网站文件夹根目录下。如果你的网站只使用一个默认的图标,那么就将它命名为favicon.ico,命名为网站域名的名称也可以(举例,域名为www.google.com,则命名为google.ico即可)。一般浏览器会默认读取该文件。有些国内浏览器如360等不显示是因为浏览器设置禁止了显示图标的功能。

如果某页面有特殊要求呢?那么就在页面head标签内部加入以下代码:

<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />

上面代码是控制地址栏图标的,如果想要在用户加入收藏夹时也显示该图标,就加入以下代码:

<link rel="Bookmark" href="/favicon.ico" type="image/x-icon" />
分享到:
评论

相关推荐

    浏览器地址栏中显示自定义小图标

    当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户...

    制作浏览器需要的图标

    3. 地址栏图标:显示当前网址的安全状态,如锁形图标表示安全连接,警告图标提示潜在风险。 4. 书签图标:用于保存和管理喜欢的网页。 5. 扩展图标:来自安装的浏览器扩展,提供额外功能。 6. 菜单和设置图标:用于...

    精心收藏的网页小图标

    6. **网站图标(Favicon)**:Favicon是每个网站的标识,显示在浏览器地址栏、书签列表以及标签页上。设置正确的favicon有助于提升品牌形象。制作favicon时,需考虑到不同浏览器和设备的兼容性。 7. **图标格式**:...

    xp常用小图标文件下载

    "网页图标"这个标签可能是指用于网页设计的小图标,比如favicon,这是一种在浏览器地址栏、书签和历史记录中显示的网站标识。它们通常是16x16或32x32像素的PNG或ICO格式,有助于提升网站的辨识度。 至于“后台管理...

    精选国外游戏人物小图标

    这种格式的图标也可以用作网页的favicon,即浏览器地址栏前的小图标,或者电脑桌面上的应用程序图标。 【标签解析】 1. "下载":说明这些图标资源是可以被用户下载获取的,可能在某个平台上提供,用户可以通过下载...

    闪游浏览器saayaa v3.17 官方版

    改进:界面 - 地址栏 - 空白图标的样式 改进:界面 - 地址栏 - 下拉列表中取消隔行变色 改进:界面 - 开始页、标签页、地址栏下拉列表等各处的关闭按钮样式全部统一 改进:界面 - 去掉了右上角最小化、最大化、关闭...

    隐藏和显示菜单栏的资源

    在这些浏览器中,通常可以通过双击地址栏或按下`F10`键来显示或隐藏菜单栏。 对于开发者而言,隐藏和显示菜单栏的实现涉及到用户界面编程。在大多数编程语言中,如Java、C#或Python,都有相应的API可以控制菜单栏的...

    IE7地址栏恢复成IE6的布局

    标题 "IE7地址栏恢复成IE6的布局" 指的是在Internet Explorer 7(简称IE7)浏览器中,用户希望将地址栏的显示样式调整回IE6时代的样式。在IE7中,微软对界面进行了较大改动,包括地址栏的设计,这可能导致一些习惯于...

    糖果浏览器2.08绿色解压版

    9 当前为空白标签,在地址栏里输入关键词,回车后使用当前页签打开搜索页; 10 文本块超级拖拽变成复制到剪贴板; 11 播放列表选择多首歌曲,复制或移到另一个列表,另一个列表不能立即刷新的bug; 12 增加删除指定...

    信息安全_浏览器魔术.pptx

    在新版本的Chrome, Firefox, 和IE中,当链接没有焦点时,地址栏不会显示,这为攻击者提供了机会。他们可以通过设置CSS属性如box-shadow和border-radius来模拟地址栏,甚至使状态栏区域溢出到页面区域,增加欺骗的...

    ico图标和WinForm图标

    这个小图标出现在浏览器的地址栏、书签和历史记录中,帮助用户快速识别和区分不同的网站。在HTML中,通过标签的rel属性设置为"shortcut icon",可以指定ico图标文件,例如: ```html ``` 此外,ico图标也可以用在...

    百度知道上的小图标有51个

    这些小巧的图形在浏览器标签、书签、地址栏以及各种平台的分享链接中代表网站,为用户提供易于识别的视觉标识。"百度知道"作为中国最大的问答社区,自然也拥有其独特的图标系统,以增强用户对平台的认知。 标题提及...

    比较完整的浏览器源码(6KB)

    在这个小型浏览器项目中,它可能包含了地址栏、导航按钮、页面显示区域等基本元素。 2. brw1.frx:这是VB Form的资源文件,存储了界面上控件的非代码属性,如位图、图标或者控件的位置和大小等。 3. Browser.txt:这...

    常用ICO图标下载打包

    ICO图标是一种特殊的图像格式,主要用于网站的favicon,也就是浏览器地址栏前的小图标,以及桌面快捷方式的图标。这种格式能够包含多个分辨率和颜色深度的图像,以适应不同的显示设备和操作系统。下面,我们将深入...

    ico图标库.ico

    而在网页开发中, favicon.ico文件是每个网站的标准元素,它出现在浏览器的地址栏、书签和历史记录中,增强了网站的品牌识别度。 在"IconLib"这个压缩包文件中,很可能包含了各种类别和风格的ico图标,如通用的...

    好看 ico图标 有用

    这些图标在浏览器地址栏、书签、收藏夹等地方展示,使网站在视觉上更具辨识度。"好看 ico图标 有用"这个标题暗示了这个压缩包包含了一系列美观且实用的ico图标资源。 在描述中提到的“非常多并且非常非常好看的ico...

    网页图标制作工具

    网页图标,通常被称为favicon,是网站在浏览器地址栏、收藏夹、标签页上显示的小图标,为用户提供了直观的品牌识别。制作网页图标是一项重要的网页设计工作,它有助于提升网站的专业形象和用户体验。"网页图标制作...

    精选asp.net 网页、应用程序图标 小图片素材2000个

    ico文件通常用于网站的favicon,即浏览器地址栏和收藏夹中显示的小图标,它可以增加网站的辨识度。1000张网页GIF小图片.rar则可能包含了一系列的GIF动图,GIF格式支持动画,常用于表示动态效果或者循环指示,例如...

    傲游浏览器v3.3.6.2000 [2012-3-22]

    * 扩展标签页切换时不能更新标题和地址栏 3.3.6.600_Beta 2012-03-08 本次更新包含下列新特性: + 傲游截图加入微博分享 + 更新侧边栏的界面展现 + 增加对 HTML5 Application cache 、 Geolocation 和 dom 的 ...

Global site tag (gtag.js) - Google Analytics