自定义网页头部前面小图标

打开百度首页或其它网页往往会在网页头部看到各式各样的小图标(如下图)，那么如何在自己开发的网站配置那样的图标呢？

1、创建Web工程（这里在Eclipse中创建一个名为sirius的Web工程）

2、在WebContent根目录创建一个名为images的文件夹，将制作好的小图标拷贝到该文件夹中

3、在WebContent根目录创建一个名为index.jsp文件，文件内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" /><title>首页</title></head><body></body>
</html>

注意：jsp文件中<link rel="shortcuticon" href="小图标路径" type="image/x-icon" />即用于设置网页头部所显示的图片

4、通过以上3步，Web工程的目录结构如下图所示：

5、使用Web服务器发布该Web项目（这里使用Tomcat）；打开浏览器，在地址栏输入相应http地址，即可看到效果，如下图：

自定义网页头部前面小图标相关推荐

给网页的标签头部添加小图标方法
1 概述几乎所有的网页标签头部都需要添加小图标,如下图所示. 2 方法如下 <link href="https://csdnimg.cn/public/favicon.ico&quo ...
设置网页title标签小图标
第一次设置网页标签小图标,找了很多帖子方法都不管用. 有的说要放到网页根目录,有的说文件名必须要favicon.ico,有的说必须16x16.其实不必这么麻烦. 下面分享我用的方法(本地图片和cdn都 ...
网页标题的小图标怎么抠下来
一个静态网页,怎样让它"以假乱真"成原网页呢? 主要就是要在标题处添加一个小图标!!! 当然,这个图标怎么"抠"下来呢? 第一种方法:在原网页的地址栏原有地址后 ...
html网页收藏夹小图标,在网页标题栏上和收藏夹显示网站logo的实现方法
在网页标题栏上和收藏夹显示网站logo的实现方法发布时间:2016-03-16 15:30:32 作者:佚名我要评论下面小编就为大家分享一篇在网页标题栏上和收藏夹显示网站logo的实现方 ...
HTML/CSS——网页SVG ICON(小图标)解决方案
一.基本概念 SVG: SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大 ...
前端给网页添加标题和前面的小图标原生html和vue项目
目录效果图如下一.添加标题 1.原生html添加方法 2.vue添加方法二.网页前面的小图标 1.原生html添加方法pc端和移动端同时添加html里面 (1).pc端如下 (2).移动端如下 ...
html网页底部代码实例,HTML网页头部代码实例详解H 这个首页的html5网站
这个首页的html5网站设计代码(尤其是头部那登录注首先先说一下HTML5的代码只是在原有的XHTML基础上增加了一些新的标签(还有一些新的特性,例如数据库和缓存等特性) 以下为此页面的结构代码: 页 ...
在网页中制作icon图标
用字体在网页中画icon图标第一步:获取字体资源 IconMoon网站 https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮 ...
浏览器地址栏中显示自定义小图标及什么是网站 ICO 图标？
所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是Favicon的全部,根据浏览器的不同 ...
Dreamweaver 无法显示网页小图标
HBuilderX .Dreamweaver 2018.2019 升级以后运行网页都是基于服务器 . 可以实现更新并保存代码后无需刷新,自动显示最终效果,多屏操作时,方便许多. 而最近都是使用HB ...

自定义网页头部前面小图标

自定义网页头部前面小图标相关推荐

最新文章

热门文章