css--icon图标

最新推荐文章于 2024-09-17 10:24:42 发布

Aciel_

最新推荐文章于 2024-09-17 10:24:42 发布

阅读量805

点赞数 14

文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/Aciel_/article/details/139889166

版权

今天来学习引入icon图标,我们在浏览网页的时候可以看到网页的导航图标,方便我们一眼认出我们正在浏览的网页,那么这个图标是如何做到的呢?我们接下来就学习一下吧.

1.首先做准备工作,先在某个官网中下载一张logo图片,用来作为我们制作的网页图标,将其命名为XXX.ico的形式

那么怎样找到logo图标,也是一个问题

我们可以在浏览器中进入某个官网,直接在网址后加上 /favicon.ico ,点击进入即可获取logo图标,右键另存为即可获得logo图标了

2. 在.html文件中引入.ico文件

3.在.html文件中运行代码,你就可以得到一个拥有logo图标的网站了

下面是举例,使用csdn官网的logo图标,制作一个网页:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon-csdn.ico" type="image/x-icon">
</head>

<body>

</body>

</html>

运行结果: