Fix icon background for iOS bookmarks
Deploy HEOS panel / deploy (push) Successful in 25s

This commit is contained in:
2026-09-17 15:07:30 +02:00
parent 9d64a8f68f
commit 4f858be918
3 changed files with 10 additions and 6 deletions
+10 -6
View File
@@ -4,14 +4,17 @@
python3 tools/make_icons.py
Writes static/icon-180.png (what iOS uses on the home screen) and
static/icon-512.png (Android / the web manifest): the white mark on a
transparent background, which iOS lays over black on the home screen.
static/icon-512.png (Android / the web manifest): the white mark on
the app's dark background color. iOS flattens a transparent PNG onto
white rather than black, which made the white-on-transparent mark
invisible on the home screen -- so the background needs to be baked
into the PNG itself.
The PNGs are committed, so this only needs running if the logo changes.
It rasterises with headless Chromium, which is a heavy thing to install
for one job -- if you have librsvg to hand, this does the same:
rsvg-convert -w 512 -h 512 static/logo.svg -o static/icon-512.png
rsvg-convert -w 512 -h 512 --background-color '#0a0d14' static/logo.svg -o static/icon-512.png
Otherwise: pip install playwright && playwright install chromium
"""
@@ -23,10 +26,11 @@ STATIC = Path(__file__).resolve().parent.parent / "static"
LOGO = STATIC / "logo.svg"
SIZES = (180, 512)
MARGIN = 0.14 # breathing room, so iOS's rounded mask never clips it
BACKGROUND = "#0a0d14" # matches theme_color/background_color in the manifest
PAGE = """<!doctype html>
<style>
html, body {{ margin: 0; background: transparent; }}
html, body {{ margin: 0; background: {background}; }}
body {{ width: {size}px; height: {size}px; display: grid; place-items: center; }}
img {{ width: {inner}px; height: {inner}px; object-fit: contain; }}
</style>
@@ -49,12 +53,12 @@ def main():
browser = p.chromium.launch(args=["--no-sandbox"])
for size in SIZES:
inner = round(size * (1 - 2 * MARGIN))
scratch.write_text(PAGE.format(size=size, inner=inner))
scratch.write_text(PAGE.format(size=size, inner=inner, background=BACKGROUND))
page = browser.new_page(viewport={"width": size, "height": size})
page.goto(scratch.as_uri())
page.wait_for_timeout(120) # let the SVG paint
target = STATIC / f"icon-{size}.png"
page.screenshot(path=target, omit_background=True)
page.screenshot(path=target)
page.close()
print(f"wrote {target} ({target.stat().st_size} bytes)")
browser.close()