网页图标favicon：如何给网站加上小图标？

一、小图标，大门面

不知道你有没有注意过，浏览器每个标签页的左侧，都有一个小小的图标——它就是 favicon（ favorites icon 的缩写，意为"收藏夹图标"）。

这个图标虽然很小（通常只有16×16像素），但它的作用可不小。它就像网站的"头像"，是品牌形象的重要组成部分。在一堆打开的标签页中，用户通过favicon就能快速识别哪个是你的网站。收藏网站时，favicon也会和标题一起保存下来。

这篇文章，我们就来聊聊favicon这个小东西——它是什么、有什么用、怎么做、怎么加到网站上，以及有哪些注意事项。

1.1 什么是favicon

favicon是显示在浏览器标签页、地址栏、书签、历史记录中的小图标，用来标识一个网站。

#mermaid-svg-0oLr9oIq6Yk31nmn{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-0oLr9oIq6Yk31nmn .error-icon{fill:#552222;}#mermaid-svg-0oLr9oIq6Yk31nmn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0oLr9oIq6Yk31nmn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0oLr9oIq6Yk31nmn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0oLr9oIq6Yk31nmn .marker.cross{stroke:#333333;}#mermaid-svg-0oLr9oIq6Yk31nmn svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0oLr9oIq6Yk31nmn p{margin:0;}#mermaid-svg-0oLr9oIq6Yk31nmn .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-0oLr9oIq6Yk31nmn .cluster-label text{fill:#333;}#mermaid-svg-0oLr9oIq6Yk31nmn .cluster-label span{color:#333;}#mermaid-svg-0oLr9oIq6Yk31nmn .cluster-label span p{background-color:transparent;}#mermaid-svg-0oLr9oIq6Yk31nmn .label text,#mermaid-svg-0oLr9oIq6Yk31nmn span{fill:#333;color:#333;}#mermaid-svg-0oLr9oIq6Yk31nmn .node rect,#mermaid-svg-0oLr9oIq6Yk31nmn .node circle,#mermaid-svg-0oLr9oIq6Yk31nmn .node ellipse,#mermaid-svg-0oLr9oIq6Yk31nmn .node polygon,#mermaid-svg-0oLr9oIq6Yk31nmn .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0oLr9oIq6Yk31nmn .rough-node .label text,#mermaid-svg-0oLr9oIq6Yk31nmn .node .label text,#mermaid-svg-0oLr9oIq6Yk31nmn .image-shape .label,#mermaid-svg-0oLr9oIq6Yk31nmn .icon-shape .label{text-anchor:middle;}#mermaid-svg-0oLr9oIq6Yk31nmn .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-0oLr9oIq6Yk31nmn .rough-node .label,#mermaid-svg-0oLr9oIq6Yk31nmn .node .label,#mermaid-svg-0oLr9oIq6Yk31nmn .image-shape .label,#mermaid-svg-0oLr9oIq6Yk31nmn .icon-shape .label{text-align:center;}#mermaid-svg-0oLr9oIq6Yk31nmn .node.clickable{cursor:pointer;}#mermaid-svg-0oLr9oIq6Yk31nmn .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-0oLr9oIq6Yk31nmn .arrowheadPath{fill:#333333;}#mermaid-svg-0oLr9oIq6Yk31nmn .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0oLr9oIq6Yk31nmn .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0oLr9oIq6Yk31nmn .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0oLr9oIq6Yk31nmn .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-0oLr9oIq6Yk31nmn .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0oLr9oIq6Yk31nmn .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-0oLr9oIq6Yk31nmn .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0oLr9oIq6Yk31nmn .cluster text{fill:#333;}#mermaid-svg-0oLr9oIq6Yk31nmn .cluster span{color:#333;}#mermaid-svg-0oLr9oIq6Yk31nmn div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0oLr9oIq6Yk31nmn .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-0oLr9oIq6Yk31nmn rect.text{fill:none;stroke-width:0;}#mermaid-svg-0oLr9oIq6Yk31nmn .icon-shape,#mermaid-svg-0oLr9oIq6Yk31nmn .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0oLr9oIq6Yk31nmn .icon-shape p,#mermaid-svg-0oLr9oIq6Yk31nmn .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-0oLr9oIq6Yk31nmn .icon-shape .label rect,#mermaid-svg-0oLr9oIq6Yk31nmn .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0oLr9oIq6Yk31nmn .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-0oLr9oIq6Yk31nmn .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-0oLr9oIq6Yk31nmn :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

favicon显示在哪里

浏览器标签页

地址栏左侧

书签/收藏夹

历史记录

桌面快捷方式

移动端主屏幕图标

favicon的历史：

favicon最早是微软在IE5中引入的功能，当时只支持 .ico 格式，放在网站根目录下命名为 favicon.ico 就会自动生效。

后来各大浏览器都支持了这个功能，并且扩展支持了PNG、SVG等更多格式。现在favicon已经是每个网站的标配了。

1.2 为什么要有favicon

也许你会觉得：“一个小图标而已，有没有无所谓吧？”

其实favicon虽然小，但它的作用不小：

#mermaid-svg-3DY4DLdbUzi8148T{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-3DY4DLdbUzi8148T .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-3DY4DLdbUzi8148T .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-3DY4DLdbUzi8148T .error-icon{fill:#552222;}#mermaid-svg-3DY4DLdbUzi8148T .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-3DY4DLdbUzi8148T .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-3DY4DLdbUzi8148T .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-3DY4DLdbUzi8148T .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-3DY4DLdbUzi8148T .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-3DY4DLdbUzi8148T .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-3DY4DLdbUzi8148T .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-3DY4DLdbUzi8148T .marker{fill:#333333;stroke:#333333;}#mermaid-svg-3DY4DLdbUzi8148T .marker.cross{stroke:#333333;}#mermaid-svg-3DY4DLdbUzi8148T svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-3DY4DLdbUzi8148T p{margin:0;}#mermaid-svg-3DY4DLdbUzi8148T .edge{stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .section–1 rect,#mermaid-svg-3DY4DLdbUzi8148T .section–1 path,#mermaid-svg-3DY4DLdbUzi8148T .section–1 circle,#mermaid-svg-3DY4DLdbUzi8148T .section–1 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section–1 text{fill:#ffffff;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth–1{stroke-width:17;}#mermaid-svg-3DY4DLdbUzi8148T .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-0 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-0 path,#mermaid-svg-3DY4DLdbUzi8148T .section-0 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-0 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-3DY4DLdbUzi8148T .section-0 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-0{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-0{stroke-width:14;}#mermaid-svg-3DY4DLdbUzi8148T .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-1 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-1 path,#mermaid-svg-3DY4DLdbUzi8148T .section-1 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-1 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-1 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-1{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-1{stroke-width:11;}#mermaid-svg-3DY4DLdbUzi8148T .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-2 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-2 path,#mermaid-svg-3DY4DLdbUzi8148T .section-2 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-2 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-2 text{fill:#ffffff;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-2{stroke-width:8;}#mermaid-svg-3DY4DLdbUzi8148T .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-3 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-3 path,#mermaid-svg-3DY4DLdbUzi8148T .section-3 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-3 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-3 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-3{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-3{stroke-width:5;}#mermaid-svg-3DY4DLdbUzi8148T .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-4 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-4 path,#mermaid-svg-3DY4DLdbUzi8148T .section-4 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-4 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-4 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-4{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-4{stroke-width:2;}#mermaid-svg-3DY4DLdbUzi8148T .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-5 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-5 path,#mermaid-svg-3DY4DLdbUzi8148T .section-5 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-5 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-5 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-5{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-5{stroke-width:-1;}#mermaid-svg-3DY4DLdbUzi8148T .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-6 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-6 path,#mermaid-svg-3DY4DLdbUzi8148T .section-6 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-6 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-6 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-6{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-6{stroke-width:-4;}#mermaid-svg-3DY4DLdbUzi8148T .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-7 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-7 path,#mermaid-svg-3DY4DLdbUzi8148T .section-7 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-7 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-7 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-7{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-7{stroke-width:-7;}#mermaid-svg-3DY4DLdbUzi8148T .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-8 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-8 path,#mermaid-svg-3DY4DLdbUzi8148T .section-8 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-8 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-8 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-8{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-8{stroke-width:-10;}#mermaid-svg-3DY4DLdbUzi8148T .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-9 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-9 path,#mermaid-svg-3DY4DLdbUzi8148T .section-9 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-9 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-9 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-9{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-9{stroke-width:-13;}#mermaid-svg-3DY4DLdbUzi8148T .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-10 rect,#mermaid-svg-3DY4DLdbUzi8148T .section-10 path,#mermaid-svg-3DY4DLdbUzi8148T .section-10 circle,#mermaid-svg-3DY4DLdbUzi8148T .section-10 polygon,#mermaid-svg-3DY4DLdbUzi8148T .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-10 text{fill:black;}#mermaid-svg-3DY4DLdbUzi8148T .node-icon-10{font-size:40px;color:black;}#mermaid-svg-3DY4DLdbUzi8148T .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .edge-depth-10{stroke-width:-16;}#mermaid-svg-3DY4DLdbUzi8148T .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-3DY4DLdbUzi8148T .disabled,#mermaid-svg-3DY4DLdbUzi8148T .disabled circle,#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:lightgray;}#mermaid-svg-3DY4DLdbUzi8148T .disabled text{fill:#efefef;}#mermaid-svg-3DY4DLdbUzi8148T .section-root rect,#mermaid-svg-3DY4DLdbUzi8148T .section-root path,#mermaid-svg-3DY4DLdbUzi8148T .section-root circle,#mermaid-svg-3DY4DLdbUzi8148T .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-3DY4DLdbUzi8148T .section-root text{fill:#ffffff;}#mermaid-svg-3DY4DLdbUzi8148T .section-root span{color:#ffffff;}#mermaid-svg-3DY4DLdbUzi8148T .section-2 span{color:#ffffff;}#mermaid-svg-3DY4DLdbUzi8148T .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-3DY4DLdbUzi8148T .edge{fill:none;}#mermaid-svg-3DY4DLdbUzi8148T .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-3DY4DLdbUzi8148T :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

favicon的作用

品牌识别

标签页上一眼认出

建立品牌形象

增强专业感

用户体验

多标签时快速定位

书签管理更直观

视觉上更完整

专业度

没有favicon显得不专业

给人"还没做完"的感觉

移动端

添加到主屏幕的图标

App化体验

1. 品牌识别

favicon是品牌视觉识别系统的一部分。当用户打开很多标签页时，不用看标题文字，只看图标就能快速找到你的网站。比如绿色的机器人是微信，蓝色的"e"是饿了么，红色的"淘"是淘宝——这些图标已经深深刻在用户脑子里了。

2. 专业感

一个没有favicon的网站，就像一张没有名片的脸——总让人觉得"是不是还没做完"、“是不是不正规”。有了favicon，用户会觉得这个网站更专业、更可信。

3. 用户体验

标签页很多的时候，光看标题文字很难快速区分。有了favicon，扫一眼图标就知道哪个是哪个，提升使用效率。

4. 移动端和PWA

在移动端，用户把网站添加到主屏幕时，也会使用favicon相关的图标。一个好的图标能让你的网站看起来更像一个原生App。

总结：favicon虽小，但它是网站专业度和品牌形象的体现。做一个网站，就应该配上自己的favicon。

二、favicon的格式与尺寸

2.1 常见的favicon格式

ICO格式：最经典的favicon格式。它的特点是一个文件可以包含多个不同尺寸的图标（比如16×16、32×32、48×48），浏览器会自动选择最合适的尺寸。兼容性最好，所有浏览器都支持。

PNG格式：现在最推荐的格式。PNG图标更清晰，支持透明背景，制作也简单（任何画图软件都能导出PNG）。现代浏览器基本都支持PNG格式的favicon。

SVG格式：矢量图，可以无限放大不失真，文件体积小。但目前浏览器支持不如PNG好，Safari直到较新版本才支持。可以作为高级补充。

推荐方案：ICO + PNG 双保险

最稳妥的做法是：提供一个 favicon.ico（兼容老浏览器）+ 一个PNG格式的favicon（现代浏览器用更清晰的）。两者都放在网站根目录。

2.2 favicon的尺寸

favicon的使用场景很多，不同场景需要不同的尺寸。常见的尺寸有：

最小需求：

如果只是想让网站标签页有个图标，准备一个 32×32 的PNG 基本上就够了（浏览器会自动缩放）。

完整方案：

如果想在所有平台都有好的效果，需要准备多个尺寸。一般的网站，准备以下几个就够了：

• favicon.ico（包含16×16、32×32、48×48）
• favicon-32×32.png（标准PNG）
• apple-touch-icon.png（180×180，iOS用）

2.3 设计favicon的注意事项

favicon很小（最小的只有16×16像素），所以设计上有一些特殊要求：

#mermaid-svg-Jmrt9XKeIhgR4EOE{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Jmrt9XKeIhgR4EOE .error-icon{fill:#552222;}#mermaid-svg-Jmrt9XKeIhgR4EOE .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Jmrt9XKeIhgR4EOE .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .marker.cross{stroke:#333333;}#mermaid-svg-Jmrt9XKeIhgR4EOE svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Jmrt9XKeIhgR4EOE p{margin:0;}#mermaid-svg-Jmrt9XKeIhgR4EOE .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .cluster-label text{fill:#333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .cluster-label span{color:#333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .cluster-label span p{background-color:transparent;}#mermaid-svg-Jmrt9XKeIhgR4EOE .label text,#mermaid-svg-Jmrt9XKeIhgR4EOE span{fill:#333;color:#333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .node rect,#mermaid-svg-Jmrt9XKeIhgR4EOE .node circle,#mermaid-svg-Jmrt9XKeIhgR4EOE .node ellipse,#mermaid-svg-Jmrt9XKeIhgR4EOE .node polygon,#mermaid-svg-Jmrt9XKeIhgR4EOE .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Jmrt9XKeIhgR4EOE .rough-node .label text,#mermaid-svg-Jmrt9XKeIhgR4EOE .node .label text,#mermaid-svg-Jmrt9XKeIhgR4EOE .image-shape .label,#mermaid-svg-Jmrt9XKeIhgR4EOE .icon-shape .label{text-anchor:middle;}#mermaid-svg-Jmrt9XKeIhgR4EOE .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Jmrt9XKeIhgR4EOE .rough-node .label,#mermaid-svg-Jmrt9XKeIhgR4EOE .node .label,#mermaid-svg-Jmrt9XKeIhgR4EOE .image-shape .label,#mermaid-svg-Jmrt9XKeIhgR4EOE .icon-shape .label{text-align:center;}#mermaid-svg-Jmrt9XKeIhgR4EOE .node.clickable{cursor:pointer;}#mermaid-svg-Jmrt9XKeIhgR4EOE .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .arrowheadPath{fill:#333333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Jmrt9XKeIhgR4EOE .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Jmrt9XKeIhgR4EOE .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Jmrt9XKeIhgR4EOE .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Jmrt9XKeIhgR4EOE .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Jmrt9XKeIhgR4EOE .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Jmrt9XKeIhgR4EOE .cluster text{fill:#333;}#mermaid-svg-Jmrt9XKeIhgR4EOE .cluster span{color:#333;}#mermaid-svg-Jmrt9XKeIhgR4EOE div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Jmrt9XKeIhgR4EOE .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Jmrt9XKeIhgR4EOE rect.text{fill:none;stroke-width:0;}#mermaid-svg-Jmrt9XKeIhgR4EOE .icon-shape,#mermaid-svg-Jmrt9XKeIhgR4EOE .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Jmrt9XKeIhgR4EOE .icon-shape p,#mermaid-svg-Jmrt9XKeIhgR4EOE .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Jmrt9XKeIhgR4EOE .icon-shape .label rect,#mermaid-svg-Jmrt9XKeIhgR4EOE .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Jmrt9XKeIhgR4EOE .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Jmrt9XKeIhgR4EOE .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Jmrt9XKeIhgR4EOE :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

favicon设计要点

简洁

识别度高

对比强烈

和品牌一致

不要放太多细节16px里看不清

用简洁的图形或字母

缩小了也能认出来

避免复杂图案

前景背景对比明显

避免相近的颜色

和品牌Logo风格统一

颜色和网站呼应

1. 简洁再简洁

16×16像素，总共才256个点，放不了什么复杂的内容。favicon必须极简——一个字母、一个图形符号、一块颜色就够了。

2. 高对比

前景色和背景色对比要强烈，这样在小尺寸下才能看清。不要用浅色配浅色、深色配深色。

3. 品牌一致

favicon是品牌系统的一部分，应该和网站的Logo、主色调保持一致。用户看到图标就能联想到你的品牌。

4. 测试小尺寸效果

设计favicon一定要缩小到16×16看看效果。很多图放大了很好看，缩小了就糊成一团，什么都看不清。一定要在真实尺寸下检验。

三、如何添加favicon

3.1 方法一：放在根目录（最简单）

最简单的方法：把favicon文件命名为 favicon.ico，放在网站的根目录下。

网站根目录/
├── index.html
├── favicon.ico ← 放在这里
└── …

浏览器加载网页时，会自动去网站根目录下找 favicon.ico 这个文件。如果找到了就显示，找不到就显示默认的空白图标。

优点：

• 简单，不用写任何代码
• 所有浏览器都支持

缺点：

• 文件名和位置固定，不够灵活
• 只能用ico格式
• 不能指定多个不同尺寸

这种方法适合简单的静态网站，拿来就能用。

3.2 方法二：用link标签指定（推荐）

更灵活的方式是在HTML的 <head> 中用 <link> 标签指定favicon的位置和类型。

<head>
<!– PNG格式的favicon –>
<link rel="icon" type="image/png" href="/favicon-32×32.png" sizes="32×32">

<!– ICO格式的favicon –>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>

属性说明：

推荐的完整写法：

<head>
<meta charset="UTF-8">
<title>页面标题</title>

<!– ICO格式，兼容所有浏览器 –>
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!– PNG格式，现代浏览器优先使用 –>
<link rel="icon" type="image/png" sizes="32×32" href="/favicon-32×32.png">
<link rel="icon" type="image/png" sizes="16×16" href="/favicon-16×16.png">

<!– iOS主屏图标 –>
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon.png">
</head>

浏览器会选择最合适的那个图标来显示。

路径问题：

• href="/favicon.ico"（开头有斜杠）：表示网站根目录下的favicon.ico
• href="favicon.ico"（开头没斜杠）：表示相对于当前HTML文件的路径

推荐用绝对路径（开头加斜杠），这样不管在哪个子页面都能正确找到图标。

3.3 苹果设备的图标

iOS设备有自己的一套图标规则，叫做 apple-touch-icon。用户把网站添加到主屏幕时，用的就是这个图标。

<!– iPhone和iPad的主屏图标 –>
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon.png">

尺寸建议：180×180像素

如果不指定，iOS会自动截取网页的截图作为图标，效果通常很糟糕。所以移动端网站建议一定要加上apple-touch-icon。

还可以加一些预渲染的图标（iOS的老版本会用）：

<link rel="apple-touch-icon" sizes="57×57" href="/apple-touch-icon-57×57.png">
<link rel="apple-touch-icon" sizes="72×72" href="/apple-touch-icon-72×72.png">
<link rel="apple-touch-icon" sizes="114×114" href="/apple-touch-icon-114×114.png">
<link rel="apple-touch-icon" sizes="144×144" href="/apple-touch-icon-144×144.png">
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon-180×180.png">

不过现在新的iOS版本只需要一个180×180的就够了，会自动缩放。

3.4 Android和PWA图标

对于Android设备和PWA（渐进式Web应用），通常通过 manifest.json 文件来配置图标：

<link rel="manifest" href="/manifest.json">

manifest.json中配置图标：

{
"name": "应用名称",
"short_name": "短名称",
"icons": [
{
"src": "/android-chrome-192×192.png",
"sizes": "192×192",
"type": "image/png"
},
{
"src": "/android-chrome-512×512.png",
"sizes": "512×512",
"type": "image/png"
}
]
}

3.5 简单方案 vs 完整方案

根据你的需求，可以选择不同复杂度的方案：

极简方案（个人小站）：

一个 favicon.ico 放根目录

标准方案（一般企业站）：

<link rel="icon" type="image/png" sizes="32×32" href="/favicon-32×32.png">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

完整方案（追求完美）：

<link rel="icon" type="image/png" sizes="16×16" href="/favicon-16×16.png">
<link rel="icon" type="image/png" sizes="32×32" href="/favicon-32×32.png">
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

对于大多数网站，标准方案就足够了。

四、如何制作favicon

了解了怎么加，再来看看怎么做。制作favicon有几种方法，从简单到专业都有。

4.1 方法一：在线生成工具（最简单）

最简单的方法是用在线favicon生成工具，上传一张图片，自动生成各种尺寸的favicon。

常用的在线工具：

RealFaviconGenerator的使用步骤：

这个工具会生成ICO、PNG、苹果图标、安卓图标等全套文件，并且给出对应的HTML代码，非常方便。

4.2 方法二：用设计软件自己做

如果你有设计基础，可以用Photoshop、Figma、Sketch等软件自己设计。

制作步骤：

设计要点提醒：

• 设计时用大尺寸（比如512×512），最后缩小
• 缩小到16×16检查效果
• 确保小尺寸下依然清晰可辨
• 背景透明或者用纯色背景

4.3 方法三：用文字或emoji快速做一个

如果你暂时没有Logo，也可以用文字或emoji快速做一个favicon。

比如 favicon.io 这个网站，你输入一个字母或选一个emoji，它就能帮你生成好看的favicon。

适合个人项目、Demo、临时站点。

4.4 PNG转ICO

有了PNG图片，如果还需要ICO格式，可以用在线工具转换：

• ConvertICO：convertico.com
• ICO Convert：icoconvert.com

上传PNG，选择尺寸，下载ICO文件，就这么简单。

五、favicon不显示的常见原因

加了favicon但浏览器不显示？这是初学者经常遇到的问题。下面是常见的原因和解决方法。

5.1 路径不对

这是最常见的原因。路径写错了，浏览器找不到图标文件。

排查方法：

解决方法：

• 检查文件名是否正确（注意大小写，Linux服务器区分大小写）
• 用绝对路径（/favicon.ico）比相对路径更保险
• 确保文件上传到了正确的目录

5.2 浏览器缓存

浏览器会缓存favicon，而且缓存时间特别长。有时候你更新了favicon，但浏览器还是显示旧的，因为读取的是缓存。

解决方法：

5.3 格式不对

• 文件扩展名是 .ico 但实际上是PNG格式（改了个后缀名而已）
• 图片损坏了
• 图片太大（虽然一般都能显示，但不建议超过100KB）

解决方法：

• 用正规工具生成ICO文件
• 确保图片文件完好
• 加上 type 属性明确告诉浏览器文件类型

5.4 本地文件直接打开

如果你是直接双击HTML文件（用 file:// 协议打开），有些浏览器可能不会加载favicon。

解决方法：

• 用Live Server等本地服务器启动网页
• 上传到服务器上测试

5.5 浏览器不支持

极少数很老的浏览器不支持PNG格式的favicon。

解决方法：

• 同时提供ICO格式作为兜底
• 如果不需要兼容特别老的浏览器，只用PNG也可以

六、favicon的趣闻和冷知识

6.1 favicon请求的副作用

浏览器会自动请求 /favicon.ico，即使你的HTML里没有写link标签。这会带来一些小影响：

• 服务器会多一个请求
• 如果没有favicon文件，服务器会记录一个404错误日志
• 对于访问量大的网站，这也是一笔不小的流量

所以，哪怕你觉得favicon不重要，也最好放一个，哪怕是个1像素的透明图，避免大量的404请求。

6.2 动态favicon

favicon也可以用JavaScript动态修改。比如：

// 创建一个新的link元素
const link = document.createElement('link');
link.rel = 'icon';
link.href = 'new-favicon.png';
document.head.appendChild(link);

应用场景：

• 有新消息时，favicon显示红点或数字
• 深色模式/浅色模式切换不同的favicon
• 节日换个节日主题的favicon

6.3 emoji做favicon

现在很多浏览器支持用SVG做favicon，而SVG中可以包含文字。所以你甚至可以用emoji作为favicon：

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">

一行代码，用一个emoji当favicon，适合快速原型和个人项目。

七、最佳实践总结

最后，我们来总结一下favicon的最佳实践：

#mermaid-svg-y7OFUy3GWiDxyp4r{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-y7OFUy3GWiDxyp4r .error-icon{fill:#552222;}#mermaid-svg-y7OFUy3GWiDxyp4r .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-y7OFUy3GWiDxyp4r .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-y7OFUy3GWiDxyp4r .marker{fill:#333333;stroke:#333333;}#mermaid-svg-y7OFUy3GWiDxyp4r .marker.cross{stroke:#333333;}#mermaid-svg-y7OFUy3GWiDxyp4r svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-y7OFUy3GWiDxyp4r p{margin:0;}#mermaid-svg-y7OFUy3GWiDxyp4r .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-y7OFUy3GWiDxyp4r .cluster-label text{fill:#333;}#mermaid-svg-y7OFUy3GWiDxyp4r .cluster-label span{color:#333;}#mermaid-svg-y7OFUy3GWiDxyp4r .cluster-label span p{background-color:transparent;}#mermaid-svg-y7OFUy3GWiDxyp4r .label text,#mermaid-svg-y7OFUy3GWiDxyp4r span{fill:#333;color:#333;}#mermaid-svg-y7OFUy3GWiDxyp4r .node rect,#mermaid-svg-y7OFUy3GWiDxyp4r .node circle,#mermaid-svg-y7OFUy3GWiDxyp4r .node ellipse,#mermaid-svg-y7OFUy3GWiDxyp4r .node polygon,#mermaid-svg-y7OFUy3GWiDxyp4r .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-y7OFUy3GWiDxyp4r .rough-node .label text,#mermaid-svg-y7OFUy3GWiDxyp4r .node .label text,#mermaid-svg-y7OFUy3GWiDxyp4r .image-shape .label,#mermaid-svg-y7OFUy3GWiDxyp4r .icon-shape .label{text-anchor:middle;}#mermaid-svg-y7OFUy3GWiDxyp4r .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-y7OFUy3GWiDxyp4r .rough-node .label,#mermaid-svg-y7OFUy3GWiDxyp4r .node .label,#mermaid-svg-y7OFUy3GWiDxyp4r .image-shape .label,#mermaid-svg-y7OFUy3GWiDxyp4r .icon-shape .label{text-align:center;}#mermaid-svg-y7OFUy3GWiDxyp4r .node.clickable{cursor:pointer;}#mermaid-svg-y7OFUy3GWiDxyp4r .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-y7OFUy3GWiDxyp4r .arrowheadPath{fill:#333333;}#mermaid-svg-y7OFUy3GWiDxyp4r .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-y7OFUy3GWiDxyp4r .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-y7OFUy3GWiDxyp4r .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-y7OFUy3GWiDxyp4r .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-y7OFUy3GWiDxyp4r .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-y7OFUy3GWiDxyp4r .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-y7OFUy3GWiDxyp4r .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-y7OFUy3GWiDxyp4r .cluster text{fill:#333;}#mermaid-svg-y7OFUy3GWiDxyp4r .cluster span{color:#333;}#mermaid-svg-y7OFUy3GWiDxyp4r div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-y7OFUy3GWiDxyp4r .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-y7OFUy3GWiDxyp4r rect.text{fill:none;stroke-width:0;}#mermaid-svg-y7OFUy3GWiDxyp4r .icon-shape,#mermaid-svg-y7OFUy3GWiDxyp4r .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-y7OFUy3GWiDxyp4r .icon-shape p,#mermaid-svg-y7OFUy3GWiDxyp4r .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-y7OFUy3GWiDxyp4r .icon-shape .label rect,#mermaid-svg-y7OFUy3GWiDxyp4r .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-y7OFUy3GWiDxyp4r .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-y7OFUy3GWiDxyp4r .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-y7OFUy3GWiDxyp4r :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

favicon最佳实践

必须有

多格式

设计简洁

品牌统一

放置规范

再小的网站也要有favicon这是专业度的体现

ICO+PNG双保险覆盖所有浏览器

移动端也要考虑

缩小了也能看清

不要太复杂

和品牌Logo风格一致

颜色呼应网站主题

放在根目录

用link标签指定

八、结语

favicon是一个很小的东西——小到只有16个像素见方。但它又是一个很重要的东西——重要到每个网站都应该有自己的favicon。

就像我们常说的：细节决定品质。 一个小小的favicon，反映的是开发者对细节的追求，以及对用户体验的重视。

学到这里，你的HTML页面已经有了标题、描述、图标——越来越像一个真正的网站了。

下一篇文章，我们将学习如何在HTML中引入外部资源，比如CSS样式表和JavaScript脚本。这是从单文件到完整项目的重要一步。

学习提示：建议你给自己的个人网页也做一个favicon。不需要多复杂，哪怕用一个首字母或者一个emoji都行。做的过程中你会对favicon有更深的理解。

本文是《HTML从入门到精通》专栏的第19篇文章。如果你觉得这篇文章对你有帮助，欢迎继续阅读后续文章，和我一起系统地学习HTML，从入门走向精通。