Vite React项目中SVG Favicon显示过小问题求助

问题原因 #

你的SVG里的<g>标签带了scale(0.1)的变换，把整个图形缩小到了原本的1/10，这就是图标显示极小的核心原因——手动修改width/height没用，因为viewBox和transform的优先级更高。另外PNG转SVG时工具自动添加的坐标变换，也导致图形没有占满viewBox空间。

修复步骤 #

1. 修正SVG代码 #

直接移除缩放变换，同时把路径坐标放大10倍（抵消原来的0.1缩放），修复后的SVG如下：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="32" height="32" viewBox="0 0 500 500"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.16, written by Peter Selinger 2001-2019
</metadata>
<g fill="#000000" stroke="none">
<path d="M22850 34830 c-3450 -730 -6260 -2890 -7790 -6000 -400 -810 -800 -2020 -950 -2870
-160 -880 -130 -3110 40 -4030 790 -4150 3860 -7450 8000 -8600 930 -260 1120 -280 2850 -270
1680 0 1940 30 2800 260 1970 550 3600 1500 5030 2940 2150 2190 3160 4640 3170 7700 0 3070
-1030 5640 -3100 7730 -1670 1690 -3690 2770 -5900 3170 -1000 180 -3260 160 -4150 -30z m3990
-770 c3490 -670 6350 -3020 7670 -6310 950 -2380 920 -5300 -70 -7620 -520 -1200 -940 -1880
-1740 -2810 -1410 -1630 -3130 -2690 -5350 -3280 -560 -150 -1040 -190 -2450 -180 -1620 0
-1820 20 -2650 280 -3610 1110 -6170 3720 -7170 7330 -190 670 -220 1050 -220 2580 0 1680 20
1860 270 2700 500 1620 1240 2960 2300 4120 1450 1580 3600 2780 5720 3180 950 180 2770 180 3690
10z"/>
<path d="M23600 30960 c-2640 -770 -3350 -3360 -1550 -5710 210 -270 1540 -1870 2940 -3550
1410 -1680 2620 -3130 2690 -3220 120 -150 90 -210 -340 -470 -690 -450 -1330 -630 -2220 -630
-1250 0 -2410 470 -3110 1270 -400 460 -510 730 -590 1500 -60 480 -110 600 -260 630 -390 80 -460
-220 -460 -2030 0 -1810 70 -2110 460 -2030 160 30 190 130 220 750 l30 710 320 -300 c410 -370
1260 -810 2020 -1030 440 -130 840 -160 1650 -130 930 40 1150 80 1730 360 2070 970 2890 3130 1920
5070 -140 280 -1600 2090 -3250 4040 -1650 1950 -3000 3580 -3000 3620 0 30 240 170 530 290 770
340 2030 390 2780 110 1030 -390 1880 -1370 1890 -2160 0 -290 150 -550 310 -550 40 0 150 70 230
160 130 130 160 430 160 1680 0 1620 -60 1820 -470 1740 -140 -30 -190 -150 -210 -610 l-30 -580
-390 310 c-760 600 -1440 830 -2550 860 -620 20 -1170 -20 -1450 -100z m1550 -5110 c1580 -1870
3000 -3590 3150 -3830 380 -580 560 -1540 400 -2130 -70 -240 -190 -560 -260 -720 l-150 -270
-2710 3220 c-1490 1780 -2850 3410 -3010 3630 -730 990 -1000 2150 -680 2950 140 350 320 630 360
580 20 -20 1320 -1560 2900 -3430z"/>
</g>
</svg>

我把width/height直接设为32（favicon常用尺寸），确保浏览器渲染时直接用合适大小。

2. 配置Vite项目的Favicon #

在项目根目录的index.html里，替换原有的favicon链接为：

<link rel="icon" type="image/svg+xml" href="/src/assets/your-favicon.svg">

如果需要兼容不支持SVG favicon的旧浏览器，可以额外生成16x16、32x32的PNG版本，补充标签：

<link rel="icon" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="/favicon-32x32.png">

3. 验证效果 #

重启Vite开发服务器，刷新浏览器后查看标签栏的图标，应该就能正常显示了。

内容的提问来源于stack exchange，提问作者ShazSea