Diff: governance/favicon-matrix
From 1911223 to 1911223
+0 / −0 lines
| Before | After |
|---|---|
| --- | --- |
| schema: foundry-doc-v1 | schema: foundry-doc-v1 |
| title: "Favicon matrix and tab identity" | title: "Favicon matrix and tab identity" |
| slug: favicon-matrix | slug: favicon-matrix |
| category: governance | category: governance |
| type: topic | type: topic |
| quality: complete | quality: complete |
| short_description: "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." | short_description: "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." |
| status: active | status: active |
| bcsc_class: no-disclosure-implication | bcsc_class: no-disclosure-implication |
| last_edited: 2026-05-08 | last_edited: 2026-05-08 |
| editor: pointsav-engineering | editor: pointsav-engineering |
| paired_with: favicon-matrix.es.md | paired_with: favicon-matrix.es.md |
| --- | --- |
| 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. | 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. | This article describes the engineering rationale and the entity-mark assignment. |
| ## Engineering rationale | ## Engineering rationale |
| Embedding the SVG inline in the `<link rel="icon">` element as a URL-encoded data URI delivers two practical properties: | 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. | - **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. | - **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. | 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. |
| ## Entity-mark assignment | ## Entity-mark assignment |
| Two marks are in use across all platform-served pages: | Two marks are in use across all platform-served pages: |
| | Mark | Colour | Shape | Identifies | | | Mark | Colour | Shape | Identifies | |
| |---|---|---|---| | |---|---|---|---| |
| | Vendor | Steel blue (`#869FB9`) | Square | PointSav-served properties: documentation, design system, vendor-side wikis. | | | Vendor | Steel blue (`#869FB9`) | Square | PointSav-served properties: documentation, design system, vendor-side wikis. | |
| | Customer | Woodfine blue (`#164679`) | Circle | Woodfine-served properties: project portfolios, corporate disclosures, customer-side wikis. | | | Customer | Woodfine blue (`#164679`) | Circle | Woodfine-served properties: project portfolios, corporate disclosures, customer-side wikis. | |
| 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. | 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. |
| ## See also | ## See also |
| - [[design-system-substrate]] | - [[design-system-substrate]] |
| - [[anti-homogenization-discipline]] | - [[anti-homogenization-discipline]] |