franzz/heos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
franzz
2026-09-17 15:07:30 +02:00
parent 9d64a8f68f
commit 4f858be918
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/icon-180.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

static/icon-512.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 16 KiB

tools/make_icons.py
+10 -6
View File
@@ -4,14 +4,17 @@
python3 tools/make_icons.py python3 tools/make_icons.py
Writes static/icon-180.png (what iOS uses on the home screen) and 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 static/icon-512.png (Android / the web manifest): the white mark on
transparent background, which iOS lays over black on the home screen. 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. 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 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: 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 Otherwise: pip install playwright && playwright install chromium
""" """
@@ -23,10 +26,11 @@ STATIC = Path(__file__).resolve().parent.parent / "static"
LOGO = STATIC / "logo.svg" LOGO = STATIC / "logo.svg"
SIZES = (180, 512) SIZES = (180, 512)
MARGIN = 0.14 # breathing room, so iOS's rounded mask never clips it 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> PAGE = """<!doctype html>
<style> <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; }} body {{ width: {size}px; height: {size}px; display: grid; place-items: center; }}
img {{ width: {inner}px; height: {inner}px; object-fit: contain; }} img {{ width: {inner}px; height: {inner}px; object-fit: contain; }}
</style> </style>
@@ -49,12 +53,12 @@ def main():
browser = p.chromium.launch(args=["--no-sandbox"]) browser = p.chromium.launch(args=["--no-sandbox"])
for size in SIZES: for size in SIZES:
inner = round(size * (1 - 2 * MARGIN)) 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 = browser.new_page(viewport={"width": size, "height": size})
page.goto(scratch.as_uri()) page.goto(scratch.as_uri())
page.wait_for_timeout(120) # let the SVG paint page.wait_for_timeout(120) # let the SVG paint
target = STATIC / f"icon-{size}.png" target = STATIC / f"icon-{size}.png"
page.screenshot(path=target, omit_background=True) page.screenshot(path=target)
page.close() page.close()
print(f"wrote {target} ({target.stat().st_size} bytes)") print(f"wrote {target} ({target.stat().st_size} bytes)")
browser.close() browser.close()