web: link the SVG favicon, add apple-touch-icon and a manifest, and cut the 370KB .ico #132

New issue

Open

opened 2026-08-27 03:25:13 +00:00 by coilyco-ops · 0 comments

coilyco-ops commented

2026-08-27 03:25:13 +00:00

Collaborator

Split out of coilysiren/inbox#406 so it can ship without waiting on the emblem rulings. Kai asked for a circle-back tracker on 2026-08-24.

Why this is separable

#406 deliverable 2 covers two different things. The mark has to survive 16px, and that is blocked on three of Kai's rulings. The plumbing around it is blocked on nothing and is worth landing on its own, because every fix here survives the emblem change unaltered. When #406 regenerates the icon files, the <head> links and the manifest keep pointing at the same paths.

Current state, verified on the live site 2026-08-24

coilysiren.me <head> links exactly one icon:

<link rel="icon" href="/images/favicon.ico" type="image/x-icon">

Four separate problems behind that one line.

The .ico is 370,070 bytes and ships on every page load. It carries six frames at 16, 32, 48, 64, 128, and 256. Every -favicon.ico in src/images/icons/ is the same size, so this is systemic rather than one bad export.
An SVG already exists and is not referenced. src/images/icons/coily-siren-favicon.svg is 872 bytes. A modern browser would take it over the .ico and render sharp at every size, and it is sitting in the repository unused.
No apple-touch-icon. Saving the site to an iOS home screen produces a screenshot thumbnail rather than the mark.
No web manifest. No 192px or 512px entries, so installed and Android surfaces have nothing to use.

What changes

Link coily-siren-favicon.svg as rel="icon" type="image/svg+xml", with the .ico kept only as the legacy fallback.
Rebuild the .ico to a small frame set. 16, 32, and 48 is the useful range. The 128 and 256 frames are what make it 370KB and no consumer needs them once an SVG is present.
Add apple-touch-icon at 180px.
Add a web manifest with 192px and 512px icons.

All of it lands in the Eleventy layout that emits <head>, alongside the og tags Kai added in 23ee45c9.

Explicitly not in scope

New emblems. That is #406, and this issue must not redraw or resize any mark.
The current mark fails at 16px, which #406 records and this issue does not fix. Landing the plumbing first means the failure is at least served efficiently and in vector, and the emblem work then drops into wiring that already works.

Notes

coilysiren/website is not resident. Work it from a task-scoped temporary clone and remove the clone once the work lands.
This is site maintenance rather than career-surface content, so the direct-to-main rule in kai-bio-surface applies rather than the PR rule that governed the resume.
Verify by loading the site and confirming the tab icon still renders, then re-running just test-quick.

Done means

SVG favicon linked and served
.ico rebuilt small and kept as fallback only
apple-touch-icon at 180px present
Web manifest present with 192px and 512px entries
Page weight for the icon set materially down from 370KB
just test-quick green

Split out of `coilysiren/inbox#406` so it can ship without waiting on the emblem rulings. Kai asked for a circle-back tracker on 2026-08-24. ## Why this is separable #406 deliverable 2 covers two different things. The **mark** has to survive 16px, and that is blocked on three of Kai's rulings. The **plumbing** around it is blocked on nothing and is worth landing on its own, because every fix here survives the emblem change unaltered. When #406 regenerates the icon files, the `<head>` links and the manifest keep pointing at the same paths. ## Current state, verified on the live site 2026-08-24 `coilysiren.me` `<head>` links exactly one icon: ``` <link rel="icon" href="/images/favicon.ico" type="image/x-icon"> ``` Four separate problems behind that one line. * **The `.ico` is 370,070 bytes** and ships on every page load. It carries six frames at 16, 32, 48, 64, 128, and 256. Every `-favicon.ico` in `src/images/icons/` is the same size, so this is systemic rather than one bad export. * **An SVG already exists and is not referenced.** `src/images/icons/coily-siren-favicon.svg` is 872 bytes. A modern browser would take it over the `.ico` and render sharp at every size, and it is sitting in the repository unused. * **No `apple-touch-icon`.** Saving the site to an iOS home screen produces a screenshot thumbnail rather than the mark. * **No web manifest.** No `192px` or `512px` entries, so installed and Android surfaces have nothing to use. ## What changes * Link `coily-siren-favicon.svg` as `rel="icon" type="image/svg+xml"`, with the `.ico` kept only as the legacy fallback. * Rebuild the `.ico` to a small frame set. 16, 32, and 48 is the useful range. The 128 and 256 frames are what make it 370KB and no consumer needs them once an SVG is present. * Add `apple-touch-icon` at 180px. * Add a web manifest with 192px and 512px icons. All of it lands in the Eleventy layout that emits `<head>`, alongside the `og` tags Kai added in `23ee45c9`. ## Explicitly not in scope * **New emblems.** That is #406, and this issue must not redraw or resize any mark. * The current mark fails at 16px, which #406 records and this issue does not fix. Landing the plumbing first means the failure is at least served efficiently and in vector, and the emblem work then drops into wiring that already works. ## Notes * `coilysiren/website` is not resident. Work it from a task-scoped temporary clone and remove the clone once the work lands. * This is site maintenance rather than career-surface content, so the direct-to-main rule in `kai-bio-surface` applies rather than the PR rule that governed the resume. * Verify by loading the site and confirming the tab icon still renders, then re-running `just test-quick`. ## Done means - [ ] SVG favicon linked and served - [ ] `.ico` rebuilt small and kept as fallback only - [ ] `apple-touch-icon` at 180px present - [ ] Web manifest present with 192px and 512px entries - [ ] Page weight for the icon set materially down from 370KB - [ ] `just test-quick` green

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

coilysiren/website#132

No description provided.

Rows
Columns