网页Logo必须用语义化<img>标签置于<header>或<nav>内，配alt="品牌名"、max-height:100%和vertical-align:middle，禁用background-image；favicon需在<head>中用<link rel="icon">双格式声明。
网页 Logo 不是“放张图就行”，关键在语义、可访问性、缩放控制和加载行为。直接用 <img> 最稳妥，但必须配 alt、尺寸约束和垂直对齐；用 background-image 或 <link rel="icon"> 则适用完全不同的场景，混用会出问题。
怎么把图片放进网页头部当 Logo（<header> 或 <nav> 里）
把 <img> 标签直接写进 <header> 或导航容器内部，别塞进 <a> 里再硬调样式——热区错位、语义丢失、响应式变脆都是这么来的。
- 必须加
alt属性，值为品牌名，例如alt="MySite"；不加会导致屏幕阅读器跳过、SEO 损失、图片加载失败时无 fallback - 推荐设
max-height: 100%+height: auto，而不是width: 100%——后者容易撑满整个导航栏，挤压菜单项或拉伸变形 - 若导航栏有固定高度（如
64px），加vertical-align: middle防止默认基线对齐导致底部留白 - Flex 布局下，给父容器设
align-items: center即可居中，不用额外 margin 或 position
为什么不能用 background-image 替代 <img> 放 Logo
Logo 是内容，不是装饰。用 CSS 背景图会让它无法被屏幕阅读器识别、不参与 SEO、加载失败时不显示任何提示，且无法设置 alt 文本。
-
background-image适合 banner 背景、纯装饰性图案；Logo 必须是<img>或内联 SVG - 浏览器对
background-image的加载不阻塞 DOM 解析，但这也意味着它无法被语义化抓取 - 本地开发时用
file://协议打开 HTML，Chrome 会直接禁掉 background 图片加载，而<img>不受影响 - 如果要用 SVG，优先内联（
<svg>...</svg>），支持暗色模式适配、无请求、可缩放无损
如何设置浏览器标签页里的小图标（favicon）
这是独立于页面内容的图标，必须放在 <head> 里，用 <link rel="icon">，不是 <img>，也不是 CSS。
立即学习“前端免费学习笔记（深入）”；
- 路径必须是相对或绝对 URL，例如
href="favicon.ico"；文件需为.ico格式（至少含 16×16 和 32×32 尺寸） - 现代写法推荐双声明：
<link rel="icon" type="image/svg+xml" href="logo.svg">+<link rel="icon" type="image/x-icon" href="favicon.ico">，兼顾新旧浏览器 - 不要只写
rel="shortcut icon"——这是 IE 时代遗留写法，已非标准，部分浏览器可能忽略 - 修改后清浏览器缓存，或加版本参数测试：
href="favicon.ico?v=2"
最容易被忽略的是：同一张图在不同位置承担不同角色——页头 <img> 是内容，标签页 <link> 是标识，背景图是装饰。强行复用路径、格式或加载逻辑，八成会在某次上线后发现 Logo 在 iOS 上不显示、暗色模式下反白、或屏幕阅读器念出“图片”两个字而不是品牌名。
