在html 标签添加图标，网页title左边显示网页的logo图标

时间 2019-12-12

标签 html 标签添加图标网页 title 左边显示 logo 栏目 HTML 繁體版

原文原文链接

如图在黑色所画圆之中显示一个图标：html

步骤一：在图片中显示图标，这里的图片只支持ico格式，须要转换图片格式.
原始图像能够接受: .jpg .jpeg .gif .png等图像格式
在这个网址http://www.bitbug.net/上传你的原始图片而后生成ico格式图标(百度ico能够找到制做ico图标的网站)；
注意：图标要用 16*16 色的。。。(保证了兼容性，不管在哪一个地方均可以显示)浏览器

步骤二：把图标放到网站根目录
在<head></head>引入图标
网页标题左侧显示：<link rel="icon" href="图标地址" type="image/x-icon">
收藏夹显示图标：<link rel="shortcut icon" href="图标地址" type="image/x-icon">工具

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>一个有梦想咸鸭蛋</title>
            <!--网页标题左侧显示-->
            <link rel="icon" href="1111.ico" type="image/x-icon">
            <!--收藏夹显示图标-->
            <link rel="shortcut icon" href="1111.ico" type="image/x-icon">
        </head>
        <body>
            
        </body>
    </html>

建议把生成的图标名称改掉，在引用；如生成后是bitbug_favicon.ico改成你起的名字.ico
若是没有生效关闭浏览器从新打开；
网站

怎么样获取别人的Logospa

在网站首页打开开发者工具；在Elements里<head></head>里找到
<link rel="icon" href="图标名称.ico" type="image/x-icon">
.net

点击右键在新标签页打开连接；Goolge是Open link in new tab
注意要在href的连接地址右键否则没有Open link in new tab这个选项。code