@cowwo/dsh-icon-custom 0.6.0 → 0.7.0

package/README.md

@@ -1,8 +1,8 @@
 # dsh-icon-custom
 
-Customize the browser tab icon (favicon) for DSH: upload an SVG / PNG / ICO from the settings page, it applies instantly and persists across reloads and restarts.
+Customize the browser tab icon (favicon) for DSH: upload an SVG / PNG / ICO / JPEG from the settings page, it applies instantly and persists across reloads and restarts. From 0.7.0 the PWA / logo path derives the canonical icon sizes automatically so the same upload works on Android, iOS and tablets.
 
-Zero third‑party runtime dependencies.
+Pure-JS dependency (`jimp`) — no native binaries, so it installs cleanly under pnpm's supply-chain policy.
 
 ## Install
 
@@ -21,7 +21,11 @@ Scoped name: `@cowwo/dsh-icon-custom`.
 
 ## PWA install icon
 
-Tick **同时替换 PWA 安装图标** (checked state is remembered per icon) to also replace the icon of the installed PWA — the icon used on the desktop / home screen after the site is installed as an app. The plugin rewrites the `/manifest.webmanifest` icons entry to point at your icon (SVG is advertised as `sizes: "any"`, PNG reports its real dimensions, ICO its first entry). For iPhones/iPads a `<link rel="apple-touch-icon">` is pointed at the custom icon as well, which only works with a PNG (iOS ignores SVG touch icons).
+Tick **同时替换 PWA 安装图标** (checked state is remembered per icon) to also replace the icon of the installed PWA — the icon used on the desktop / home screen after the site is installed as an app. The plugin rewrites the `/manifest.webmanifest` icons entry to a canonical derived PNG set: **192×192 `any`**, **512×512 `any`**, and a **512×512 `maskable`** variant (opaque background) so Android launchers crop cleanly. For iPhones/iPads a `<link rel="apple-touch-icon">` points at a derived **180×180 opaque PNG** (iOS ignores SVG touch-icons and transparent images).
+
+SVG is rasterized to a 512×512 PNG in the browser before upload, and ICO has its embedded PNG extracted server-side, so any format produces a usable cross-platform icon. A derivation failure falls back to serving the original upload. A well-prepared **512×512 PNG** gives the best results.
+
+The option is **off by default**: without it, behavior is identical to before and the platform manifest is served verbatim. Browsers re-check the manifest on their own schedule, so an **already-installed** PWA usually keeps its old icon until you re-install it (or the browser picks up the new `src` on its next manifest fetch).
 
 ![PWA install icon option](./docs/pwa-option.png)
 
@@ -39,20 +43,14 @@ Notes:
 - It can be toggled at any time after upload — no re-upload needed.
 - This only affects the sidebar brand mark (the one next to `deepseek HARNESS`); PWA/installed-app icons are a separate option above.
 
-Notes:
-
-- The option is **off by default**: without it, behavior is identical to before and the platform manifest is served verbatim.
-- The option can be toggled at any time after upload — no need to re-upload the file.
-- Browsers re-check the manifest on their own schedule. An **already-installed** PWA usually keeps its old icon until you re-install it (or the browser's next manifest update picks up the new `src`).
-- PNG is the recommended format for the PWA icon (UI / launcher icons are rasterized); the same uploaded file is used, never re-encoded.
-
 ## Format support
 
-- **SVG** — recognized by content (`<svg`), validated against script / event‑handler / `javascript:` injection.
+- **SVG** — recognized by content (`<svg`), validated against script / event‑handler / `javascript:` injection. Rasterized to PNG in the browser before upload.
 - **PNG** — recognized by magic bytes (tolerates a stray leading byte some optimizers emit), structurally checked to IHDR → … → IEND.
-- **ICO / CUR** — CUR is accepted as ICO.
+- **ICO / CUR** — CUR is accepted as ICO. Its embedded PNG is extracted server-side; a BMP-only ICO is not rasterizable and falls back to the original.
+- **JPEG** — accepted as-is and treated as a raster baseline.
 
-Files are stored verbatim (never re‑encoded), so transparency and quality are preserved.
+The uploaded file is stored verbatim (never re‑encoded) so the favicon keeps its transparency and quality; the derived PWA / logo PNG set is generated separately from it.
 
 ## Persistence
 

package/README.zh.md

@@ -1,8 +1,8 @@
 # dsh-icon-custom
 
-自定义 DSH 浏览器标签页图标(favicon):在设置页上传 SVG / PNG / ICO,立即生效并持久保存,刷新或重启后都保留。
+自定义 DSH 浏览器标签页图标(favicon):在设置页上传 SVG / PNG / ICO / JPEG,立即生效并持久保存,刷新或重启后都保留。从 0.7.0 起,PWA / Logo 路径会自动派生各平台的标准图标尺寸,同一张上传图即可适配安卓、iOS 和平板。
 
-零第三方运行时依赖。
+纯 JS 依赖(`jimp`),无原生二进制,在 pnpm 供应链政策下也能干净安装。
 
 ## 安装
 
@@ -21,7 +21,11 @@ dsh plugin --profile web add dsh-icon-custom
 
 ## PWA 安装图标
 
-勾选**同时替换 PWA 安装图标**(勾选状态按图标记录保存),网页「安装为应用 / 添加到主屏幕」后,桌面和启动器上的图标也会换成你上传的这张。插件会把 `/manifest.webmanifest` 的 icons 项改写为你的图标(SVG 标注 `sizes: "any"`,PNG 按真实尺寸标注,ICO 取第一条目尺寸);在 iPhone/iPad 上还会把 `<link rel="apple-touch-icon">` 指向你的图标——但这只在你的图标是 **PNG** 时有效(iOS 不支持 SVG 触屏图标)。
+勾选**同时替换 PWA 安装图标**(勾选状态按图标记录保存),网页「安装为应用 / 添加到主屏幕」后,桌面和启动器上的图标也会换成你上传的这张。插件会把 `/manifest.webmanifest` 的 icons 项改写为自动派生的标准 PNG 集合:**192×192 `any`**、**512×512 `any`**,以及一个 **512×512 `maskable`** 变体(不透明背景),让安卓启动器能干净裁剪;在 iPhone/iPad 上还会把 `<link rel="apple-touch-icon">` 指向派生的 **180×180 不透明 PNG**(iOS 不支持 SVG 触屏图标,也不接受透明图)。
+
+SVG 会在浏览器里先栅格化成 512×512 PNG 再上传,ICO 则由后端提取内嵌 PNG,所以任何格式都能生成可用的跨平台图标。若派生失败则回退为原样透传上传图。**推荐上传规范的 512×512 PNG**,效果最佳。
+
+该选项**默认不勾选**:不勾选时行为与之前完全一致,平台 manifest 原样透传。浏览器按自己的节奏重新检查 manifest,**已经安装**的应用通常要等重新安装(或浏览器下一次 manifest 更新读到新的 `src`)才会换图标。
 
 ![同时替换 PWA 安装图标选项](./docs/pwa-option.png)
 
@@ -39,20 +43,14 @@ dsh plugin --profile web add dsh-icon-custom
 - 上传后随时可以勾选/取消,不用重新上传文件。
 - 只影响侧边栏的品牌图标(deepseek HARNESS 旁边那只);PWA 安装图标是上面的另一个选项。
 
-说明:
-
-- 该选项**默认不勾选**:不勾选时行为与之前完全一致,平台 manifest 原样透传。
-- 上传后随时可以勾选/取消,不用重新上传文件。
-- 浏览器按自己的节奏重新检查 manifest;**已经安装**的应用通常要等重新安装(或浏览器下一次 manifest 更新读到新的 `src`)才会换图标。
-- PWA 图标推荐上传 **PNG**(桌面 / 启动器图标通常会被栅格化);复用同一张上传图,不重新编码。
-
 ## 支持的格式
 
-- **SVG** — 按内容(`<svg`)识别,并拦截 `<script>` / 事件属性 / `javascript:` 注入。
+- **SVG** — 按内容(`<svg`)识别,并拦截 `<script>` / 事件属性 / `javascript:` 注入。上传前会在浏览器里栅格化成 PNG。
 - **PNG** — 按魔数识别(容忍部分优化器产生的前导字节),并校验 IHDR → … → IEND 结构。
-- **ICO / CUR** — CUR 当作 ICO 接受。
+- **ICO / CUR** — CUR 当作 ICO 接受。后端会提取内嵌的 PNG;仅含 BMP 帧的 ICO 无法栅格化,会回退为原样透传。
+- **JPEG** — 直接接受,当作位图基准。
 
-图标文件**原样保存,不重新编码**,因此透明背景和画质都不会损失。
+上传的原始文件**原样保存,不重新编码**,favicon 的透明背景和画质都不损失;派生的 PWA / Logo PNG 集合是从它单独生成的。
 
 ## 持久化
 

package/client/client.js

@@ -14,7 +14,8 @@ window.__ModuleLoader__.load({
 			current: "当前图标",
 			none: "使用平台默认图标",
 			upload: "上传图标",
-			uploadHint: "支持 SVG、PNG、ICO,最大 10 MB。上传后立即生效,刷新页面也会保留。",
+			uploadHint: "支持 SVG、PNG、ICO,最大 10 MB。SVG 会自动转成 PNG,自动适配安卓/iOS/平板的主屏图标。上传后立即生效,刷新页面也会保留。",
+			svgFail: "该 SVG 无法转换,请改用 PNG。",
 			reset: "恢复默认",
 			resetHint: "清除自定义图标并回到平台默认图标。",
 			replace: "替换",
@@ -39,7 +40,8 @@ window.__ModuleLoader__.load({
 			current: "Current icon",
 			none: "Using the platform default icon",
 			upload: "Upload",
-			uploadHint: "SVG, PNG or ICO, up to 10 MB. Applies instantly and persists across reloads.",
+			uploadHint: "SVG, PNG or ICO, up to 10 MB. SVG is auto-rasterized to PNG, and sizes are derived to fit Android/iOS/tablet home-screen icons. Applies instantly and persists across reloads.",
+			svgFail: "This SVG could not be rasterized. Use a PNG instead.",
 			reset: "Reset",
 			resetHint: "Clear the custom icon and use the platform default.",
 			replace: "Replace",
@@ -78,6 +80,39 @@ window.__ModuleLoader__.load({
 				return new Date(ms).toLocaleString();
 			} catch { return "—"; }
 		}
+		// Rasterize an SVG file to a 512x512 PNG data URL in the browser.
+		// We do this on the client because (a) browsers rasterize SVG reliably,
+		// and (b) the host's pure-JS Jimp cannot decode SVG. ICO is NOT handled
+		// here — browsers do not reliably draw .ico into a canvas, so the host
+		// extracts the embedded PNG instead. Returns a `data:image/png;base64,..`
+		// string, or throws when the SVG cannot be rasterized.
+		function svgToPng(file) {
+			return new Promise((resolve, reject) => {
+				const url = URL.createObjectURL(file);
+				const img = new Image();
+				img.onload = () => {
+					try {
+						const size = 512;
+						const canvas = document.createElement("canvas");
+						canvas.width = size;
+						canvas.height = size;
+						const ctx = canvas.getContext("2d");
+						ctx.fillStyle = "#fff"; // opaque backdrop for iOS tiles
+						ctx.fillRect(0, 0, size, size);
+						const scale = Math.min(size / img.width, size / img.height);
+						const w = img.width * scale, h = img.height * scale;
+						ctx.drawImage(img, (size - w) / 2, (size - h) / 2, w, h);
+						resolve(canvas.toDataURL("image/png"));
+					} catch (e) {
+						reject(e);
+					} finally {
+						URL.revokeObjectURL(url);
+					}
+				};
+				img.onerror = () => { URL.revokeObjectURL(url); reject(new Error("svg-rasterize")); };
+				img.src = url;
+			});
+		}
 		// In-package brand-mark bridge: the settings section pushes the current
 		// logo state here; the sidebar brand-mark component subscribes to it.
 		// Both live in this same module — no RPC loop, no cross-package events.
@@ -92,7 +127,8 @@ window.__ModuleLoader__.load({
 		function syncLogo(status) {
 			emitLogo({
 				enabled: status !== null && typeof status === "object" && status.active === true && status.logo === true,
-				rev: status && status.rev ? status.rev : null
+				rev: status && status.rev ? status.rev : null,
+				png: !!(status && typeof status === "object" && status.png === true)
 			});
 		}
 		//#endregion
@@ -119,8 +155,11 @@ window.__ModuleLoader__.load({
 			const size = (props && props.size) || 24;
 			const custom = state && state.enabled === true && state.rev;
 			const style = { width: size, height: size, objectFit: "contain", display: "block" };
+			const src = custom
+				? (state.png === true ? `/icon-custom-192.png?v=${state.rev}` : `/icon-custom.svg?v=${state.rev}`)
+				: "/favicon.svg";
 			return React.createElement("img", {
-				src: custom ? `/icon-custom.svg?v=${state.rev}` : "/favicon.svg",
+				src,
 				alt: "",
 				style
 			});
@@ -160,14 +199,15 @@ window.__ModuleLoader__.load({
 			const applyLive = React.useCallback((s) => {
 				if (!s || s.active !== true) return;
 				const link = document.querySelector('link[rel="icon"]');
-				const href = `/icon-custom.svg?v=${s.rev}`;
+				const href = s.png === true ? `/icon-custom-192.png?v=${s.rev}` : `/icon-custom.svg?v=${s.rev}`;
+				const type = s.png === true ? "image/png" : (s.mime || "image/svg+xml");
 				if (link) {
 					link.setAttribute("href", href);
-					link.setAttribute("type", s.mime || "image/svg+xml");
+					link.setAttribute("type", type);
 				} else {
 					const el = document.createElement("link");
 					el.rel = "icon";
-					el.type = s.mime || "image/svg+xml";
+					el.type = type;
 					el.href = href;
 					document.head.appendChild(el);
 				}
@@ -196,12 +236,27 @@ window.__ModuleLoader__.load({
 				}
 				const reader = new FileReader();
 				reader.onload = async () => {
-					const data = typeof reader.result === "string" ? reader.result : null;
+					let data = typeof reader.result === "string" ? reader.result : null;
 					if (!data) { setError(t("fail")); return; }
+					// Rasterize SVG to PNG in the browser so the host always has
+					// a rasterizable baseline and iOS/apple-touch-icon works.
+					// ICO is left as-is; the host extracts its embedded PNG.
+					let mime = file.type || "image/svg+xml";
+					if (mime === "image/svg+xml" || /\.svg$/i.test(file.name)) {
+						setBusy(true);
+						try {
+							data = await svgToPng(file);
+							mime = "image/png";
+						} catch {
+							setBusy(false);
+							setError(t("svgFail"));
+							return;
+						}
+					}
 					setBusy(true);
 					try {
 						const resp = await rpc.call("/api", "iconCustom/setIcon", {
-							args: { request: { mime: file.type || "image/svg+xml", name: file.name, pwa: pwaEnabled, logo: logoEnabled, data } }
+							args: { request: { mime, name: file.name, pwa: pwaEnabled, logo: logoEnabled, data } }
 						});
 						if (resp && resp.ok === true) {
 							setStatus(resp.value);

package/lib/index.js

@@ -10,13 +10,18 @@
  * index + the `activeId` marker. "reset" clears only `activeId`; icon files are
  * kept for a future icon-library UI. This round writes exactly one slot.
  *
- * Zero third-party deps: Node's Buffer gives a binary-safe base64 decode (the
- * dynamic-prototype bug was a lossy host `atob`; this never goes through it) and
- * a structural PNG walk confirms the bytes actually decode as a PNG without
- * requiring an exact chunk CRC (optimizers rewrite those and browsers still
- * render the file).
+ * From 0.7.0 the PWA/logo path derives a PNG of several canonical sizes with
+ * Jimp (pure JS, no native binary): 192/512 for Android manifest entries (incl.
+ * a maskable 512) and a 180x180 opaque PNG for iOS/apple-touch-icon. SVG and
+ * ICO uploads are normalized to a PNG baseline first (SVG via the browser canvas
+ * on the client; ICO by extracting the embedded PNG image server-side — browsers
+ * do not reliably rasterize .ico). A failure to derive falls back to serving the
+ * original bytes so the plugin never hard-fails.
+ * `library/<id>.derived/*.png` holds the derived set; `library.json` records
+ * `derived: true/false` so we know whether to serve the canonical sizes.
  */
 import { TypertRemoteService } from '@deepseek-ai/dsh-typert-protocol'
+import { Jimp } from 'jimp'
 import { readFileSync } from 'node:fs'
 import { mkdir, rename, writeFile } from 'node:fs/promises'
 import { createRequire } from 'node:module'
@@ -28,8 +33,21 @@ const MAX_BYTES = 10 * 1024 * 1024 // 10 MB
 const MIME_EXT = {
 	'image/svg+xml': 'svg',
 	'image/png': 'png',
+	'image/jpeg': 'jpg',
 	'image/x-icon': 'ico'
 }
+// Canonical derived sizes for the PWA/logo path. `file` is the stored basename
+// (without ext) under `library/<id>.derived/`; `url` the public route suffix.
+// `maskable` variants get an opaque background so Android launchers crop cleanly;
+// `apple` is opaque-white so iOS shows a solid tile instead of a transparent hole.
+const DERIVED_SIZES = [
+	{ file: '192', url: '192', size: 192, maskable: false },
+	{ file: '512', url: '512', size: 512, maskable: false },
+	{ file: '512-maskable', url: '512-maskable', size: 512, maskable: true },
+	{ file: 'apple-180', url: 'apple-180', size: 180, apple: true }
+]
+// How far past the target a source may exceed before we downscale (not a file
+// size cap; Jimp just resizes to the canonical square).
 // PNG magic is 89 50 4e 47 0d 0a 1a 0a; we match the tail 7 bytes so a stray
 // leading byte (some encoders emit 0xfd) still identifies a genuine PNG.
 const PNG_MAGIC = [0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]
@@ -77,14 +95,27 @@ function indexOfPattern(buf, pattern, window) {
 /** Detect the real image type from content bytes, not the declared mime. */
 function detectMime(buf) {
 	if (indexOfPattern(buf, PNG_MAGIC, 16) !== -1) return 'image/png'
-	if (indexOfPattern(buf, ICO_MAGIC, 16) !== -1) return 'image/x-icon'
-	if (indexOfPattern(buf, CUR_MAGIC, 16) !== -1) return 'image/x-icon'
+	// ICO/CUR magic must appear at the very start; a loose scan can false-positive
+	// on a JPEG header (e.g. JFIF bytes `00 00 01` at offset 13). Match at 0 only.
+	if (matchAt(buf, ICO_MAGIC, 0)) return 'image/x-icon'
+	if (matchAt(buf, CUR_MAGIC, 0)) return 'image/x-icon'
+	// JPEG starts with FF D8 FF (byte 0 is 0xFF, byte 1 is 0xD8).
+	if (buf[0] === 0xff && buf[1] === 0xd8 && buf[2] === 0xff) return 'image/jpeg'
 	const text = buf.toString('utf8').replace(/^\uFEFF/, '').replace(/^\s+/, '')
 	if (/^<svg[\s>]/i.test(text)) return 'image/svg+xml'
 	if (/^<\?xml/i.test(text) && /<svg[\s>]/i.test(text)) return 'image/svg+xml'
 	return null
 }
 
+/** Match a byte pattern exactly at `offset`. */
+function matchAt(buf, pattern, offset) {
+	if (offset + pattern.length > buf.length) return false
+	for (let j = 0; j < pattern.length; j++) {
+		if (buf[offset + j] !== pattern[j]) return false
+	}
+	return true
+}
+
 /**
  * Walk the PNG chunk structure from the magic offset and require it to be a
  * well-formed sequence: starts with IHDR, traverses chunks by their declared
@@ -196,15 +227,72 @@ function iconSizes(mime, bytes) {
 		const label = offset === -1 ? null : pngLabel(bytes, offset)
 		if (label !== null) return label
 	} else if (mime === 'image/x-icon') {
-		const offset = indexOfPattern(bytes, ICO_MAGIC, 16)
-		const cur = indexOfPattern(bytes, CUR_MAGIC, 16)
-		const at = offset !== -1 ? offset : cur
+		const at = matchAt(bytes, ICO_MAGIC, 0) ? 0 : (matchAt(bytes, CUR_MAGIC, 0) ? 0 : -1)
 		const size = at === -1 ? null : icoFirstSize(bytes, at)
 		if (size !== null) return `${size.w}x${size.h}`
 	}
 	return 'any'
 }
 
+/**
+ * Extract the embedded PNG image from an ICO/CUR container. ICO is a header
+ * (6 bytes) + a directory of 16-byte entries; each entry points at an image
+ * that is either a PNG or a BMP. We return the first PNG-encoded image. If the
+ * ICO only packs BMP frames (old-style) we cannot rasterize it without a BMP
+ * decoder, so we throw and let the caller fall back.
+ * (Browsers do not reliably rasterize .ico into a <canvas>, which is exactly
+ * why this extraction happens server-side rather than on the client.)
+ */
+function extractIcoPng(buf) {
+	const at = matchAt(buf, ICO_MAGIC, 0) ? 0 : (matchAt(buf, CUR_MAGIC, 0) ? 0 : -1)
+	if (at === -1) throw new Error('无法识别 ICO 文件')
+	if (buf.length < at + 6) throw new Error('ICO 数据不完整')
+	const count = buf.readUInt16LE(at + 4)
+	if (count === 0) throw new Error('ICO 没有图像')
+	const dirStart = at + 6
+	for (let i = 0; i < count; i++) {
+		const entry = dirStart + i * 16
+		if (buf.length < entry + 16) break
+		const byteSize = buf.readUInt32LE(entry + 8)
+		const imgOffset = buf.readUInt32LE(entry + 12)
+		if (imgOffset + byteSize > buf.length || imgOffset < dirStart) continue
+		const img = buf.subarray(imgOffset, imgOffset + byteSize)
+		// A PNG image begins with the 8-byte signature (89 50 4e 47 ...).
+		if (img.length >= 8 && img[0] === 0x89 && img[1] === 0x50 && img[2] === 0x4e && img[3] === 0x47) {
+			return img
+		}
+	}
+	throw new Error('该 ICO 仅含 BMP 帧,无法自动转换,请改用 PNG')
+}
+
+/** Read an ICO/CUR PNG and re-encode to a canonical square PNG via Jimp. */
+async function pngFromBytes(bytes) {
+	return Jimp.fromBuffer(bytes)
+}
+
+/**
+ * Derive the canonical PNG set for a source image. `source` is the working
+ * PNG bytes (already normalized: PNG uploads directly, SVG via the client
+ * canvas, ICO by {@link extractIcoPng}). Returns a map of `file` -> Buffer for
+ * each DERIVED_SIZES entry, or throws if the source cannot be decoded.
+ */
+async function deriveSizes(source) {
+	const img = await Jimp.fromBuffer(source)
+	const out = {}
+	for (const spec of DERIVED_SIZES) {
+		const square = img.clone().contain({ w: spec.size, h: spec.size, alignX: 0.5, alignY: 0.5 })
+		if (spec.maskable === true || spec.apple === true) {
+			// Opaque white backdrop so launchers/iOS render a solid tile.
+			const canvas = new Jimp({ width: spec.size, height: spec.size, color: 0xffffffff })
+			canvas.composite(square, 0, 0)
+			out[spec.file] = await canvas.getBuffer('image/png')
+		} else {
+			out[spec.file] = await square.getBuffer('image/png')
+		}
+	}
+	return out
+}
+
 /**
  * 图标替换服务:保存/读取用户上传的 favicon,并通过 webServer 提供
  * `/icon-custom.svg` 路由与 index 头部改写。通过 typert
@@ -238,6 +326,15 @@ export class FaviconCustomService extends TypertRemoteService {
 			path: '/manifest.webmanifest',
 			handler: (request, response) => this._handleManifest(request, response)
 		}), 'dsh-icon-custom: /manifest.webmanifest route')
+		// Derived PNGs: /icon-custom-192.png, /icon-custom-512.png,
+		// /icon-custom-512-maskable.png, /icon-custom-apple-180.png.
+		for (const spec of DERIVED_SIZES) {
+			ctx.effect(() => ctx.webServer.register({
+				kind: 'exact',
+				path: `/icon-custom-${spec.url}.png`,
+				handler: (request, response) => this._handleDerivedIcon(request, response, spec.url)
+			}), `dsh-icon-custom: /icon-custom-${spec.url}.png route`)
+		}
 		ctx.effect(() => ctx.webServer.tapIndex((html) => this._rewriteIndex(html)),
 			'dsh-icon-custom: index tap')
 	}
@@ -255,10 +352,32 @@ export class FaviconCustomService extends TypertRemoteService {
 			const rec = icons[activeId]
 			if (rec === null || typeof rec !== 'object') { this.library.activeId = null; return }
 			const bytes = readFileSync(join(this.libraryDir, `${activeId}.${rec.ext}`))
-			this.current = { ...rec, bytes }
+			// Re-derive lazily when the record predates the derived set (a
+			// pre-0.7.0 icon, or a failed derivation), so /icon-custom-*.png
+			// still work after an upgrade. A failure just keeps derived=false.
+			const pngBaseline = this._loadBaseline(rec, bytes)
+			this.current = { ...rec, bytes, pngBaseline }
 		} catch { /* no persisted icon yet */ }
 	}
 
+	/**
+	 * Best-effort rasterized baseline for the active icon: prefer the PNG
+	 * derived set; for a PNG/ICO source, derive from the stored bytes if the
+	 * derived directory is missing. Always returns a PNG Buffer or null.
+	 */
+	_loadBaseline(rec, bytes) {
+		const derivedDir = join(this.libraryDir, `${rec.id}.derived`)
+		try {
+			const p512 = readFileSync(join(derivedDir, '512.png'))
+			return p512
+		} catch { /* fall through to derive from original bytes */ }
+		try {
+			if (rec.mime === 'image/png' || rec.mime === 'image/jpeg') return bytes
+			if (rec.mime === 'image/x-icon') return extractIcoPng(bytes)
+		} catch { /* no rasterizable baseline */ }
+		return null
+	}
+
 	/** Persist the library index to disk (does not touch icon files). */
 	_saveLibrary() {
 		return writeFile(this.indexPath, JSON.stringify(this.library, null, 2))
@@ -268,8 +387,8 @@ export class FaviconCustomService extends TypertRemoteService {
 	status() {
 		const c = this.current
 		return c === null
-			? { active: false, pwa: false, logo: false, rev: null, mime: null, ext: null, name: null, size: null, savedAt: null }
-			: { active: true, pwa: c.pwa === true, logo: c.logo === true, rev: c.rev, mime: c.mime, ext: c.ext, name: c.name, size: c.size, savedAt: c.savedAt }
+			? { active: false, pwa: false, logo: false, png: false, rev: null, mime: null, ext: null, name: null, size: null, savedAt: null }
+			: { active: true, pwa: c.pwa === true, logo: c.logo === true, png: c.pngBaseline !== null, rev: c.rev, mime: c.mime, ext: c.ext, name: c.name, size: c.size, savedAt: c.savedAt }
 	}
 
 	/** typert endpoint: read current status. */
@@ -298,20 +417,63 @@ export class FaviconCustomService extends TypertRemoteService {
 		const tmp = join(this.libraryDir, `.${id}.${ext}.tmp`)
 		await writeFile(tmp, bytes)
 		await rename(tmp, join(this.libraryDir, `${id}.${ext}`))
+		// Derive a PNG baseline for the PWA/logo path. SVG was already turned
+		// into a PNG by the client canvas before it reached setIcon (so a client
+		// SVG arrives as `image/png`); ICO is decoded here by extracting the
+		// embedded PNG. PNG/JPEG pass through as-is. A derivation failure is not
+		// fatal: we keep `derived: false` and serve the original bytes, so the
+		// favicon still works and only the multi-size PWA/logo set is skipped.
+		const derivedSizes = await this._deriveFor(id, mime, bytes)
 		const rec = {
 			id,
 			mime, ext,
 			pwa, logo,
+			derived: derivedSizes !== null,
 			name: typeof name === 'string' && name.trim().length > 0 ? name.trim().slice(0, 128) : null,
 			size: bytes.length, savedAt: now, rev
 		}
 		this.library.icons[id] = rec
 		this.library.activeId = id
 		await this._saveLibrary().catch(() => {}) // index is advisory; icon file is authoritative
-		this.current = { ...rec, bytes }
+		this.current = { ...rec, bytes, pngBaseline: derivedSizes ? derivedSizes.baseline : null }
 		return this.status()
 	}
 
+	/**
+	 * Derive the canonical PNG set from an uploaded icon's bytes. Returns
+	 * `{ baseline, sizes }` where `baseline` is the working PNG Buffer (used for
+	 * logo/favicon serving when the source is SVG/ICO) and `sizes` is the
+	 * file->Buffer map for the DERIVED_SIZES set; or null when the source cannot
+	 * be rasterized (e.g. BMP-only ICO), in which case we fall back untouched.
+	 * The derived files are written under `library/<id>.derived/`.
+	 */
+	async _deriveFor(id, mime, bytes) {
+		try {
+			let baseline = null
+			if (mime === 'image/png' || mime === 'image/jpeg') {
+				baseline = bytes
+			} else if (mime === 'image/x-icon') {
+				baseline = extractIcoPng(bytes)
+			}
+			// SVG handled on the client (canvas -> PNG), so a server-side SVG
+			// has no rasterizable baseline; fall back. Same for anything else.
+			if (baseline === null) return null
+			const sizes = await deriveSizes(baseline)
+			const dir = join(this.libraryDir, `${id}.derived`)
+			await mkdir(dir, { recursive: true })
+			for (const spec of DERIVED_SIZES) {
+				const buf = sizes[spec.file]
+				if (buf === undefined) continue
+				const tmp2 = join(dir, `.${spec.file}.png.tmp`)
+				await writeFile(tmp2, buf)
+				await rename(tmp2, join(dir, `${spec.file}.png`))
+			}
+			return { baseline, sizes }
+		} catch {
+			return null
+		}
+	}
+
 	/** typert endpoint: toggle the PWA-icon flag on the active icon (no re-upload). */
 	async setPwa(request) {
 		if (request === null || typeof request !== 'object' || typeof request.enabled !== 'boolean') {
@@ -378,11 +540,67 @@ export class FaviconCustomService extends TypertRemoteService {
 		response.end(c.bytes)
 	}
 
+	/**
+	 * Serve a derived PNG (`/icon-custom-<size>.png`, size 192/512/512-maskable/
+	 * apple-180) for the PWA manifest and the iOS apple-touch-icon. Falls back
+	 * to the rasterized baseline (or a 404) when no derived set exists yet.
+	 */
+	async _handleDerivedIcon(request, response, sizeUrl) {
+		if (request.method !== 'GET' && request.method !== 'HEAD') {
+			response.writeHead(405, { allow: 'GET, HEAD' })
+			response.end()
+			return
+		}
+		const c = this.current
+		if (c === null) {
+			response.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' })
+			response.end('no custom icon')
+			return
+		}
+		let bytes = null
+		let mime = 'image/png'
+		const spec = DERIVED_SIZES.find((s) => s.url === sizeUrl)
+		if (spec !== undefined) {
+			try {
+				bytes = readFileSync(join(this.libraryDir, `${c.id}.derived`, `${spec.file}.png`))
+			} catch { /* fall back to baseline */ }
+		}
+		// No derived file yet: serve the rasterized baseline so the manifest
+		// entry still resolves to a real PNG rather than a broken href.
+		if (bytes === null && c.pngBaseline !== null) bytes = c.pngBaseline
+		if (bytes === null) {
+			response.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' })
+			response.end('icon not rasterizable')
+			return
+		}
+		response.writeHead(200, {
+			'content-type': mime,
+			'content-length': bytes.length,
+			'cache-control': 'public, max-age=31536000, immutable',
+			'x-content-type-options': 'nosniff'
+		})
+		if (request.method === 'HEAD') { response.end(); return }
+		response.end(bytes)
+	}
+
 	/** PWA manifest body: platform manifest verbatim, or with `icons` pointed
-	 *  at the custom icon when the PWA option is on for the active icon. */
+	 *  at the canonical derived PNG set when the PWA option is on for the
+	 *  active icon. */
 	_manifestJson() {
 		const c = this.current
 		if (c === null || c.pwa !== true) return this.baseManifest.raw
+		// Preferred: the derived canonical sizes. When no derived set exists,
+		// fall back to the original upload so the manifest still declares a
+		// usable icon rather than pointing at broken derivative URLs.
+		if (c.pngBaseline !== null) {
+			const icons = DERIVED_SIZES.filter((s) => s.url !== 'apple-180').map((s) => ({
+				src: `/icon-custom-${s.url}.png?v=${c.rev}`,
+				sizes: `${s.size}x${s.size}`,
+				type: 'image/png',
+				purpose: s.maskable === true ? 'maskable' : 'any'
+			}))
+			return JSON.stringify({ ...this.baseManifest.parsed, icons }, null, 2)
+		}
 		const icons = [{
 			src: `/icon-custom.svg?v=${c.rev}`,
 			sizes: iconSizes(c.mime, c.bytes),
@@ -416,18 +634,23 @@ export class FaviconCustomService extends TypertRemoteService {
 
 	/** Rewrite the head `<link rel="icon">` only when a custom icon is active.
 	 *  Also points `<link rel="apple-touch-icon">` (iOS home-screen installs)
-	 *  at the custom icon when the PWA option is on and the icon is a PNG —
-	 *  iOS ignores SVG apple-touch-icons. */
+	 *  at the derived 180x180 opaque PNG when the PWA option is on and we have
+	 *  a rasterized baseline — iOS ignores SVG and transparent apple-touch-icons. */
 	_rewriteIndex(html) {
 		const c = this.current
 		if (c === null) return html
 		let out = html
-		const href = `/icon-custom.svg?v=${c.rev}`
-		const tag = `<link rel="icon" type="${c.mime}" href="${href}" />`
+		// Prefer the derived PNG set for the favicon so SVG/ICO uploads (and
+		// oversize PNGs) render consistently; fall back to the original.
+		const favHref = c.pngBaseline !== null
+			? `/icon-custom-192.png?v=${c.rev}`
+			: `/icon-custom.svg?v=${c.rev}`
+		const favType = c.pngBaseline !== null ? 'image/png' : c.mime
+		const tag = `<link rel="icon" type="${favType}" href="${favHref}" />`
 		const re = /<link\s+rel="icon"[^>]*\/?>/i
 		out = re.test(out) ? out.replace(re, tag) : out.replace(/<head>/i, `<head>${tag}`)
-		if (c.pwa === true && c.mime === 'image/png') {
-			const tag2 = `<link rel="apple-touch-icon" href="${href}" />`
+		if (c.pwa === true && c.pngBaseline !== null) {
+			const tag2 = `<link rel="apple-touch-icon" href="/icon-custom-apple-180.png?v=${c.rev}" />`
 			const re2 = /<link\s+rel="apple-touch-icon"[^>]*\/?>/i
 			out = re2.test(out) ? out.replace(re2, tag2) : out.replace(/<head>/i, `<head>${tag2}`)
 		}

package/lib/typert.host.js

@@ -1,10 +1,15 @@
-/* Hand-written typert host manifest for dsh-icon-custom (strict face). */
+/* Hand-written typert host manifest for dsh-icon-custom (strict face).
+ * The request/response shapes are unchanged from 0.6.x. From 0.7.0 the host
+ * additionally derives a canonical PNG set (see lib/index.js); `status.mime` /
+ * `status.ext` still reflect the *uploaded* format, while the PWA/logo path
+ * always serves the derived PNGs regardless of upload type. */
 import { z } from 'zod'
 
 const statusSchema = z.object({
 	active: z.boolean(),
 	pwa: z.boolean(),
 	logo: z.boolean(),
+	png: z.boolean(),
 	rev: z.string().nullable(),
 	mime: z.string().nullable(),
 	ext: z.string().nullable(),

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@cowwo/dsh-icon-custom",
-  "version": "0.6.0",
-  "description": "自定义浏览器标签页图标:在设置页上传 SVG/PNG/ICO,立即生效并持久保存。· Custom browser tab favicon: upload SVG/PNG/ICO from the settings page, applies instantly and persists.",
+  "version": "0.7.0",
+  "description": "自定义浏览器标签页图标:在设置页上传 SVG/PNG/ICO,立即生效并持久保存,自动适配安卓/iOS/平板 PWA 图标。· Custom browser tab favicon: upload SVG/PNG/ICO from the settings page, applies instantly and persists, auto-sizes PWA icons for Android/iOS/tablets.",
   "type": "module",
   "main": "lib/index.js",
   "license": "MIT",
+  "dependencies": {
+    "jimp": "^1.6.1"
+  },
   "dsh": {
     "bundle": {
       "patch": "./cordis.patch.yml"
@@ -68,7 +71,8 @@
     "dsh-plugin",
     "deepseek-harness",
     "favicon",
-    "icon"
+    "icon",
+    "pwa"
   ],
   "repository": {
     "type": "git",