网页title左边显示网页的logo图标

goodyatou

2013-12-05

打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标，当网页被添加到收藏夹或者书签中时也会出现网页的图标，怎么在网页title左边显示网页的logo图标呢？方法是：找一个或者作一个ico文件，然后把文件的名字改为favicon.ico，像素大小为16*16，所使用的颜色不得超过16色，然后再把favicon.ico放到网站的根目录下就行了。

这样的话浏览器会不停的搜索您的网站的根目录，只要它一发现了名字叫做favicon.ico 这个文件，就会将该图标显示在访问者的地址栏和收藏夹列表中了。

另一种实现方法是在网页HEAD标记中添加如下代码：<HEAD> <LINK REL=”SHORTCUT ICON” HREF=”http://网站地址/favicon.ico”></HEAD> 使用这个做法的话，就不一定要把图形文件放在网站的根目录下面了，你可以放在任何位置，甚至直接连结到其他网站上面的图形文件也可以，而且图形文件的文件名也不一定要叫做 favicon.ico，可以自己随便取。不过要注意的是使用这个做法的话，只有在把有加入上面 HTML 语法的页面加入书签的时候才会有作用。

我开始使用的是第一种方法，当时没有注意到图标的像素大小限制，用的是128*128的ico图标，在Chrome浏览器中显示正常，不过在IE中不显示。所以还是建议按规则生成图标。

goodyatou

0 关注 0 粉丝 0 动态

相关推荐

SpringBoot favicon Chrome设置问题解决

今天学习SpringBoot 设置favicon，使用springboot 2.2.4 版本。浏览器为Chrome,根据文档设置无法实现显示。但是如果更换为Safiri浏览器，可以正确显示，现把Chrome的解决方法写下来。其他资料显示，把favicon.

goodyatou 2020-02-16

SpringBoot favicon.ico网站图标

1.在application.properties下添加spring.mvc.favicon.enabled=false默认true开启 2.关闭后，需要在src/main/resources/static目录下放置自己的favicon.ico文件

xiashulin 2020-02-03

自用代码css获取任意网址的/favicon.ico的方法教程

onerror 事件会在文档或图像加载过程中发生错误时被触发。

goodyatou 2020-02-02

Java web Springboot

　　　　　　3.classpath：/META-INF/resources/ ； classpath：/resources/; classpath:/public/; classpath:/static/; 优先级: resource>static

goodyatou 2020-01-29

favicon.ico 请求在各浏览器的机制

直接访问url时favicon.ico请求在各浏览器的实现是不同的。chrome每次访问请求(自动)firefox第一次访问请求(自动)ie不请求

goodyatou 2013-05-10

uniapp添加网站favicon文件

uniapp 默认创建的项目并没有给我们提供加上网站 favicon 的 ”机会”，但其实官方已经给出解决方法了，使用的是自定义模板。ok，运行下项目我肯可以看到已经添加好了。综上，关于三种场景的使用方式可以自行扩展了，比如增加百度统计代码 > u

Chenliaoyuan 2020-01-19

nginx之升级openssl及自定义nginx版本

favicon.ico 文件是浏览器收藏网址时显示的图标，当客户端使用浏览器问页面时，浏览器会自己主动发起请求获取页面的favicon.ico文件，但是当浏览器请求的favicon.ico文件不存在时，服务器会记录404日志，而且浏览器也会显示404报错。

Caleb0 2019-12-22

在线favicon ico图标文件制作工具

所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如Fi

道北吴彦祖 2014-01-12

JS判断浏览器是否支持某一个CSS3属性

css3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。比如transition的animation-play-state，就只有部分浏览器支持。

Simagle 2014-05-31

Koa2 入门教程

里面demo都是自己写的，保证能跑，至於环境问题我就不敢保证了。懒得写就去上面搬走看，懒得搬就直接看文章，大部分代码连输出信息都给你们了。koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa

kobemini 2019-11-04

jsp页面左上角的小图标

<link rel=”icon” href=”/favicon.ico” mce_href=”/favicon.ico” type=”image/x-icon”>. 　　因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为F

道北吴彦祖 2014-11-11

修改web项目的ico

进入tomcat服务器\webapps\ROOT，然后用自己项目的favicon.ico替换tomcat自带的favicon.ico图片。如果想让图标出现在收藏夹中，就：<link type="image/favicon.ico"

slytop 2016-11-16

大前端

现在把你的网站加入收藏夹再重新打开看看，就是这样简单！如果没有显示,可以在网页的head里加入下面的代码:＜link rel="shortcut icon" href="favicon.ico&

Donven 2019-03-23

vue favicon设置以及动态修改favicon的方法

动态更新之前需要有一个默认的favicon。目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。favicon图片放到该文件夹下。<link rel="shortcut icon" type=&qu

万俟飞技术 2018-12-21

浏览器图标设置

显示在浏览器的图标设置：favicon.ico，当前是哪个页面就展现这个页面设置的图标

wenteryan 2017-01-09

Apache下favicon.ico文件找不到

线上查找一个其他的问题，意外发现错误日志里竟是一堆这样的错误。去这个目录下看了下，确实没有这个文件。favorite”里将显示IE浏览器的图标，与此同时“favicon.ico”不存在的信息（404 not. 貌似是每次请求都会去访问这个目录，继续查证，，

Donven 2010-12-30

为VUE 脚手架中自定义title标签页小图标

二、在项目index.html中引入<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />三、

李大仁 2019-07-01

7.工程架构的优化

到这一章节，一个前端项目的工程架构基本已经搭建起来了，但是还有有需要优化的地方。webpack配置重复client端和server端的配置有重复的地方，优化的手段就是将两个文件中重复的配置项提取出来，然后利用webpack-merge包去合并配置。只需要创

kobemini 2019-07-01

【项目记录】个人站点by Gatsby

SEO做什么设置document head内容，比如title, favicon, description. 借助Context API实现语言切换。react-i18next提供已封装好的高阶组件gatsby-plugin-i18next做初始化处理方式

ccgsteel 2019-06-30

构建多页面应用——单个页面的处理

在看这篇文章之前，需要你对构建多页面应用有一定的基础认识，如果没有的话，可以先参考这篇文章webpack 构建多页面应用。多页面应用是由一个个独立的页面组成。因为所涵盖的知识点较碎，所以就不按照页面的位置结合组成元素来讲，如：head, body, scr

李大仁 2019-06-29

goodyatou

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号