如何修改VS Code欢迎页的指定图标?
如何修改VS Code欢迎页的指定图标?
嘿,我来帮你搞定这个问题!你想改的是欢迎页左上角那个VS Code图标对吧?我之前也折腾过这个,给你两种方法,一种是直接修改核心文件,另一种是用插件更稳妥,都给你说清楚:
方法一:直接修改VS Code核心文件(注意:版本更新会覆盖修改)
首先得找到VS Code的安装目录,不同系统位置不一样:
- Windows:默认全局安装在
C:\Program Files\Microsoft VS Code,如果是用户独立安装版,就在C:\Users\<你的用户名>\AppData\Local\Programs\Microsoft VS Code - macOS:右键点击Applications里的「Visual Studio Code」,选择「显示包内容」,然后进入
Contents/Resources/app - Linux:全局安装一般在
/usr/share/code,用户安装的话在~/.vscode
进入安装目录后,找到out/vs/workbench/browser/media文件夹,里面有个类似welcomeIcon.svg或者logo.svg的文件(不同版本文件名可能略有差异,你可以看文件预览找那个和欢迎页图标一致的)。
操作步骤:
- 先备份原文件!复制一份到别的地方,万一改错了还能恢复
- 准备好你自己的图标,最好和原文件尺寸一致(比如原图标是48x48的svg,你也用同尺寸的svg或者png)
- 把你的图标重命名成和原文件一样的名字,替换掉原来的文件
⚠️ 注意:修改核心文件后,VS Code启动时可能会弹出「安装已损坏」的提示,你可以点击「不再显示」忽略它;另外每次VS Code更新后,这个修改会被覆盖,需要重新操作一遍。
方法二:用自定义CSS插件(更稳妥,不会被更新覆盖)
这个方法不用动VS Code的核心文件,推荐用这种:
- 打开VS Code,安装插件「Custom CSS and JS Loader」
- 在本地创建一个
.css文件(比如vscode-custom.css),写入以下代码(根据实际图标路径修改):
/* 替换欢迎页左上角图标 */ .welcome-page .codicon-logo { background-image: url('file:///你的图标文件绝对路径') !important; background-size: contain; background-repeat: no-repeat; }
比如Windows路径是file:///C:/Users/xxx/Documents/my-icon.svg,macOS是file:///Users/xxx/Documents/my-icon.svg
3. 打开VS Code的设置(快捷键Ctrl+,),搜索「Custom CSS: Stylesheets」,把你刚才创建的css文件路径添加进去
4. 重启VS Code,插件会提示你需要重启生效,点击重启就可以看到自定义图标了
这个方法的好处是,VS Code更新后你的修改不会丢失,也不会触发“安装损坏”的提示。
备注:内容来源于stack exchange,提问作者LemonSalt




