Using a structured naming convention for website logos ensures clarity, consistency, and scalability. Below is a recommended format to manage different styles and aspect ratios effectively.
General Naming Structure
[brand]-[style]-[aspect]-[color]-[version].[extension]
Where:
- [brand] – Your brand or website name (e.g.,
nurbid). - [style] – The type of logo (e.g.,
full,icon,wordmark). - [aspect] – The aspect ratio or layout (e.g.,
horizontal,square,vertical). - [color] – Color variations (e.g.,
color,mono,white). - [version] – Version number if applicable (e.g.,
v1,v2). - [extension] – File format (
svg,png,jpg,webp).
Example Naming Conventions
| Logo Type | Example Filename |
|---|---|
| Full logo (horizontal, color) | nurbid-full-horizontal-color.svg |
| Full logo (vertical, monochrome) | nurbid-full-vertical-mono.svg |
| Icon logo (square, color) | nurbid-icon-square-color.png |
| Wordmark logo (horizontal, white) | nurbid-wordmark-horizontal-white.svg |
| Favicon (small icon, transparent) | nurbid-icon-16x16.svg |
| Dark mode variation | nurbid-full-horizontal-dark.svg |
| Alternate design (second version) | nurbid-full-horizontal-color-v2.svg |
Best Practices
- ✅ Use lowercase for consistency.
- ✅ Use hyphens (
-) instead of spaces or underscores. - ✅ Stick to SVG for scalability when possible.
- ✅ Include a transparent background for PNG/SVG formats.
- ✅ Maintain a consistent naming format across all files.