Favicon matrix and tab identity
TopicFrom the PointSav Documentation
The platform uses inline SVG data URIs for browser-tab favicons — eliminating a network call, scaling without pixelation on every display, and assigning two distinct vendor and customer marks to make the entity behind every tab unambiguous at a glance.
The platform uses inline SVG data URIs for browser-tab favicons — eliminating a network call for the icon file, scaling without pixelation on every display, and assigning two distinct marks so the entity behind every browser tab is unambiguous at a glance. Vendor sites carry a steel-blue square; customer sites carry a Woodfine blue circle. The marks are encoded directly in the page <head>, so a tab identity is established before any other resource loads.
This article describes the engineering rationale and the entity-mark assignment.
[edit]Key Takeaways
- Embedding the SVG as a data URI in the
<link rel="icon">element eliminates the network call for the icon file. Tab identity is established before any other resource loads — no separate favicon HTTP request is issued. - Vector geometry scales without pixelation across display densities. The same few-hundred-byte inline mark is sharp on a low-density laptop and a high-density external monitor. No retina-suffixed asset variants are required.
- Two marks are in use: steel-blue (
#869FB9) square for PointSav-served properties (documentation, design system, vendor wikis) and Woodfine blue (#164679) circle for Woodfine-served properties (project portfolios, corporate disclosures, customer wikis). The assignment is unambiguous — square = vendor, circle = customer. - The geometric distinction between square and circle is preserved independently of colour. A reader with reduced colour vision can still identify which entity's property is open in each browser tab without relying on the colour difference alone.
[edit]Engineering rationale
Embedding the SVG inline in the <link rel="icon"> element as a URL-encoded data URI delivers two practical properties:
- Zero HTTP requests. No network call for an icon file. The favicon is parsed from the page
<head>and rendered immediately. Tab identity is established on first paint. - Resolution-independent rendering. Vector geometry scales without pixelation, so the same icon is sharp on a low-density laptop display and a high-density external monitor. No retina-suffixed asset variants are required.
The cost is a small payload increase per page (a few hundred bytes of inline SVG). The benefit — a faster first-paint and a single canonical asset path — is worth the trade.
[edit]Entity-mark assignment
Two marks are in use across all platform-served pages:
| Mark | Colour | Shape | Identifies |
|---|---|---|---|
| Vendor | Steel blue (#869FB9) |
Square | PointSav-served properties: documentation, design system, vendor-side wikis. |
| Customer | Woodfine blue (#164679) |
Circle | Woodfine-served properties: project portfolios, [[disclosure-substrate |
A reader who has both vendor and customer sites open in adjacent browser tabs can identify the source of each tab without reading the title. The geometric distinction (square vs circle) is preserved when colour vision is reduced.
[edit]See also
- design-system-substrate — the design system substrate that defines the visual language these marks belong to
- anti-homogenization-discipline — the editorial discipline that preserves distinct brand voices alongside this visual identity
- disclosure-substrate — the outbound communications architecture served under the customer mark