为网页添加 ico图标

什么是 ico图标

ico是Icon file的缩写，是Windows的图标文件格式的一种。图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

ico图标的用途

ico可以作为浏览器首段图标显示，还可以在收藏夹内收藏内容的前段显示小图标。

在实际的应用场景中

通常作为一个刚入门的前端小白来说，写出来的网页是这样的

而一般情况下，当我们打开一个新的网页时看到的却是这样的

咦~~这是咋做到的呢？

其实这并不难，一小段代码就OK啦

通常将这种图标称之为 ico图标

在这里推荐一个ico图标下载网站
图标下载，ICON(SVG/PNG/ICO/ICNS) 图标搜索下载

进入后输入关键词，如：

选择对应的图标后下载需要的图标格式，这里选择的是 ico图标下载

待图标下载完成之后在相应的HTML文档中进行引入添加

在<head>标签内插入<link>标签，并将<link>标签内的 rel="stylesheet" 属性值修改为rel="shortcut icon"然后添加相应的 ico图标 路径

如：<link rel="shortcut icon" href="Images/blog.ico">

保存
浏览器中打开，设置成功

:: 更多内容 ::

> 开发过程中踩坑经验记录

为网页添加 ico图标相关推荐

HTML如何给网页添加ico图标？
一般的网站都有自己的图标(标签页左上角的小图标),如图: 如何添加ico图标? 非常简单,只需要在中添加如下代码: <link rel="Shortcut Icon" hre ...
HTML页面如何添加ICO图标？
HTML页面如何添加ICO图标? 1,我们先准备一个小图标,用的ico格式 2,然后用link标签引入,href 处填ico所在的文件路径 <link rel="shortcut ic ...
HTML如何给网页添加icon图标？
一般的网站都有自己的图标(标签页左上角的小图标),如图: 如何添加ico图标? 非常简单,只需要在中添加如下代码: <link rel="Shortcut Icon" hre ...
php网站标签加小图标,phpweb如何添加ico图标
phpweb如何添加ico图标网站ICO图标对加强用户对自己网站的印象有着不可估量的作用,今天教大家6步轻松添加ICO图标. 第一步.准备工作在添加之前,我们要先准备好一个有意义或者印象深刻的IC ...
网页标题添加ico图标
每个网站都有自己的标题和logo,当访问某个网站时,浏览器窗口会显示该网站的logo+标题,以便清晰的知道我们正在访问的是哪一个网站,如: 转换ico图标实现步骤: 1.先切图,尽量透明背景,png ...
网页地址栏ico图标设置
关于设置网页地址栏前面的ico小图标方法 <link rel="icon" href="../favicon.ico" type="image/ ...
Photoshop 添加ico图标格式支持
Photoshop原生缺乏对ico图标格式的支持,但是我们可以通过添加组件的形式,导出ico文件,下面介绍方法. 首先,打开下述网址下载8bi组件:http://www.telegraphics.co ...
GoLang 编译exe添加ICO图标
转载·记录·学习原文链接:https://blog.csdn.net/qq_24434671/article/details/90233065 我们在做Go开发的时候在Window平台下编译出来的e ...
网页favicon.ico图标设置及制作
favicon图标介绍 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图 ...