Change favicon

[Ashus]

I'd like to propose a change for the luci favicon.
Current one seems really old and full of sharp edges.

My proposition (1150 bytes - same size as original):
favicon.ico

[stokito]

I uploaded the icon to my router with a command:

scp ~/Downloads/favicon.ico root@192.168.1.1:/www/luci-static/bootstrap/favicon.ico

and on Ubuntu Mate in Chromium I opened two tabs with old and new one and it looks like:

To be honest it's still not so good but I'm not a designer. But the idea to change favicon seems good.

It would be great to use SVG here. Also the 1Kb is not so small especially for tiny devices with 4Mb or persistent memory. I converted the ico file to png and it took 750 bytes. But by default browsers tries to find the icon by /favicon.ico path. In fact for OpenWrt the path to favicon is set in HTML in head:

<link rel="shortcut icon" href="/luci-static/bootstrap/favicon.ico">

This takes additional space (69 bytes) but allows us easily change favicon it to png.

So the main question is what to use: PNG or SVG instead?

1. Support
   Both PNG and SVG is allowed by spec so any browser should support them.
   https://caniuse.com/#search=favicon

Seems like PNG is supported everywhere but SVG is not supported by Edge and Chrome. But both browsers are going to add it in nearest time. As for me it's not critical if some users wont see the favicon in couple of months until this fill be fixed.

2. Size
   PNG is kinda gziped (deflate) ico. SVG raw text. But SVG can be compact for simple figures and also it can be compressed with gzip or brotli and if server supports precompressed files (uhttpd not yet) this will takes less memory than PNG.

So I would like to propose to change that icon to SVG if that possible.

• https://html.spec.whatwg.org/multipage/links.html#rel-icon
• https://habr.com/post/330584/

[feckert]

Please open a pull request for this suggestion.

[p7996619]

The old icon indeed had some sharp edges because of scaling/transparency issues. I made an SVG version of the old icon some time ago but forgot about it. Unfortunately, it seems that SVG favicons are still only supported by Firefox and Opera.
I don't think the new icon is much of an improvement as it doesn't really match the style of the default luci theme. (personal opinion)

I'll just leave my SVG version here. If anybody still wants to use it, feel free to do so.

<svg width="256px" height="256px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="a">
      <rect width="105" height="105" x="0" y="-75" transform="rotate(45,50,-25)" fill="#fff"/>
    </mask>
    <mask id="b">
      <rect width="100" height="100" fill="#fff"/>
      <rect width="112" height="112" x="0" y="-75" transform="rotate(45,50,-25)"/>
      <circle r="20" cx="50" cy="50"/>
    </mask>
  </defs>
  <path d="M 50,50 m 0,-50 a 50,50 0,1,0,1,0 Z m 0 13 a 37,37 0,1,1,-1,0 Z" mask="url(#a)"/>
  <path d="M 50,50 m 0,-32 a 32,32 0,1,0,1,0 Z m 0 12 a 20,20 0,1,1,-1,0 Z" mask="url(#a)"/>
  <circle r="50" cx="50" cy="50" fill="#a7a8ab" mask="url(#b)"/>
  <circle r="12" cx="50" cy="50"/>
</svg>

By minifying the svg using https://jakearchibald.github.io/svgomg/, I got the size down from 746 to 549 bytes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><mask id="a"><path fill="#fff" d="M0-75h105V30H0z" transform="rotate(45 50 -25)"/></mask><mask id="b"><path fill="#fff" d="M0 0h100v100H0z"/><path d="M0-75h112V37H0z" transform="rotate(45 50 -25)"/><circle cx="50" cy="50" r="20"/></mask></defs><path d="M50 0a50 50 0 101 0zm0 13a37 37 0 11-1 0z" mask="url(#a)"/><path d="M50 18a32 32 0 101 0zm0 12a20 20 0 11-1 0z" mask="url(#a)"/><circle cx="50" cy="50" r="50" fill="#a7a8ab" mask="url(#b)"/><circle cx="50" cy="50" r="12"/></svg>