mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
b9a307a8c1
I just found out that lots of Android devices will letterbox icons; the latest version of Lighthouse will preview an icon in the safe clipping range, and that range was way too small for my existing icons. I made a new version that was mask-safe with the white foreground shrunk down a bit so it would fit. See [0]. [0]: https://web.dev/maskable-icon-audit/ For consistency, I renamed the Apple mask icon as well. Why are there so many extensions to the HTML standard for icons? This is getting ridiculous. It's time for a rant about icon standards. Let's recap! what icons do I have so far? - A 192px apple-touch-icon. Apple icons are supposed to be 180px, but 192px gets re-sized down just fine. This used to be apple-specific but then Android and others started using it. I picked 192px instead of the standard 180px because we need...(next bullet) - A 192px icon for Android devices. Rather than having a separate icon for this, I just re-used the existing Apple icon in case the user's browser wants both so it can just cache and re-use it. - The original 32px favicon.png. I picked PNG instead of ICO because an ICO containing the optimized PNG was a whopping 2kb while the png was 176 bytes. It looks fine when scaled down to 16px with a variety of automatic downscaling algos, so there was no need to include an extra 16px version. - A mask-icon. I was hesitant to implement this since it seemed very vendor-specific (desktop Safari only), but it somehow became an accepted registered extension to the spec [1] so I figured that it was only a matter of time before a bunch of other things started using it. - A webmanifest file to describe even more icons. It re-defines the aforementioned 192px icons. I chose to re-use the icon for the same reason as before. It also describes the next two bullets: - favicon.svg: used in the manifest in case the device wants something bigger than 192px. - A maskable icon (svg), completely unrelated to the aforementioned mask-icon, with the focus of the image shrunk down to handle cropping e.g. on some Android devices. [1]: https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes What I SHOULD have, in an imaginary world where web standards make sense: - A 32x32 raster icon. Probably PNG, but lossless-webp migth work too. - A 16x16 raster icon, only if the 32x32 version doesn't downscale well. - An svg icon for any other resolution. What I don't, and probably never will have: - A msapplication icon for IE 10 on Windows 8.0, for adding sites to the Windows 8 Start Screen. - A browserconfig.xml in my site's root directory for adding sites to the Windows 8.1+ Start Screen/Menu with custom icons. Since MS dumped IE and switched to Edge, documentation for the above was never updated. I don't run proprietary operating systems, so I can't test adding a website to the tiled Start Menu or Windows Task Bar. Now that MS re-wrote Edge as a Chromium-based browser, I really have no idea how it handles icons; I'd imagine it just does what Chrome does, but it probably does some odd witchcraft to support adding sites to Start or the taskbar. Docs don't seem to exist. Until they update the docs, I'll assume that adding MS icons would mean supporting a non-standard IE-specific feature. Due to its simplicity, my site should render fine in browsers going as far back as IE5; it even works in KHTML. But there are some lines I won't cross: it'll probably *render* on IE5 but it won't *load* since https://seirdy.one is TLS 1.2/1.3 only. And it won't support special proprietary non-standard extensions. WTF we're almost at 80 lines. I should've just written a blog post.
27 lines
521 B
JSON
27 lines
521 B
JSON
{
|
|
"name": "Seirdy's Home",
|
|
"short_name": "Seirdy",
|
|
"display": "browser",
|
|
"scope": "/",
|
|
"start_url": ".",
|
|
"icons": [
|
|
{
|
|
"src": "https://seirdy.one/apple-touch-icon.png",
|
|
"sizes": "192x192",
|
|
"type": "image/png",
|
|
"purpose": "any"
|
|
},
|
|
{
|
|
"src": "https://seirdy.one/favicon.svg",
|
|
"sizes": "1024x1024",
|
|
"type": "image/svg+xml",
|
|
"purpose": "any"
|
|
},
|
|
{
|
|
"src": "https://seirdy.one/maskable_android.svg",
|
|
"sizes": "1024x1024",
|
|
"type": "image/svg+xml",
|
|
"purpose": "maskable"
|
|
}
|
|
]
|
|
}
|