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

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

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

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(Favorites Icon)设置。 favicon是网站的代表性图标,它能让用户在众多标签中快速识别出他们访问过的...

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

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

    在地址栏中显示自己网站的logo

    标题中的“在地址栏中显示自己网站的Logo”是指在浏览器的地址栏中,网站的URL旁边展示一个自定义的图标,通常是一个小图片,这被称为favicon。这个图标可以增加网站的专业性和辨识度,当用户添加书签或在多标签...

    修改IE地址栏Tomcat 小猫咪图标

    标题“修改IE地址栏Tomcat小猫咪图标”涉及到的是在Web服务器Apache Tomcat的自定义配置,特别是关于改变浏览器地址栏中的网站图标(Favicon)的过程。这个过程通常包括两个主要步骤:创建自定义图标(ICO文件)和...

    制作浏览器需要的图标

    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图标网吧常用

    5. 网页favicon:对于网吧的网络环境,ico图标也常用于网站的favicon,即在浏览器地址栏和书签中的小图标。通过定义路径"&gt;的HTML标签,可以指定网站的ico图标。 6. 图标库与版权:使用ico图标时要注意版权问题,...

    我的小图标

    "我的小图标"这个标题可能是指网页的favicon,这是一种小型的图像文件,通常用于浏览器标签页或者地址栏前,代表网站的品牌或标识。在ASP(Active Server Pages)环境下,我们可以探讨如何在网页中实现图片的正确...

    ico图标和WinForm图标

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

    易语言IP浏览器

    至于"获取图标",这通常指的是获取网站的favicon图标,这是一个代表网站的小图标,常出现在浏览器地址栏或标签页上。浏览器会向服务器发送请求,获取HTML头部的链接指向的图片资源。 "销毁浏览器"则是关闭或结束...

Global site tag (gtag.js) - Google Analytics