13

Is there a way to programmatically create a desktop link for my webpage?

Denis Kulagin
  • 8,472
  • 17
  • 60
  • 129

3 Answers3

29

Not from Javascript, but there is a trick to let the users do it. It is more of an interaction design technique rather than programming technique but I'll write it maybe someone googles this question and finds it useful.

Make an icon on your page with a text under it. Then ask the user to drag this icon to their desktop. The icon should be embedded in an anchor tag <a> with the href attribute pointing to your website. The text under the icon should be the same as the <title> tag of your page. The browsers make an icon when the user drags an anchor link from a page to a folder, desktop or bookmark bar. The text that the browsers assign this shortcut or link is usually the <title> of the page. Remember that the icon should be set as the background of the element so that the browser doesn't save the image instead of making a new link. It would be even better if this icon is the same as the favicon of your website.

To demonstrate this technique here is some code:

<p>You can make a shortcut to www.mysite.com by dragging this icon to your desktop or bookmark bar: </p>
<a href="https://www.example.com">
  <div id="icon" style="background-image:url('favicon.png');width:32px;height:32px;"></div>
  <div id="title">www.example.com</div>
</a>

Like a native app:

In Chrome users can go to Menu > More tools > Create application shortcut... and create a borderless shortcut to your site that looks like an app. Something similar can be done in Android, iOS and also Firefox on Android.

Cameron
  • 1,049
  • 12
  • 24
AlexStack
  • 16,766
  • 21
  • 72
  • 104
  • Is there a way to set the same picture as an icon on the desktop shortcut? Currently it shows a browser icon – Rubycon Nov 16 '18 at 09:29
  • Browsers use your site's favicon so make sure it's set correctly (the little icon in the tab) – AlexStack Nov 17 '18 at 17:47
  • I would also suggest adding a class to the link tag with display:inline-block to make it easier to click the link. – Tig7r Jan 23 '19 at 09:59
  • I have tried this, but the Icon created on the Desktop is showing the Chrome icon? – Tig7r Jan 23 '19 at 10:00
3

This is not possible with browser scripts such as JavaScript. It is a security feature. I'm sure you can appreciate why people would not want webpages to be able to access your local file system.

Imagine that instead of drowning in popup windows, we would be drowning in files created by spammy/scammy webpages. I'm not saying that your site is spammy or scammy, just trying to put this into perspective :)

You could quite easily create a sort of tutorial for your users on how to create a shortcut or add your page to their bookmarks taking into consideration that users may be using different browsers, but if you cover the major browsers, Chrome, Firefox and IE, I'm sure your users will have no problem following your instructions.

Lix
  • 47,311
  • 12
  • 103
  • 131
  • Thanks for comprehensive explanataion! – Denis Kulagin Nov 22 '12 at 09:52
  • You are very welcome! Sadly the answer is still - you can't :) – Lix Nov 22 '12 at 09:54
  • 2
    Not sadly! I would hate having random Web pages polluting my desktop! :-D – PhiLho Nov 22 '12 at 09:58
  • Flash is also bound by these laws. You might be able to get around it using Adobe Air... but that's already outside of the browser... – Lix Nov 22 '12 at 10:01
  • 1
    I find myself often drag'n'dropping the favicon displayed in the address bar to a folder (can be the desktop), to save a shortcut to the page, instead of creating a bookmark. It works with most browsers I tried, at least on Windows. – PhiLho Nov 22 '12 at 10:01
1

From JavaScript, running on a webpage?

No.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • It wasn't possible in 2012, but it is now possible to create shortcuts for progressive web applications using [`beforeinstallprompt`](https://www.amitmerchant.com/adding-custom-install-button-in-progressive-web-apps/). – Anderson Green Mar 04 '22 at 22:52