CSS Grid issues

[Jason Knight]

how important is having multitude of spew around favicons?

Depends on how much of an art {expletive omitted} one is. Generally if the current "correct" size cannot be found, the next size up will be scaled, however some icons scale down badly and require manual tweaking / redraw after scaling.

Generally though, if your favicon is simple, that's MOSTLY BS for pedantic idiots who don't care about wasting bandwidth on NOTHING. There ARE corner cases where one or two of the specific sizes can help, but on the whole? No... just... no.

In the majority of cases the most that is needed is:

Code: [Select]

<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
<link rel="apple-touch-icon" sizes="64x64" href="/favicon-64.png">
<link rel="apple-touch-icon" sizes="160x160" href="/favicon-160.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-config" content="/browserconfig.xml">

The first is the classic 16x16, though you can embed other sizes and they will / should be used automatically. If you state the sizes older browsers may ignore this statement.

The first png icon opens the door to high-color and larger sizes. This used to be something that was pointless, and still can be if you actually have the tools to edit a .ico file properly, but now makes sense with 4k displays and users running 200% or more scaling. (see my media center) where that 16x16 is now 32x32

The two apple versions SHOULD handle most sizes should people move the shortcut to their mobile desktop, such as for a web app. Only add the intermediate sizes if it looks like junk at said size.


I wish they all just handed it the same damned way, but every blasted maker has their own rules. I think Android handles it best using a json file.

Code: [Select]

{
 "name": "App",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}
Whilst it seems like a good bit of code, it's only loaded when it's needed and doesn't slow down the main page load ready time. The Microsoft XML is similar in nature:

Code: [Select]

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/ms-icon-70x70.png"/>
<square150x150logo src="/ms-icon-150x150.png"/>
<square310x310logo src="/ms-icon-310x310.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>
In both cases -- the XML or JSON -- if you use them you don't have to put the same values in the markup. I've seen people state it both ways and there is ZERO reason to do that. In fact, stating it in the markup can cause them to load even when not in use, something the XML/JSON versions don't seem to do. (though I've heard chrome on android fixed that, I've yet to see it in the wild)

Honestly though, if you're just making a normal every-day website, EVERYTHING except the traditional .ico file is pointless BS because the majority of users aren't going to put the link to your site on their desktop, even on mobile devices. You're making a full stack web crapplet it makes perfect sense, otherwise not so much.

[Exodus_AU]

Honestly though, if you're just making a normal every-day website, EVERYTHING except the traditional .ico file is pointless BS

Fantastic and much clearer than 'You need all of these for modern web stack'.

Thanks so much for your help. I will get to the modal work