luci-theme-bootstrap: update favicon/icon assets

[owlsy]

Pull Request details

Description

The current favicon/icon assets used per commit history on #6738 was copied directly from 'luci-theme-openwrt2020' (commit source) and did not have the opportunity to use the 'blue & dark blue' logo as per the openwrt/branding style guide, as the favicon folder uses this colour scheme, which the SVG is also able to provide. Updated accordingly.

Screenshot or video of changes (If applicable)

Maintainer (Preferred)

@jow-, @hnyman, @systemcrash, others

---

Tested on

OpenWrt version: OpenWrt 25.12.2 (r32802-f505120278)
LuCI version: LuCI openwrt-25.12 branch (26.097.47759~98acb68)
Web browser: Safari Version 26.5 (21624.2.1.11.1)

---

Checklist

• This PR is not from my main or master branch 💩, but a separate branch. ✅
• Each commit has a valid ✒️ Signed-off-by: <my@email.address> row (via git commit --signoff).
• Each commit and PR title has a valid 📝 <package name>: title first line subject for packages.
• Incremented 🆙 any PKG_VERSION in the Makefile. (Not applicable to themes)

[GeorgeSapkin]

I don't think there's enough contrast on a dark background. Perhaps add a white outline?

[owlsy]

I was thinking about it, and there is a way to have the SVG icon be modified if dark mode is used (source).

So the plan is to have the default SVG as blue & dark blue, but if dark mode is being used, the SVG would change to white & blue. Images from style guide:

For the PNG fallback, I should keep in mind the style guide preventing misuse, so I don't think I can use an outline (seen here). Considering most browsers support the SVG icon (except Safari macOS 15 and earlier, Safari iOS 18 and earlier, and Internet Explorer), we really shouldn't see the fallback PNG used regardless. It also looks like Safari will automatically add a white background to the PNG icon if it determines the contrast is too low. So, we should be covered.

[owlsy]

Automatic SVG icon

The SVG icon now automatically switches between a light mode/default variant and a dark mode variant. Will work for Chrome, Firefox, Edge, etc.

Note

Safari at the moment ignores prefers-color-scheme for SVG, so it will keep using the default variant for now… although there is an active bug report for WebKit to have this supported, including an Apple-internal Bug ID made. So, fingers crossed it will be sorted out soon. Until then, I don't mind seeing the icon as originally shown, considering it won't be forever.

---

PNG icon fallback

You will only ever see this on older versions of browsers, and Internet Explorer.

---

Additional changes to header.ut

• Rearranged icon order so SVG is first, and PNG can be the fallback.
• Added apple-touch-icon to provide an icon for iOS and iPadOS users who want to add a standalone web app to their home screen.
• Added manifest.json to provide icons for a Progressive Web App and for Android users who want to add a standalone web app to their device.

Shoutout to @aparcar for everything in openwrt/branding. 👏🏼