53 lines
2.9 KiB
Markdown
53 lines
2.9 KiB
Markdown
# Branding, Logos, Icons, and Favicons
|
|
|
|
## Core Rule
|
|
|
|
- Keep the source of truth in vector form when possible.
|
|
- Export PNG fallbacks from the vector source instead of editing the raster fallback and letting quality drift.
|
|
- If a logo or icon must work at 16-32 px, design for that size explicitly instead of shrinking the desktop version and hoping.
|
|
|
|
## Logos and Marks
|
|
|
|
- Detailed wordmarks and tiny taglines usually do not survive favicon or avatar sizes.
|
|
- Prepare simplified marks for tiny surfaces: favicon, social avatar, app icon, browser tab, and notification icon are not the same job as hero branding.
|
|
- Test logos on light and dark backgrounds before declaring the export done.
|
|
- Thin outlines, hairline strokes, and low-contrast brand colors disappear first at small sizes.
|
|
|
|
## SVG Rules
|
|
|
|
- Preserve the vector master when the destination supports SVG.
|
|
- Keep the SVG simple: remove hidden layers, editor cruft, and unnecessary groups.
|
|
- Use a consistent viewBox and avoid accidental off-canvas whitespace.
|
|
- For icon sets, keep stroke width, caps, joins, padding, and optical weight consistent across the set.
|
|
- If the SVG is going to be styled by CSS, prefer `currentColor` over hardcoded fills when appropriate.
|
|
|
|
## Raster Fallbacks
|
|
|
|
- Export PNG when transparency matters and SVG is unsupported or blocked.
|
|
- Export JPEG only when the asset is photographic or the destination forbids alpha-safe formats.
|
|
- Do not let transparent logos pick up accidental matte colors during export.
|
|
- If a logo is going onto colored backgrounds, preview that exact background before final export.
|
|
|
|
## Favicons and App Icons
|
|
|
|
- A real favicon package often needs more than one file: SVG, ICO, apple-touch icon, and larger app icons.
|
|
- Apple touch icons need an opaque background; transparent icons can render badly or fill with black.
|
|
- Favicon or app-icon artwork should live in the central safe area, not touch edges.
|
|
- If the mark is not readable at 16 px, simplify it instead of sharpening it harder.
|
|
|
|
## Icon-Set Consistency
|
|
|
|
- Do not mix filled, outlined, rounded, and sharp-corner icons randomly in one set unless that contrast is intentional.
|
|
- Similar icons should share the same baseline geometry, padding, and visual weight.
|
|
- Curves often look optically thinner than straight segments, so balance by shape size, not random stroke-width overrides.
|
|
- Review icons at 1x and 2x sizes on both light and dark surfaces.
|
|
|
|
## Common Branding Traps
|
|
|
|
- Exporting one logo variant and using it everywhere.
|
|
- Using a horizontal logo where a square avatar or app icon is needed.
|
|
- Leaving too much transparent padding around the mark so it looks tiny in production.
|
|
- Converting a vector icon to JPEG and losing edges, alpha, and crispness.
|
|
- Shipping an icon set where every icon has slightly different stroke thickness or corner behavior.
|
|
- Forgetting that browser tabs, mobile home screens, and social avatars all crop and display branding differently.
|