Skip to content

Modernize favicon + add PWA web manifest#14

Merged
jansroka merged 1 commit into
mainfrom
modernize-favicon-pwa
Jul 8, 2026
Merged

Modernize favicon + add PWA web manifest#14
jansroka merged 1 commit into
mainfrom
modernize-favicon-pwa

Conversation

@jansroka

@jansroka jansroka commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Implements recommendation #4 — modernizes the dated favicon setup and adds a web manifest.

Before

  • A single 32×32 favicon.png showing just one tile of the logo's diamond-grid mark, declared as shortcut icon.
  • A .jpg as apple-touch-icon (blurry, wrong format for the purpose).
  • No SVG favicon, no theme-color, no web manifest.

After — full icon set derived from the official InÖG logo

  • favicon.svg — scalable SVG favicon (the complete diamond-grid mark, extracted from InÖG_Logo_1.1), crisp at any DPI. SVG-first with the PNG as fallback.
  • favicon.png regenerated at 32×32 (now the full mark, not one tile).
  • apple-touch-icon.png (180×180) — mark on brand navy #041735, since iOS ignores transparency.
  • icon-192.png / icon-512.png (transparent) + icon-512-maskable.png (navy, generous safe-zone padding for Android adaptive icons).
  • site.webmanifest — name/short_name/description, theme_color/background_color #041735, and the icon set.
  • head.html — SVG favicon + PNG fallback, apple-touch-icon, rel="manifest", and theme-color meta.

Icons were generated from the SVG (cairosvg + Pillow) and visually checked — the apple-touch and maskable icons render the full mark centered on navy with correct padding.

Notes

  • All assets are same-origin, so the existing CSP (default-src 'self') covers the manifest fetch — no CSP change needed.
  • The now-unused webclip.jpg is left in place (image removals were out of scope).

Verification

Full CI suite run locally: jekyll build, purge-css, html-proofer ("finished successfully"), and prettier --check (against real 3.9.4, rtk-bypassed) all pass. Rendered <link>/theme-color tags and the published manifest + 5 icon files confirmed in _site.

🤖 Generated with Claude Code

Replaces the dated single-format favicon setup (a 32x32 PNG showing just one
tile of the logo mark, plus a .jpg apple-touch-icon) with a full icon set
derived from the official InÖG logo:

- favicon.svg — scalable SVG favicon (the full diamond-grid mark, extracted
  from InÖG_Logo_1.1), crisp on any DPI
- favicon.png regenerated at 32x32 as PNG fallback (now the full mark)
- apple-touch-icon.png (180x180, mark on brand navy #041735)
- icon-192 / icon-512 (transparent) and icon-512-maskable (navy, safe-zone
  padded for Android adaptive icons) for the manifest
- site.webmanifest with name/short_name/description, theme_color and
  background_color #041735, and the icon set
- head.html: SVG-first favicon with PNG fallback, apple-touch-icon, manifest
  link, and a theme-color meta

All assets are same-origin, so the existing CSP (default-src 'self') covers
the manifest fetch with no policy change. The now-unused webclip.jpg is left
in place (image removals out of scope).

Verified: build, purge-css, html-proofer, and prettier --check all pass;
rendered head tags and published manifest/icons confirmed in _site; icons
visually checked.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@jansroka jansroka merged commit 093e378 into main Jul 8, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant