在浏览器地址栏http前面添加个性图标

最新推荐文章于 2020-12-14 17:03:59 发布
最新推荐文章于 2020-12-14 17:03:59 发布
阅读量1.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014209975/article/details/43792731
版权

第一步:要准备一个个性的图片,但是一定要是ICo格式的哦，你可以把图片上传到空间里，然后方便调用

ico图标在线生成地址 http://www.bitbug.net/

方法一.在页面的源文件的<head></head>标签之间加入如下代码，注意href是你存放icon图标的地址，根据你网站上存放的位置来写

<link rel="shortcut icon" type="image/x-icon" href="http://115.28.62.0/InviteMeetingWeb/images/front/favicon.ico" media="screen" />

把修改过的网页文件上传到虚拟主机上，然后把做好的ico文件存放到虚拟主机的images这个网站目录里面

大功告成！打开IE浏览器，输入你的网址试试看？是不是已经有了小图标了？ 
小图标的格式一定要是ico格式的，宽度和高度都是16个像素值 
如果按照上面的步骤做完后无法看到小图标，请把IE浏览器的缓存清理掉，清理完缓存之后即可看到小图标。 
小图标的存放位置一定要和代码里的存放位置一致，否则无法显示。



请訆涐尐坤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nginx 前端小图标配置
谦怀
11-15 3071
nginx 前端小图标配置 cat/etc/nginx/conf.d/tg-t1.conf server { listen 8099; server_name localhost; location / { root /opt/nginx/tg-t1; index index.htm index.html; } ...
地址栏小图标
03-11
html与css,前端布局 中 地址栏前的小图标，用<link>jia
设置地址栏前的图标
菜鸟入行
05-24 257
1，找一个16px * 16px 的图片，文件命名为 favicon.ico 2, 将该文件复制到根目录下 3，在页面中加入 &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.ge...
地址栏上加小图标
penghao122
02-02 90
在线生成favicon.ico [ 2005-08-13 17:07:39 | 作者: xbear ] 字体大小: 大 | 中 | 小 在RSS上看到了在线生成favicon.ico 地址: http://www.chami.com/html-kit/services/favicon/ 发现还有更意思的东西 地址: http://www.chami.com/html-kit/servic...
给地址栏加上公司的图标
wawa129的专栏
11-24 79
显示如下： 图标http://localhost:8080/test2 实现方式 只需在登录页面加入： link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" /> 其中favicon.ico为要显示的图标...
如何在IE地址栏显示自己的小图标
李逍遥的专栏
07-13 934
                  可以在收藏夹中显示出你的网站图标，图标可以是16*16、24*24、32*32、48*48的都可以。      第一步，准备一个图标制作软件。       首先您必须了解所谓的图标（Icon）是一种特殊的图形文件格式，它是以.ico 作为扩展名。普通的图像设计软件无法使用这种格式，所以您需要到一个软件下载站点去下载一个图标制作软件。您也可以访问
如何在网页标题栏上显示网站logo
鸥翼科技
11-09 1541
1、第一步，准备一个图标制作软件。首先您必须了解所谓的图标（Icon）是一种特殊的图形文件格式，它是以.ico 作为扩展名。普通的图像设计软件无法使用这种格式，所以您需要到下载一个ico图标工具,本站常用软件既有,推荐强大的Microangelo,可以方便的制作ico图标.汉化修正版下载地址：http://www.skycn.com/soft/2478.html第二步，确定“收藏夹”图标的
浏览器地址栏中显示自定义小图标
12-13
它的主要功能是在浏览器的收藏夹、地址栏以及标签页上显示一个代表网站身份的小图标，帮助用户快速识别和区分不同的网站。Favicon不仅增加了网站的专业感，还能在一定程度上提升用户体验。比如，在Firefox和Internet...
在浏览器地址栏左边添加网站logo图标
04-24
### 在浏览器地址栏左边添加网站logo图标 #### 知识点概述 在现代网页开发中，网站logo不仅能够提升品牌形象，还能增强用户识别度。通过简单的HTML代码设置，可以在浏览器地址栏左侧添加自定义的logo图标（通常为....
给浏览器地址栏加上个性小图标
03-24
标题“给浏览器地址栏加上个性小图标”涉及的是网站个性化设计的一个方面，即浏览器标签页和地址栏前的favicon（Favorites Icon）设置。 favicon是网站的代表性图标，它能让用户在众多标签中快速识别出他们访问过的...
超简单！html网页添加icon，看完就会
crdzg_Amy的博客
12-14 1486
先找一个图片 在线工具转为icon http://www.ico51.cn/（免费高效） 可以随意选择尺寸，保存至网页根目录文件夹里。 html里添加代码 <link rel="shortcut icon" href="./ico/favicon.ico" type="image/x-icon" /> 只需要改动href，改成相对路径，网页根部文件夹下的icon地址，其他都无须动。 这就完成了，可爱的柯基小屁屁~啦啦啦 ...
关于浏览器地址栏和标题栏显示的小图标
hyshucom
04-28 382
写这篇文是因为原来我一直觉得这个图标是个很高级的东西啊。。。真的接触了才知道原来只是那么简单。不过这个小小的细节会给网站增色不少哦！ ICO图标的制作 第一步，简单的ICO图标只需要一张图片，JPG、PNG、GIF都可以。可以用GIF就意味着你还可以做个有动画效果的高级图标O(∩_∩)O，不过不推荐这么做，因为GIF动画文件比较大，会延迟页面加载速度。【注意】图片必须为16px * 16px大...
网站图标Icon显示在浏览器地址http前面-（几个问题的小结）
liuhaolzjtu的专栏 - 学而不思则罔，思而不学则殆。
09-18 2923
网站图标icon显示在浏览器HTTP地址前面                 最近突然好奇很多网页前面都有一个网站的Logo图标（.ico），不知道是如何做出来的，最后在网上查了半天才弄明白，期间遇到了很多问题，最后总算解决了，现在把遇到的问题进行小结，以提高自己的同时分享给大家。（其实解决后感觉这压根就不是个问题，但如果卡在那里半天弄不出来，还是很郁闷的，关键是一个解决问题的思路问题.
如何设置网页地址栏前面的标志favicon图标?
Queenie4bee的专栏
12-20 799
是不是打开一些比较大型的网站，网页的地址栏前面都有该网站的标志， 网页标志ico如何设置? 地址栏标志favicon.ico?  如何让网站的图标出现在地址栏上? 在收藏夹和地址栏前面添加ICO图标?  如：百度，163，新浪等.如图 :37计favicon图标裁图.       37计的favicon图标地址为:  http://www.37ji.com/favicon.i
Tomcat发布项目时，浏览器地址栏图标的问题
热门推荐
斌斌(Java)
03-21 2万+
原文作者：hebo_thu 最近在做一个java网络应用程序，服务器是tomcat。在默认情况下，当用户访问该网络应用时，地址栏图标显示为tomcat猫。我希望把它换成自己的图标，于是研究了一下。在研究过程中，我发现网上的资料大都语焉不详，于是把自己的研究结果分享出来。本文的测试环境为： tomcat 6.0.20 IE6 SP3 Firefox 3.6.13 搜狗高速浏览器 2
修改网站地址栏小图标
热爱生活的专栏
12-31 8206
如果您使用的   WEB   浏览器是   IE5   或以上版本，那么当您将某些网站（如：网易、Yahoo等等）加       入到“收藏夹”后，您是否注意到在这些网站标题的旁边还有一个独具个性的图标呢？这就是       “收藏夹图标”（F   avorites   Icon）。就拿“网易”来说,在标题“Welcome   to   netease   !”   的       左边，
给网站添加地址栏图标
Welcome to here !
05-12 88
声明: 下面这个方法在firefox下经测试,但在ie下只能出来.ico的图片 首先制作一个.ico图标.然后在中间加入上面那句话.可以将favicon.ico换成不同类型的图标,.jpg都行.这样可设置每一个页面的不同图标....
怎样修改地址栏图标
“夜光寒”的博客
07-21 1331
有些浏览器在打开某个网站的时候，会发现它的地址栏前面有个个性图标，而且在将网址添加到收藏夹的时候，前面也会有个个性图标。是怎么做出来的呢？
如何在浏览器地址栏上输入base64编码显示图片
最新发布
04-07
在浏览器地址栏上输入以下格式的代码： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAAdTAAAOpgAAA6mAAAF3CculE8AAAAXVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfX9+AAAAJ3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCksMjM1Njc4OTo7PD0/QEFCQ0RFRkdISUpLTE1OT1BRUlRVVldYWVpjZGVnaGlrbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+/w== 其中，data:image/png;base64,是固定的前缀，表示该数据是一个base64编码的PNG格式图片。 后面紧跟着的一长串字符就是图片的base64编码。 注意：该方法只适用于小尺寸的图片，大尺寸的图片可能会导致浏览器崩溃或运行缓慢。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值