Website icons and previews

File: favicon.ico, an 8-bit 16×16 .ico format icon file in the root of your website
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

If you want Windows desktop support, embed a 32×32 and 48×48 pixel version in the same .ico file.
You can use a service like: http://tools.dynamicdrive.com/favicon/

Larger icons:
touch-icon-iphone.png, a 57×57 pixel file.
touch-icon-72x72.png, see the filename...
touch-icon-114x114.png, see the filename...

<link rel="apple-touch-icon" sizes="57x57" href="http://company.com/touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://company.com/touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://company.com/touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://company.com/touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://company.com/touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://company.com/touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://company.com/touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://company.com/touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />

 

I am going to look at the following tags when I have time. 
<meta property="og:image" content="your_image_here" />
<meta name="application-name" content="Sitename">
<meta name="apple-mobile-web-app-title" content="This site">
<meta name="theme-color" content="#205081">
<meta name="msapplication-TileColor" content="#205081">
<meta name="msapplication-TileImage" content="http://company.com/white-256.png">
<link rel="icon" sizes="192x192" type="image/png" href="http://company.com/companyicon.png">

 

 

Share: