Logo 及资源文件命名规范参考（小白也能看懂）#

上一期我们讲了对象存储怎么命名（Bucket、Key、路径结构）。这一期换个角度，讲一讲项目里实实在在的文件怎么命名——尤其是 Logo 这类资源文件。

你有没有遇到过这种文件夹：

1
assets/
2
├── 1.png
3
├── 2.png
4
├── 最终版.png
5
├── 最终版2.png
6
├── 真真的最终版.png
7
├── logo (1).jpg
8
└── 微信图片_20260816_183000.jpg

乱到崩溃。这一篇用大白话讲清楚：Logo 和其他资源文件到底该怎么命名，从多版本区分到图标、字体、CSS/JS，一次讲透，附可直接抄的对照表。

一、先记一条总原则#

所有资源文件命名，先守住这条总原则：

文件名 = 名字 + 作用/版本 + 格式后缀，全小写，用短横线（-）连接。

1
{名字}-{作用或版本}.{扩展名}

示例：

1
logo-primary.svg      ✅ 名字+作用
2
logo-v2.svg           ✅ 名字+版本
3
logo-dark-theme.png   ✅ 名字+场景

反例：

1
Logo.png              ❌ 大小写混用
2
logo1.png             ❌ 看不出作用
3
final_logo2.png       ❌ 下划线+"最终版"，含混

记住：命名要让你半年后看到文件名，不用打开就能知道它是干嘛的。

二、Logo 文件命名规范（重点）#

Logo 是每个项目里最容易被命名乱掉的资源。原因很简单：一个 Logo 往往有 N 个版本。

Logo 常见的版本#

一个正经项目的 Logo 通常有这些版本：

版本	说明
主 Logo	标准版，用在大多数地方
反白/浅色版	用在深色背景上
深色版	用在浅色背景上
图标版（Icon）	只要图形，不要文字
完整版	图形 + 文字的组合
透明底版	去掉白底，PNG/WebP/SVG
不同尺寸	favicon、登录页、水印等

版本	推荐文件名	说明
主 Logo	`logo.svg`	矢量图，最通用
反白版	`logo-white.svg` 或 `logo-inverse.svg`	深底上用
深色版	`logo-dark.svg`	浅底上用
图标版	`logo-icon.svg`	只要图形
完整版	`logo-full.svg`	图形+文字
透明 PNG	`logo-transparent.png`	大图透明底
小图标	`logo-icon-32.png`	32px 图标
Favicon	`favicon.ico` 或 `favicon.svg`	浏览器标签页图标

多尺寸/多色号怎么办？#

如果 Logo 需要很多尺寸，推荐按目录分组 + 统一后缀：

1
logo/
2
├── svg/
3
│   ├── logo.svg
4
│   ├── logo-white.svg
5
│   └── logo-icon.svg
6
├── png/
7
│   ├── logo-256.png
8
│   ├── logo-512.png
9
│   └── logo-icon-32.png
10
└── favicon.ico

大白话：先按格式分文件夹，再按场景/尺寸命名文件。 这样找起来一目了然。

千万别这么起名#

1
logo (1).png       ❌ 浏览器下载的重复文件
2
最终版logo.png     ❌ 中文+最终版
3
logo2.png          ❌ 谁记得 logo2 是啥
4
new_logo_2026.png  ❌ 下划线+日期混着来

三、其他资源的命名规范#

1️⃣ 图片资源（配图/封面/素材）#

1
{业务}-{内容描述}-{尺寸或版本}.{ext}

示例：

1
blog-cover-vue-tutorial-1200x630.jpg
2
article-thumb-js-basics.jpg
3
banner-home.jpg
4
og-image-default.png      （社交分享图）

小技巧：社交分享图建议统一叫 og-image-*.png，方便识别。

2️⃣ 图标文件（Icon）#

1
icon-{名字}-{状态或尺寸}.{ext}

示例：

1
icon-search.svg
2
icon-user-fill.svg        （实心）
3
icon-user-outline.svg     （描边）
4
icon-arrow-up-24.png

统一前缀 icon-，配合图标库（如 Font Awesome、Element Plus 的命名习惯），风格一致：

1
icon-arrow-left.svg
2
icon-arrow-right.svg
3
icon-close.svg
4
icon-check.svg

3️⃣ 字体文件#

1
{字体名}-{字重或样式}.{ext}

示例：

1
SourceHanSansSC-Bold.otf
2
SourceHanSansSC-Regular.otf
3
Inter-Bold.woff2
4
Inter-Regular.woff2

⚠️ 坑：字体文件一定要用对格式后缀——.woff2、.ttf、.otf。不要存成 .txt 或没有后缀，否则浏览器会因 Content-Type 不对而拒载。

4️⃣ CSS 文件#

1
{模块}-{作用}.css

示例：

1
base.css          （基础样式）
2
layout.css        （布局）
3
components.css    （组件）
4
theme-dark.css    （暗色主题）

5️⃣ JS 文件#

1
{模块}-{作用}.js

示例：

1
api-client.js
2
router-index.js
3
utils-format.js

6️⃣ 音视频文件#

1
{业务}-{内容}-{时长或质量}.{ext}

示例：

1
video-intro-1080p.mp4
2
audio-podcast-ep01.mp3
3
bgm-home-30s.mp3

四、命名通用规则速查#

不管哪种资源，下面这几条通用规则永远适用：

规则	说明	反例
全小写	一律小写，避免大小写混淆	`Logo.png` ❌
短横线	单词用 `-` 连接	`logo_white` ❌
不用空格	空格会变成 `%20`，难看还易错	`my logo.png` ❌
不用中文	跨平台容易乱码	`最终版.png` ❌
不用”最终版”	以后肯定还有最终版	`final_v2.png` ❌
扩展名小写	`.PNG`、`.JPG` 不规范	`LOGO.PNG` ❌
版本/尺寸写清楚	方便按需引用	`logo.png`（只有一张时 OK）

五、版本管理：新版本文件怎么命名#

改稿是常态，新版文件不要覆盖旧文件（可能还要回退），也不要起 最终版 这种名。

推荐两种方式：

方式 A：版本号后缀

1
logo-v1.svg
2
logo-v2.svg
3
logo-v3.svg

方式 B：日期 + 序号（配合版本描述）

1
logo-20260816-v1.svg
2
logo-20260816-v2.svg

大白话：宁可多一个 -v2，也别让两个文件同名互相覆盖。 版本描述（改了什么）放到提交记录或文档里，别写进文件名。

六、一个完整实战示例#

假设你在做一个开源项目，资源目录长这样：

1
assets/
2
├── logo/
3
│   ├── svg/
4
│   │   ├── logo.svg
5
│   │   ├── logo-white.svg
6
│   │   └── logo-icon.svg
7
│   ├── png/
8
│   │   ├── logo-256.png
9
│   │   └── logo-512.png
10
│   └── favicon.ico
11
├── icons/
12
│   ├── icon-search.svg
13
│   ├── icon-user-fill.svg
14
│   └── icon-close.svg
15
├── images/
16
│   ├── blog-cover-intro-1200x630.jpg
17
│   └── og-image-default.png
18
└── fonts/
19
    ├── Inter-Regular.woff2
20
    └── Inter-Bold.woff2

这套结构的好处：

✅ 按资源类型分文件夹，不用满目录乱找
✅ Logo 多版本有统一前缀和场景后缀，一眼看懂
✅ 全小写 + 短横线，跨平台、跨语言都安全
✅ 图标统一 icon- 前缀，和主流图标库风格一致
✅ 字体用正确的 .woff2 后缀，Content-Type 不会错

七、总结#

把命名规范浓缩成一张速查表：

资源	命名模板	示例
Logo 主图	`logo.svg`	`logo.svg`
Logo 反白	`logo-white.{ext}`	`logo-white.svg`
Logo 图标版	`logo-icon.{ext}`	`logo-icon.svg`
Logo 多尺寸	`logo-{尺寸}.png`	`logo-512.png`
图标	`icon-{名字}.{ext}`	`icon-search.svg`
图片	`{业务}-{描述}-{尺寸}.{ext}`	`blog-cover-intro-1200x630.jpg`
字体	`{字体}-{字重}.{ext}`	`Inter-Bold.woff2`
CSS	`{模块}-{作用}.css`	`theme-dark.css`
JS	`{模块}-{作用}.js`	`api-client.js`
新版本	`{名字}-v{版本}.{ext}`	`logo-v2.svg`

一句话记住：资源命名 = 名字 + 作用/版本 + 正确后缀，全小写、短横线、不中文、不”最终版”。

用这套规范，你的资源目录任何时候打开都整整齐齐，给别人交接项目也省心 🚀

配合上一篇《对象存储命名规范参考》一起看更完整：那篇管”存到哪里”，这篇管”叫什么名字”。