设置网页标签页图标

最新推荐文章于 2023-08-04 10:47:53 发布
最新推荐文章于 2023-08-04 10:47:53 发布
阅读量943 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LSQHTTP/article/details/48174619
版权

为什么要设置 favicon图标？
  1. 以图像形态显示，比文字显示更能加深浏览者的记忆和印像。
  2. 可以塑造网站的品牌。这也是在网站推广的范畴之内。
  3. 可 以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站，给人以更专业的感觉。
设置方法： 

<head> 
    <link rel="icon" href="images/favicon.gif">
    <link rel="shortcut icon" href="images/favicon.ico">
</head>



     

     

    
                
    
        
    
        
    
    
    
  

    
    
    
      
    
        
    
            
    
              
                
                  失灵魔法师
                
              
            
    
            
    
                关注
              
            
    
        
    
        
    
          
      
    
      
    
            
    
                专栏目录
          
    

    

    

    


                
    

    
	
    
		
    
			
    
				
					
    如何设置浏览器标签图标
    
				    
			
    
			
    
				
    
					m0_52116878的博客
				
    
				
    
					03-15
					
					3872
					
				
    
			
    
		
    
		
    
			
				
    如何设置浏览器标签图标
    
			    
		
    
	
    

    
                
    
            
              
    

    
	
    
		
    
			
    
				
					
    HTML设置标签栏的图标
    
					
    最新发布
    
				    
			
    
			
    
				
    
					不起眼小菜菜的博客
				
    
				
    
					11-14
					
					1996
					
				
    
			
    
		
    
		
    
			
				
    3.将图标文件置于......强制刷新一下网页就行了....
    
			    
		
    
	
    

    
              
    

  
              
    
                

    
	
    
		
    
			
    
				
					
    html标签页图标
    
				    
			
    
			
    
				
    
					weixin_34006468的博客
				
    
				
    
					01-08
					
					1181
					
				
    
			
    
		
    
		
    
			
				
     在head标签加入如下内容：

1 &lt;!--可以在收藏夹中显示出图标--&gt;
2 &lt;link rel="Bookmark" type="image/png" href="images/tab.png" /&gt;
3 &lt;!--可以在地址栏中显示出图标--&gt;
4 &lt;link rel="icon" type="image/
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    浏览器网页标签页图标显示
    
				    
			
    
			
    
				
    
					喜欢前端的后端 MelodyJerry
				
    
				
    
					02-04
					
					1722
					
				
    
			
    
		
    
		
    
			
				
    对于IE浏览器：把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下，浏览器会自动检索
对于其他浏览器通用的在标签页加入指定图标的方法：把favicon.ico图标放到网站根目录下，在网页的``<head></head>``中加入

1234<!-- 地址栏显示 --><link rel="Shortcu...
    
			    
		
    
	
    

    
		
    
			
		
    

    
	
    
		
    
			
    
				
					
    设置网页title标签小图标
    
					
    热门推荐
    
				    
			
    
			
    
				
    
					qq_35159277的博客
				
    
				
    
					06-27
					
					4万+
					
				
    
			
    
		
    
		
    
			
				
    第一次设置网页标签小图标，找了很多帖子方法都不管用。

有的说要放到网页根目录，有的说文件名必须要favicon.ico，有的说必须16x16。其实不必这么麻烦。

下面分享我用的方法（本地图片和cdn都是支持的）：





直接再title标签下面贴上这句代码（图片地址换成你自己的图标）：


<link rel="icon" href="图片路径/logo.png" sizes="3...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    web标签页,web网页的图标设置
    
				    
			
    
			
    
				
    
					spring mongodb maven
				
    
				
    
					01-22
					
					5697
					
				
    
			
    
		
    
		
    
			
				
    当我们开发自己的网站的时候,希望给自己的网站设计一个logo,这个logo可以在web页面上显示像下图那么问题来了如何实现.
首先我们需要一张图片而这张图片格式是:favicon.ico,后缀名为ico
把图片放到网站的网页上
代码怎么实现,小伙伴肯定关心这个.
解决问题
图片问题,我们需要一个可以将普通图片格式转化为.ico格式,那么就有在线和离线两种方式去生成.OK我选的是在线生成.地址:图片转
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    为网站设置icon图标用于显示在浏览器标签页最左侧
    
				    
			
    
			
    
				
    
					09-22
				
    
			
    
		
    
		
    
			
				
    在讨论网站图标（icon）时，我们通常指的是一个小型的图像文件，它出现在浏览器的地址栏以及浏览器标签页的最左侧。这种图标被称作favicon（favorite icon的缩写），它的主要作用是增强品牌识别度，让用户即使在有多...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    HTML5中在title标题标签里设置小图标的方法
    
				    
			
    
			
    
				
    
					11-20
				
    
			
    
		
    
		
    
			
				
    完成以上步骤后，浏览器就会在地址栏、书签和新标签页中显示设置的小图标。值得注意的是，为了让图标生效，浏览器可能需要刷新缓存或者清除浏览器数据，因为有些浏览器可能会缓存之前的图标。  总的来说，为HTML5...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    设置网页标题图标
    
				    
			
    
			
    
				
    
					wltsysterm的博客
				
    
				
    
					02-17
					
					333
					
				
    
			
    
		
    
		
    
			
				
    &lt;link rel="shortcut icon" type="image/x-icon" href="&lt;%=path%&gt;/login/snow.ico" /&gt;
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    给网页设置图标
    
				    
			
    
			
    
				
    
					moon_butter的博客
				
    
				
    
					08-18
					
					192
					
				
    
			
    
		
    
		
    
			
				
    看，给网页加个图标后是不是超酷！

超级简单！！！！

<title></title>

<link rel="icon" type="image/x-icon" href="img/log.ico"/>

注：使用的图片一定要是.ico格式

    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    给网站标签页设置小图标
    
				    
			
    
			
    
				
    
					寂寥人生
				
    
				
    
					01-12
					
					378
					
				
    
			
    
		
    
		
    
			
				
    <link rel="shortcut icon" href="icon.png" type="image/x-icon">

png图标下载
我建议直接阿里的iconfont搜索关键字就能找到符合的图标，选择多。
png在线转ico
https://www.aconvert.com/cn/icon/png-to-ico/


    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    浏览器标签页icon
    
				    
			
    
			
    
				
    
					你蠢哭我咯的博客
				
    
				
    
					10-11
					
					1268
					
				
    
			
    
		
    
		
    
			
				
    <link rel="shortcut icon" href="/static/img/logo.ico" type="image/x-icon">
<link rel="icon" href="/static/img/logo.ico" type="image/x-icon">
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    在浏览器的标签页显示网站标志图标
    
				    
			
    
			
    
				
    
					宁静致远
				
    
				
    
					01-20
					
					3195
					
				
    
			
    
		
    
		
    
			
				
    一、在浏览器的标签页显示网站标志图标

我们通常希望将浏览器里的Tab选项卡的图标换成自己网站的logo图片，这样看起来更真实和有信任感，可以在<head></head>中添加linkrel="shortcuticon"为网页标题添加标志图标，


<head> 
1：<link rel="shortcut icon" href="图片地址" />
2：<link rel="icon" href="图片地址" type="image/gif" /&g..
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    网站页面上标签页小图标的添加方式
    
				    
			
    
			
    
				
    
					Wisver的博客
				
    
				
    
					09-29
					
					8219
					
				
    
			
    
		
    
		
    
			
				
    在head标签中添加：
&lt;link rel="Bookmark" type="image/x-icon" href="b/img/icon/favicon.ico" /&gt;
&lt;link rel="icon" type="image/x-icon" href="b/img/icon/favicon.ico" /&gt;
&lt;link
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    Nginx的index.html格式语法+网页跳转+标签页图标配置
    
				    
			
    
			
    
				
    
					作者的博客园已搬家到CSDN，访问博客园主页将默认跳转至CSDN
				
    
				
    
					11-03
					
					1567
					
				
    
			
    
		
    
		
    
			
				
    部署的静态页面，有些时候需要做一些笔记便于查看，用格式来美化下更加便于阅读，还有网页跳转等便捷使用的功能~
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    如何给网站设置自定义图标（标签页显示，收藏夹显示）
    
				    
			
    
			
    
				
    
					apple_54470279的博客
				
    
				
    
					04-23
					
					1万+
					
				
    
			
    
		
    
		
    
			
				
    在网站根目录下准备一张名为 favicon 的图片，图片格式为 ico 。图片像素的最小尺寸为：16*16   使用这种方式，网页会自动选取这张图片作为图标，并且该网站目录下的所有网页的图标都会显示为这张图片。
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    获取网页标签图标favicon
    
				    
			
    
			
    
				
    
					m0_67273164的博客
				
    
				
    
					08-04
					
					3962
					
				
    
			
    
		
    
		
    
			
				
    像这种图标和网站域名不一样的，需要用js来获取，link标签有两种，一种是rel="icon"，一种是rel="shortcut icon"，这样就能获取到 favicon.ico啦，实际第一种也能通过这种方式来获取，如果还有其他类型的，欢迎留言。像这种favicon.ico图标可以直接用。
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    网页的一些标签
    
				    
			
    
			
    
				
    
					qq_38934395的博客
				
    
				
    
					01-20
					
					481
					
				
    
			
    
		
    
		
    
			
				
    表格： 。行， 列。背景颜色，表格边框，表格字间距，表格边框间距；

超链接：

表单：

文本框：

密码框：

单选按钮：

复选按钮：

列表：

文本域：

提交按钮：

重置按钮：

下拉列表：...

optgroup属性：用于定义选项组

option属性：size(指定下拉菜单的可见选项数)

multiole属性：当值等于m
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    修改网页标签小图标
    
				    
			
    
			
    
				
    
					life
				
    
				
    
					06-17
					
					582
					
				
    
			
    
		
    
		
    
			
				
    修改网页标签小图标

在<header>标签里增加
<link rel="icon" href="img/logoSmalls.png" type="image/x-icon" />
<link rel="shortcut icon" href="img/logoSmalls.png" type="image/x-icon" />
<link rel="bookmark" href="img/logoSmalls.png" type="image/x-icon" /
    
			    
		
    
	
    

    
              
    

    

          
    



        
    

    
    

    


    
    

    

      
    
      
    
        
      
    
      
    

    

    
	
    
		评论	
	
    
	
	

    

    
  
    
    
    
      添加红包
      
    
    
    
    
      
    
        
        
    
          
          
        
    
        
    请填写红包祝福语或标题
    
      
    
      
    
        
        
    
          
          个
        
    
        
    红包个数最小为10个
    
      
    
      
    
        
        
    
          
          元
        
    
        
    红包金额最低5元
    
      
    
      
    
        
        
    
          当前余额3.43元
          前往充值 >
        
    
      
    
      
    
        
    
          需支付：10.00元
        
    
        
        
      
    
    
    
  
    

    

    
  
    
    
    
  
    
  
    
    
    
  
    

    

    


    
  
    
    
    
      
    
        
    
          
    
            
            
    成就一亿技术人!
    
          
    
          
    
        
    
        
    
          
    
          
    
            领取后你会自动成为博主和红包主的粉丝
            规则
          
    
        
    
      
    
      
    
        
    
          
    
            
              
            
            
    
              
    hope_wisdom
     发出的红包
            
    
          
    
        
    
        
    
          
    
          
    
          
    
        
    
      
    
    
    
    
    
  
    

    
      
      
    
      
    实付元
    
      
    使用余额支付
    
      
    
        
    
          
    
            
            点击重新获取
          
    
        
    
        
    扫码支付
    
      
    
      
    
        
          
            
          
          
        
      
    
      
    
        
        钱包余额
          0
          
    
            
            
    
              
    
                
    抵扣说明：
    
                
     1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
     2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
    
              
    
            
    
          
    
      
    
      余额充值