Link Icons

An icon for a page provides a strong visual cue which users can associate with that page. Page icons typically appear in various places in the user interface of a graphical user agent, such as the address bar, tabs, and bookmark icons. However, no way exists to associate an icon with a linked page, only with the current page. User agents could make use of such icons in various useful ways, such as when bookmarking the link, and could also simply display the icons next to the link.

Use Cases

1. Bookmarking links: if a user bookmarks a link, the bookmark will not have any icon associated with it, or will use the generic bookmark icon. By contrast, bookmarking the current page includes the page's icon in the bookmark, providing a strong visual cue.
2. Identifying link targets: a site may want to display icons next to links as a stronger visual cue to the user about the target of the link. A user agent might choose to display these icons next to the link, or in a status bar next to the target URI. Alternatively, a user agent might choose not to display the icons at all, or only display them for some types of URIs.
3. Identifying link types: a site may want to display icons next to links to distinguish different types of links, such as external links, mailto links, or links to documents of a given type.

Current Limitations

No markup currently exists to associate an icon with a link for the purposes of a bookmark. User agents could choose to guess in various ways, such as by using the icon of the target domain or target page if known, or by using the icon of the current page for links within the same site. A user agent could even choose to fetch the target page to look for icon metadata. However, these guesses can easily fail or find an incorrect icon, and may produce undesirable page requests. Furthermore, links to some URI schemes would not even allow these forms of guessing; for instance, consider javascript: (as used in bookmarklets), mailto: , tel: , or sips: .

For identifying links, a site can currently include the icon as an img element child of the a element. However, this markup provides no semantic information associating the icon with the target of the link. Furthermore, this markup does not provide a user agent with enough information to hide the link icons, display them selectively, or display them in a different location.

Current Usage and Workarounds

Pages which offer useful bookmarklets typically provide them in the form of links, and suggest that users drag those links to their bookmarks toolbar/menu or right-click on them and choose to bookmark them. The link text typically becomes the bookmark name, and the target URI becomes the bookmark URI. However, bookmarklets added in this manner do not have icons associated with them. Various pages document this deficiency, and provide instructions for users to set bookmark icons themselves (often a complicated process, especially if the user agent does not provide any UI to set an icon).

Browser extensions exist for the sole purpose of helping a user set bookmark icons. For instance, Favicon Picker 3 and Favicon Picker 2

Browser extensions also exist to add icons next to links in certain contexts. For instance, the Google Icon, Favicon Addict, and Search with favicons extensions add icons to search results.

Several pages use icons to identify link targets, or suggest ways of doing so. For examples of this (not necessarily good or bad examples), see http://www.askthecssguy.com/2006/12/hyperlink_cues_with_favicons.html , http://exscale.se/archives/2008/02/27/jquery-external-link-favicons-plugin/ , and http://ancientgeeks.wordpress.com/2007/08/06/automatic-favicons-for-external-links/ . Note that all of these use JavaScript; a pure HTML5 solution seems highly preferable.

Numerous sites use icons to identify link types; for instance, MediaWiki wikis such as Wikipedia and this wiki show an icon next to external links and a different icon next to https links. Numerous pages also suggest ways to use icons to identify link types. For a few examples, see http://www.psyked.co.uk/css/auto-matic-link-icons.htm , http://userstyles.org/styles/504 , http://www.css3.info/using-css-3-selectors-to-apply-link-icons/ , http://pooliestudios.com/projects/iconize/ , and http://www.vision.to/add-a-small-icon-to-your-links-css-only.php .

Benefits

Adding new markup to specify link icons would give user agents the semantic information they need to associate an icon with the target of a link. This semantic information gives user agents the ability to use the icon in various interesting ways, such as displaying the icon with bookmarks, displaying the icon together with the target URI in the status bar, perhaps displaying the icon in the address bar before the target page loads, hiding the icon, showing the icon in the tooltip used for the title attribute, displaying the icon in menu items for the right-click menu.

Requests for this Feature

• stikkit bookmarklet icon?

  Is there any chance that there could be an icon for the stikkit bookmarklet? I tend to have only the favicon on my bookmark toolbar and no text.

• Google Chrome: How to Change Icons on the Bookmarks bar

  I added quite a few bookmarklets to my Bookmarks bar and was unhappy with the same default icon that showed for each one. There are no settings currently available within Chrome to change the icon, but there is a way to fix them that works quite well. [...] First, you’ll need to download and install the free SQLite Database browser. [...]

• comment on "Bookmarklets, Favelets and Snippets"

  I am curious if there is any way to show the “favicon” for bookmarklets (Firefox)? I always see the ugly “blank page” icon next to my bookmarklets.

Proposed Solutions

My Solution

Add a new attribute to img elements, named linkrel or similar, which has as its value a space-separated list of relationships between the img and its containing a element. As with the rel attribute on a and link elements, many possible values exist for this attribute, but the use cases above require only two:

• The value target means that the image represents an icon for the target page. For instance, an http link might use the logo for the target page, while a mailto link for a person might use a small image of the person's face. Such an icon should accurately identify the link target even in the absence of any other context. A graphical user agent may use an icon of type target as the bookmark icon if the user bookmarks the link, and may display the icon in the link or wherever it currently displays the target URI.
• The value type means that the image represents an icon for the type of the link target. For instance, a mailto link might use an envelope icon, while a link to a music file might use a musical note icon. An icon of type type will not work well as the icon for a bookmark; however, it might still work better than the default bookmark icon, so a user agent might choose to use it if no icon of type target exists.

Optional extensions to this solution:

• Additional linkrel types. For instance, a nav value might make sense, to describe images which only make sense as navigation for the current page, such as a "next" link with an arrow pointing to the right.
• A way for an img to reference an a element other than by making the img a child of that element; for instance, an attribute similar to the for attribute of label. This adds complexity for a case that seems unlikely to come up in practice.
• A better name than linkrel.
• Ways to manipulate this via CSS.
• Ways to manipulate this via JavaScript.

Processing Model

Because the markup for this proposal uses an img element (rather than an attribute on the a element, for example), a user agent may choose do nothing other than ignoring the linkrel attribute. Such a user agent would then render the link icon inline together with the link as many browsers currently do.

TODO: Detailed processing model.