Favicon: add .ico + apple-touch fallbacks so the stack mark shows in every tab#4
Merged
Merged
Conversation
…rowser tab The favicon was SVG-only, and /favicon.ico + /apple-touch-icon.png both 404'd. Browsers that don't use SVG favicons — notably Safari — request /favicon.ico, get a 404, and fall back to a blank/default icon, so the orange stack mark wasn't showing in the tab even though favicon.svg was already correct. - Add static/favicon.ico (16/32/48, rendered from favicon.svg via librsvg) and static/apple-touch-icon.png (180×180, solid dark square for iOS). - head.html now links .ico + .svg + apple-touch — modern browsers use the crisp SVG, everything else gets the raster fallback. - Same orange layered stack mark as the header/footer brand; no new artwork. Verified: hugo --gc --minify --panicOnWarning clean; htmltest passes; all three icon files resolve in the build; .ico/32px and the apple icon render the mark correctly (checked the rasterized output). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptom: the browser tab wasn't showing the orange stack mark.
Root cause (not just cache): the favicon was SVG-only, and both
/favicon.icoand/apple-touch-icon.pngreturned 404. Browsers that don't render SVG favicons — notably Safari, plus older browsers and some non-tab surfaces — request/favicon.ico, get a 404, and fall back to a blank/default icon. So the mark never appeared even thoughfavicon.svgwas already the correct orange stack.Fix
static/favicon.ico— 16/32/48, rendered from the existingfavicon.svgvia librsvg (rsvg-convert). ImageMagick's built-in SVG engine drops stroked paths, so I rendered with librsvg and packed the ICO from the PNGs.static/apple-touch-icon.png— 180×180, solid dark square (iOS rounds corners itself).head.htmlnow links all three:Same orange layered stack mark as the header/footer brand — no new artwork.
Verification
hugo --gc --minify --panicOnWarning— clean.htmltest— passes (all three icon files resolve in the build).🤖 Generated with Claude Code