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

最新推荐文章于 2020-07-02 09:52:39 发布
最新推荐文章于 2020-07-02 09:52:39 发布
阅读量1.3k 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000008916785
版权

clipboard.png

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

步骤一：在图片中显示图标，这里的图片只支持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
如果没有生效关闭浏览器重新打开；

clipboard.png

怎么样获取别人的Logo

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

clipboard.png

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

clipboard.png

weixin_34383618
关注
基础HTML1
TDFSFSF的博客
09-26 871
1、开发工具 chrome谷歌 sublime编译器 DW Huilder WebStorm VS code Photoshop ps软件：熟练的切图，设计海报做电商和UI 浏览器是网页显示运行的平台 常用的：firfox chrome 微软的IE浏览器和Edge浏览器、opera浏览器、safari浏览器等 网页主要由文字、图像和超连接等元素构成，还包含音频、视频、fl...
网页左上角图标 favicon.ico
weixin_34375251的博客
11-26 420
显示网页左上角标志图标 &lt;link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /&gt; 或者 &lt;link rel="shortcut icon" href="images/114dyy.png" /&gt; 貌似图片格式不是问题。   网站的图标一般都放在根目录，
浏览器标签栏logo添加
ZF10001的博客
12-01 165
在<head >中引入link，如下： <head> <link rel="icon" type="image/icon" href="G:\testWeb\Alibaba\IMAGE\favicon.ico"> </head> 将图标转换成icon格式 ico文件在线转换链接;https://www.i...
Html左上角图标
好巧~我看到你了
10-23 1778
<link rel="shortcut icon" href="http://pic.crsky.com/uploadfiles/201806/2018061311255169.png"> 效果图
html在页面标签左边设置logo
zzzgd_666的博客
07-25 1万+
　favicon图标介绍 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,比如下面的百度的logo， 目前主要的浏览器都支持favicon.ico图标 1.生成图标ico 很多网站都支持在线将图片转成ico格式,图片的大小一般是几百k左右 在线生成ico 2. html中设置 当成功生成favicon.ico图...
HTML5中在title标题标签里设置小图标的方法
11-20
这个过程主要涉及到`<head>`标签内的`<link>`标签，用来关联一个图标文件到网页的`<title>`标签。下面将详细介绍如何在HTML5中设置小图标。 首先，我们需要了解`<title>`标签的作用。`<title>`标签位于`<head>`部分...
5、(2分)下列哪些标签可以用于定义一个网页的头部信息？ 口A、<link> B、<head> 口·C、<script> D、<title> E、<meta> F、<header>
06-01
用于定义一个网页的头部信息的标签有 `<link>`、`<head>`、`<meta>`、`<script>` 和 `<title>`。因此，选项A、B、C、D、E都是正确的。 以下是这些标签的作用： - `<link>`：用于在 HTML 文档中引入外部资源，比如 ...
<html> <head> <meta charset="utf-8"> <!-- 设置网页标题 --> <title>京东-欢迎登录</title> <!-- 设置网页图标 --> <link rel="icon" href="img/jd_logo.ico"> <!-- 导入外部样式 --> <link rel="stylesheet" href="css/01京东登录.css"> </head> 解释一下这段代码
06-07
- `<title>`标签用来设置 HTML 文档的标题，它会显示在浏览器的标题栏上。 - `<link>`标签用来引入外部资源，其中`rel="icon"`表示文档的图标，`href="img/jd_logo.ico"`指向图标文件的路径。 - `<link>`标签还...
<div class="container"> <div class="logo"></div> <div class="title"> <div class="green">数据中心</div> <div class="red">安全生产数据大屏幕</div> <div class="white">统计分析</div> </div> <div class="icon"></div> </div> 怎么让logo 父级div的最左边展示
最新发布
07-14
要让 logo 元素在父级 div 的最左边展示，您可以使用 CSS 的 `flex` 布局。以下是一个示例代码： ```html <style> .container { display: flex; align-items: center; justify-content: flex-start; padding: ...
把Logo从默认布局页面上方移动到页面左边
04-20 225
1. 首先选择默认页面结构为左右或者左中右结构（否则何谈移动到左边呢？） 这个可以参照论坛上的另外一篇文章 2. 生成一个新的Block（名字可能为Logo） 1). 打开header的phtml文件，找到Logo输出 [code="html"] ...
Html网页左上角标题图标
斩枫之家
08-03 4179
在head标签中添加以下代码：   其中01.ico是图标的位置
【HTML】在 HTML 的 title 部分添加图片
symsmile
01-21 5774
在 title 元素 后添加 link 元素，具体如下： 北邮人论坛 上面的代码表示：.icon 图片直接放在了目录 WebContent 下面。如果目录结构为 ...WebContent\images\bupt.ico ，则相应地改 href 为：href="images/bupt.ico"。
在html「title」「/title」标签添加图标，网页title左边显示网页的logo图标
weixin_45797488的博客
07-02 1894
步骤一： title左侧的图标，只支持ico格式的图片，所以需要转换图片格式。 图片转换成ico的地址：最好选择16*16（兼容性可以得到保障） http://www.bitbug.net/ 步骤二： 在中加入： ，只需要更改href中的内容即可； 例： <link rel="icon" href="图标地址" type="image/x-icon"> ，只需要更改href中的内容即可； 例： <link rel="icon" href="**images/home.ico.
设置网页中title旁边的小图标
qq_41818857的博客
03-21 1778
网页中title旁边的小图标其实叫favicon.ico 方法一： 要将favicon.ico代码放入网页中，可以在部分加入： （1）<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”> 或 （2）<link rel=”shortcut icon” hre...
【HTML&CSS】【7】网址栏左侧出现的图标Icon
aizhu4795的博客
06-25 469
正文： 1，网址栏左侧出现的图标Icon，就是截图中的小图标 2，方案 <link rel="shortcut icon" href="http://example.com/favicon.ico"><link rel="icon" href="http://example.com/favicon.ico"> 只有第一行是必须的，大部分浏览器...
html怎么在网页标题栏上添加图标
热门推荐
Jorwnpay's Blog
05-10 5万+
需求 像下图这样给网页标题栏加个图标 方法 需要先把图片格式转换为.ico类型 在这个网址在线转换很方便：https://www.easyicon.net/covert/ 在<head></head>加一行来显示图标（注意，如果加入了没有效果，检查一下路径是否正确，文件名是否正确） 在网页标题左侧显示：<link rel="icon" href="图标地址" typ...
如何在HTML5 title标签中插入图片
tlmis的博客
10-29 1万+
title中如何插入图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值