Logo Rule

Favicon & App Icon Construction

How to derive a legible favicon and app icon from the full logo.

Platform: bothTags: logo, favicon, app-icon, brand, small-size

Rule

Favicons and app icons use the logo MARK only - never the full wordmark, which is illegible at small sizes. The mark is optically centered in the icon canvas with its own padding (not the logo clear space). App icons fill their platform-required safe area and provide a solid background (no transparency) so the mark reads on any home screen.

Specifications

minimum SizeFavicon supplied at 16, 32, and 48px; app icons at each platform-required size up to 512px

clear SpaceOptical padding ~10–15% of the icon canvas around the mark

color Variants

Solid background app icon (brand or neutral)Monochrome mask version for platform tinting

Common Misuses

Cramming the full wordmark into a 16px favicon

Transparent app-icon backgrounds that disappear on matching wallpapers

Using logo clear space (too large) instead of tighter icon padding

Different mark proportions between favicon and app icon

Letting the mark touch the icon edges with no safe area