From IndieWeb
Jump to: navigation, search

rel-shortcut is a means of representing key navigational links or opportunities within HTML. This can offer parity with the shortcuts member of the Web App Manifest.


When websites are added to a user’s home screen or pinned to the dock/taskbar, it may be helpful for users to have access to key actions or locations within that site. Shortcuts provide that functionality.

How to use rel="shortcut"

The "shortcut" value for rel can be applied in any of a number of ways. If you are interested in promoting your primary navigation to being shortcuts, you can add the rel value directly to those links:

<a rel="shortcut" href="/messages">Messages</a>

Alternately, you could define shortcuts in the head if your document using the link element:

<link rel="shortcut" href="/messages" title="Messages">

When to use rel="shortcut"

By comparison, the shortcuts member of the Web App Manifest is a much more robust solution, offering the ability to provide a custom icon per shortcut and maintain a single list of shortcuts for an entire site. If you do not have a manifest for your site, however, this declarative model can provide similar utility.