Inform the user

For websites there is no such command, the control of what happens on the device is in the device user and not in what it uses.

You should present a popup or something to inform the visitor that you can access the X menu and add a shortcut to the home screen.

alert("Olá, adiciona-me ao teu homescreen fazendo uso do menu principal do teu navegador!");

You can also have a detailed text on how to do the task in order to make life easier for the user:

  

How to add this website to the home screen

     

iOS
  Click the icon that looks like a box with an arrow jump out of it (this also lets you tweet, print, or send the page you are on). Click "Add to Home Screen".

     

Android
  On Android there are a few different ways to achieve this:

     

• Add website to bookmarks
  
• Go to the home screen where you want to add the link / bookmark
  
• Touch and hold an empty space until you open the "Add to Home" menu
  
• Select "Shortcuts"
  
• Select "Favorites"
  
• Choose the bookmark you just created
  

Depending on your device and Android version, this might work:

     

• Add website to bookmarks
  
• Open bookmarks management
  
• Continuously touching the website bookmark
  
• Select "Add to Home Screen"
  

Prepare the page with Icon, name and colors to use

You can have your page with all the necessary information to make the smartphone known to the icon and name to use in case you add the web site to homescreen :

Apple

Link to full documentation

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Meu Site"/>

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

Microsoft

Link to full documentation

<meta name="application-name" content="Meu Site"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-TileImage" content="http://www.example.com/windows_tile.png"/>

Others

<title>Meu Site</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Note:
The consensus is for browsers to locate the webpage's identifying icons in the root of the domain: http://www.example.com/favicon.ico but you can specify other locations by making use of the meta tags above.

To generate icons from a single file, this tool is excellent.

Sorry, but I do not think it's via the web.

The options would be:

• The user using the smartphone features will do this manually
• You'll have to create a native android app that just opens your website, has an icon and will open your site as an app, it would look like your app was a 'browser' / li>
• You would use a multiplatform framework (example phonegap) to create this 'app' to view your site;

I think using Phonegap or another multiplatform tool (which uses javascript, html5, css, and so) would be more practical, and would not be expensive (smartphone hardware) as it would only open your web page (since this type of application is heavier). Also you could compile the same code for other platforms like windows phone, firefox os, ios, etc.

The native would be more laborious, but lighter (as already said, for proposal, will not interfere in performance) and exclusive to android.

link link link