Website icons
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./favicon.icois the default location where browsers and crawlers will look for a favicon in the ICO format. There are also services that will automatically find these favicons, as Jim Nielsen uses for Displaying Favicons For Any Domain.<link rel="apple-touch-icon" sizes="114x114" href="...png">is an Apple touch icon for home screens, Safari landing pages, and other large-format icons, with a 114x114 PNG image. Add another link with asizes="57x57"attribute (exactly half the dimensions) pointing to the same resource. Furthermore, a 144x144 PNG image can be supplied forsizes="144x144"andsizes="72x72".
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.
Sources
What size should apple-touch-icon.png be for iPad and iPhone?
Looking in the
<head>tag of websites that have working icons.