设置网页标签页图标

最新推荐文章于 2023-12-30 11:33:02 发布
最新推荐文章于 2023-12-30 11:33:02 发布
阅读量907 收藏
点赞数
分类专栏： 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>



     

     

    
                
    
        
    
        
    
    
    


    
    
    
      
    
        
    
            
    
              
                
                  失灵魔法师
                
              
            
    
            
    
                关注
              
            
    
        
    
        
    
          
      
            
    • 
              
                
                
                
                
                      0
                
              
              
      点赞
      
            
      • 
            
    • 
              
                
                
                
              
              
      踩
      
            
      • 
            
    • 
              
                
                
                
                
                    0
                
              
              
      
                
      
                  
                    收藏
                  
                
      
              
      
              
      
                
      
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
      
              
      
            
      • 
          
    • 
            
      
              
              
            
      
              
              
              
                    0
              
            
            
      评论
      
          
      • 
          
    • 
          
      • 
          
    • 
            
              
            
              
      
            
              
                
            
      
          
      • 
        
    
      
    
      
    
            
    
                专栏目录
          
    

    

    

    



                
    

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

    
                
    
              
                
    

    
	
    
		
    
			
    
				
					
    为网站设置icon图标用于显示在浏览器标签页最左侧
    
				    
			
    
			
    
				
    
					09-22
				
    
			
    
		
    
		
    
			
				
    icon图标，想必大家对它并不陌生吧，在浏览网页时会看到浏览器标签页的最左侧会有一个小图标，这个正是icon图标。本例为大家介绍下如何为网站设置这个图标
    
			    
		
    
	
    

    
                
    

  
              
    
                

    
	
    
		
    
			
    
				
					
    HTML技能点--设置网页图标标志
    
				    
			
    
			
    
				
    
					程序员大阳
				
    
				
    
					05-09
					
					1万+
					
				
    
			
    
		
    
		
    
			
				
    网页标签页的图标大家想必都不陌生，就是在网页标题文本左侧的图标。

大多数情况下，我们都会去设置网页标题，以便于区分网页。

实际上如果能为网页添加一个图标标志，那就更加高端大气上档次哈。
    
			    
		
    
	
    

    

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

    
		
    
			
		
    

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

    

    
	
    
		
    
			
    
				
					
    网站图标如何设置详细过程
    
				    
			
    
			
    
				
    
					zhuyuyaya的博客
				
    
				
    
					07-28
					
					1803
					
				
    
			
    
		
    
		
    
			
				
    关于网站图标引入的详细介绍。
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    chrome标签页自动轮播
    
				    
			
    
			
    
				
    
					11-15
				
    
			
    
		
    
		
    
			
				
    Chrome浏览器标签页之间的自动切换，解压后，通过扩展程序 加载已解压的扩展程序添加。之后右上角有插件图标，可以设置轮播秒数，点击开始结束按钮控制轮播
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    仿360新标签页jquery代码
    
				    
			
    
			
    
				
    
					09-09
				
    
			
    
		
    
		
    
			
				
    jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码。本段代码适应于所有网页使用，有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器，是一...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    bootstrap-closable-tab可实现关闭的tab标签页插件
    
				    
			
    
			
    
				
    
					01-19
				
    
			
    
		
    
		
    
			
				
    本文实例为大家分享了bootstrap-closable-tab可实现关闭的tab标签页的具体代码，供大家参考，具体内容如下 Demo下载地址：bootstrapclosabletab_jb51.rar 这是从网上找的一款可以关闭的tab标签页插件： 1、这是基于...
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    标签页暂存-crx插件
    
				    
			
    
			
    
				
    
					04-04
				
    
			
    
		
    
		
    
			
				
    语言:English,中文 (简体) 一键暂存当前标签页 一键暂存当前标签页## 普通...## 极速模式按住 Alt 键时点击扩展图标，直接暂存当前标签页而不用打开扩展窗口。-----此项目开源https://github.com/greatghoul/save-tabs/
    
			    
		
    
	
    

    

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

    

    
	
    
		
    
			
    
				
					
    HTML获取和设置标题图标
    
				    
			
    
			
    
				
    
					zouzxxi的博客
				
    
				
    
					06-23
					
					5412
					
				
    
			
    
		
    
		
    
			
				
    favicon.ico 是一种格式，一般用于网页地址栏前或者在标签上以缩略方式显示网站标志。所以，在网页地址后面加 /favicon.ico这样的形式就可以快速获取网页标题的小图标了。


 ：标签定义文档与外部资源的关系rel:表示将要引用的资源类型href:表示指向资源的URLtype:表示资源的MIME类型（文档、文件或字节流的性质和格式）,代码中rel="shortcut icon"是一种固定写法。......
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    html如何设置标签图标2023/12/30
    
					
    最新发布
    
				    
			
    
			
    
				
    
					博学寡闻的博客的博客的无聊的博客
				
    
				
    
					12-30
					
					555
					
				
    
			
    
		
    
		
    
			
				
    使用ico文件：加到<head>里。
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    给网页的标签头部添加小图标方法
    
				    
			
    
			
    
				
    
					weixin_58032613的博客
				
    
				
    
					10-24
					
					1631
					
				
    
			
    
		
    
		
    
			
				
    给网页的标签头部添加小图标方法
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    有语义的布局标签—网页左上角小图标—版心的介绍— CSS书写顺序
    
				    
			
    
			
    
				
    
					小琳爱分享的博客
				
    
				
    
					07-23
					
					330
					
				
    
			
    
		
    
		
    
			
				
    httpshttpshttpshttpshttps。
    
			    
		
    
	
    

    

    
	
    
		
    
			
    
				
					
    设置网页title旁边的小图标详解
    
				    
			
    
			
    
				
    
					Protinx的博客
				
    
				
    
					03-20
					
					9371
					
				
    
			
    
		
    
		
    
			
				
    正式写一个网页时，title旁边一般会有一个独特的小图标，如何自己写这样一个图标呢？

其实很简单的，在html文件中的<head></head>标签中加上：


<link rel="icon" href="img/logo.ico" type="images/x-ico" />


这样一行代码就可以了！

注意：图片的后缀名必须要是 .ico 格式的。

推荐个免费自动生成.ico格式文件的网站：Favicon.ico图标生成器 | 一键免费制作ico图标 - LO
    
			    
		
    
	
    

    

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

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

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





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


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

    

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

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


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

    

    
	
    
		
    
			
    
				
					
    html页面添加标签图标
    
				    
			
    
			
    
				
    
					07-22
				
    
			
    
		
    
		
    
			
				
    要在HTML页面中添加标签图标，你...另外，某些浏览器还支持将图标显示在网页标题前面，你可以通过将`rel`属性值设置为"shortcut icon"来实现：  ```html  ```  希望对你有所帮助！如果你有任何其他问题，请随时提问。
    
			    
		
    
	
    

    
              
    

    
  
    “相关推荐”对你有帮助么？
    
  
    
      
      
          
    • 
              
      
                  
                  
              
      
              
      非常没帮助
      
          
      • 
          
    • 
              
      
                  
                  
              
      
              
      没帮助
      
          
      • 
          
    • 
              
      
                  
                  
              
      
              
      一般
      
          
      • 
          
    • 
              
      
                  
                  
              
      
              
      有帮助
      
          
      • 
          
    • 
              
      
                  
                  
              
      
              
      非常有帮助
      
          
      • 
      
    
      
    
      
    
          
          提交
      
    
      
    
  
    

    

          
    



        
    

    
    

    


    
    

    

      
    
      
    
        
      
    
      
    

    

    
	
    
		评论	
	
    
	
	

    

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

    

    
  
    
    
    
  
    
  
    
    
    
  
    

    

    


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

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