Hacker News Reader

Comment by move-on-by | Hacker News Reader

I only do some web stuff very casually, so I’m definitely not the target demographic. Having said that, the most glaring WebKit omission for me is lack of SVG favicon support. Really baffling. All those Apple-specific icons with the different dimensions- really a pain for a casual web dev like me.

View on HN

> All those Apple-specific icons with the different dimensions- really a pain for a casual web dev like me.

You'll be glad to know you it's not like that anymore; you just need one Apple-specific icon now [1]:

    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
    <link rel="manifest" href="/manifest.webmanifest">

[1]: https://evilmartians.com/chronicles/how-to-favicon-in-2021-s...

Semi-related, but Chrome won't use an SVG favicon if an ico favicon is present. (https://bugs.chromium.org/p/chromium/issues/detail?id=145085...) I ship a PNG favicon and an SVG favicon.

FWIW, Safari supports 1-color SVG favicon using this format:

  <link rel="mask-icon" href="/favicon.svg" color="#990000">

If you use something like Vite, you can also auto-generate all favicon/homes screen icon creation from a single source image.

Haha! Yes, I actually was aware of this specific case where an SVG favicon works. I suppose it was disingenuous of me to say it’s not supported altogether, but I’ve yet to have an opportunity to use it due to the 1-color restriction.

SVGs don't scale the way you want them to. You can't make a (for example) 256px square image, even a vector, look good at 24px just by vector transforms.

That really depends on the style of the artwork

Less than you think.

With HiDPI/Retina displays, that 24px is actually 48px or 72px, so the need for pixel hinting is much less commonplace than it was 10 or 15 years ago.

Also, nothing's really stopping most developers from just scaling it naively to those tiny sizes, in fact it's what commonly happens.

I agree we should keep support for custom icons for each size, and it's probably a best practice, but shouldn't be a _requirement_ anymore.

How many people have HiDPI displays? It seems to me apart from phones people mostly don't.

Everyone with a Mac?

So ~10% of users?

Plus anyone with a not-cheap-ass Windows / Linux laptop, and anyone who's bought a desktop monitor in the last several years. I can't remember the last time I had to use a screen that wasn't.

What's "not-cheap-ass"? The standard "developer spec" type laptops from Dell etc. seem to still come with 1080p screens despite costing upwards of 1k credits. If you search for 27" monitor on Amazon you'll find 1080p models coming up, maybe some QHD ones. I can't imagine many offices kitting out with 4K monitors unless they actually need them.

SVGs support media queries. I haven’t tested this, but shouldn’t you be able to alter (or optimize) the image based on the size of the viewport?

That's a valid reason for non-Apple browsers to prefer or even require raster (non-SVG) image files, such as a 16x16 favicon for a 96dpi display device like a typical office desktop or low-end laptop.

Whereas Safari only runs on macOS + iOS, which in-turn only runs on Apple hardware, and all Apple hardware today is going to run at ~140dpi or above - so pixel-perfect art just isn't required - and if someone plugs a (relatively) low-res TV into a Mac then the OS is going to downsample everything down anyway, and (most) users don't seem to care about that.

I suppose that makes sense for a professional web dev- but it still feels like an arbitrary feature gap and is the first ‘speed bump’ in standing up a simple website for safari. Just because your pixel-perfect corp might rather have specific image renders for all screen sizes doesn’t really explain why I can’t put a SVG in there and call it a day. I can’t imagine my svg-to-png converter does a much better job of it. It’s all just a hassle. Again, happy to recognize I’m not a front end expert and not the target demographic.

Disagree.

Pixeling editing is a <4% improvement.

Aren't Apple's emoji made from vectors? They seem to scale well. Is SVG missing the features to do as well?

They scale well in the sense that they display the same thing at different sizes without loss of quality. But that’s not the only thing that matters. The primary goal of an icon is legibility.

A large text editor icon might have a pad with a pencil, squiggles on the page, rings binding the pages at the top, etc. But if you scale that down, it might lose legibility.

For good icon design, you don’t want the same thing but smaller, you want fewer, simpler elements. So you might drop the rings at the top, then as you get smaller you might drop the squiggles on the page, and if you go small enough, you might want to change to just having the pencil.

Most people don’t bother with this. They just shrink things down. If that’s what you do, then SVG solves that problem. But that’s not great icon design. Great icon design needs to adapt to smaller sizes, not just grow and shrink.

Not to detract from your argument (which I agree with), but SVG _can_ technically solve that problem using CSS. Here's a link that demonstrates this: https://tympanus.net/codrops/2014/08/19/making-svgs-responsi...

Another article here specifically about favicons:

https://web.dev/articles/building/an-adaptive-favicon

Unfortunately, I tried the demo and even though it’s supposed to work in Chrome, it didn’t for me. Nor with Safari. Have you gotten it working with favicons anywhere?

That's a good point. We shouldn't have to generate all these icons.

I also wish we could style <select> lists. Like adding flags to <option> elements.

No mention of CSS page transitions or scroll-driven animations which can also remove some boilerplate JS.

There is this "Open UI" W3C effort which is supposed to be moving forward styling Select elements. Improved <select> is flagged in Chrome at the moment - it'll be great if this (and the other stuff in Open UI) actually get ratified into standards and ship. https://open-ui.org/components/selectlist/

Reply on news.ycombinator.com