Having icons for a website is a part of Getting website details right. I want the logo of my site to be used as a favicon and for smartphone home screen icons. I added these two icons to this site:
<link rel="shortcut icon" href="/...png">is the typical favicon, with a 32x32 PNG image.
<link rel="apple-touch-icon" href="...png">is an Apple touch icon for home screens, Safari landing pages, and other large-format icons, with a 180x180 PNG image.
This has all gotten much simpler than the early days of smartphones, but there are a few more icons that might be useful:
<link rel="mask-icon" href="/...svg>is a Safari pinned tab icon and can be SVG.
<link rel="icon" href="/...svg">only works in non-Safari browsers, but cannot be specified first due to parser bugs.
I didn’t set them up for this site, as most browsers recognize the first two.