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.
- 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.
- 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.
- 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.
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).
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 .
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.
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
link elements, many possible values exist for this attribute, but the use cases above require only two:
- The value
targetmeans 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
targetas 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
typemeans 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
typewill 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
Optional extensions to this solution:
linkreltypes. For instance, a
navvalue 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
imgto reference an
aelement other than by making the
imga child of that element; for instance, an attribute similar to the
label. This adds complexity for a case that seems unlikely to come up in practice.
- A better name than
- Ways to manipulate this via CSS.
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.