Help:External link icons

In the default skin on desktop (Vector), en.Wikipedia uses only two external link icons; one for PDF documents and the other for all other external links. Some other skins use additional icons.

External links usually display an icon at the end of the link. CSS is used to check for certain filename extensions or URI schemes and apply an icon specific to that file type, based on the selected skin.

This page contains example URLs to demonstrate the link icons. The displayed icon only depends on the URL itself. It is not checked whether a file of that type is actually at the link. The examples here do not link to real files.

Explanation

MediaWiki software detects URI schemes and/or filename extensions to create a link; thus links without a URI will not have an external link applied. MediaWiki does not attempt to detect any part of the URL to create a link, such as www, which many websites do not use in the URL.

The standard skin, Vector, shows only PDF icons, as does Cologne Blue. Modern, MonoBook and Timeless show a full set of filename extensions icons and some URI scheme icons; Minerva (mobile) shows none. Icons are defined in the CSS for each skin except for the PDF icon, which is displayed if "pdf" is anywhere in the filename extension.

Filename extension icons are displayed only if the extension matches the text. Filename extension icons have precedence over URI scheme icons. Internet Explorer may show an empty space or misplaced icon if the page is rendered with a line wrap inside the link text. Link icons do not adhere to accessibility standards, since alt text cannot be added.

Example

Use these links to view this page with a different skin:
Type	File extension	Sample link
Portable Document Format	.pdf .PDF, .pdf# .PDF# .pdf? .PDF?	http://example.org/test.pdf
Audio Video Interleave	.avi .AVI	http://example.org/test.avi
MPEG-1	.mpg .MPG .mpeg .MPEG	http://example.org/test.mpg
Ogg	.ogm .OGM	http://example.org/test.ogm
MIDI	.MID .midi .MID	http://example.org/test.mid
MP3	.MP3	http://example.org/test.mp3
Ogg Vorbis	.OGG	http://example.org/test.ogg
Waveform Audio File Format	.WAV*	http://example.org/test.wav
Windows Media Audio	.wma .WMA	http://example.org/test.wma
Type	URI scheme	Sample link
Internet Relay Chat	irc:// ircs://	irc://example.org
File Transfer Protocol	ftp://	ftp://example.org
Network News Transfer Protocol	news:	news:example.org
mailto	mailto:	mailto:example@example.org
HTTP Secure	https://	https://example.org/test.html
Apache Subversion	svn://	svn://example.org/
FTPS	ftps://	ftps://example.org/
Geo URI	geo:	geo:37.786971,-122.399677
Git	git://	git://example.org/
Gopher	gopher://	gopher://example.org
Hypertext Transfer Protocol	http://	http://example.org
Magnet URI scheme	magnet://	magnet://example.org/
Multimedia Messaging Service	mms://	mms://example.org/
NASA World Wind	worldwind://	worldwind://example.org/
Network News Transfer Protocol	nntp://	nntp://example.org/
Secure Shell	ssh://	ssh://example.org/
Secure Session Initiation Protocol	sips://	sips://example.org/
Session Initiation Protocol	sip://	sip://example.org/
Short Message Service	sms://	sms://example.org/
SSH File Transfer Protocol	sftp://	sftp://example.org/
Telephone	tel://	tel://example.org/
Telnet	telnet://	telnet://example.org/
Uniform resource name	urn:	urn:isbn:0451450523
XMPP	xmpp://	xmpp://example.org/

Hiding link icons

A link icon can be hidden with the plainlinks class or {{Plain link}}, but this is not advisable.

<span class="plainlinks">http://example.org/test.pdf</span>

Custom link icons

Custom icons can be added by editing Special:MyPage/skin.css (current skin only) or Special:MyPage/common.css (all skins). For example, to add an icon for Excel files:

#content a[href$=".xls"].external,
#content a[href$=".XLS"].external,
#content a[href$=".xlsx"].external,
#content a[href$=".XLSX"].external {
    background: url("http://upload.wikimedia.org/wikipedia/commons/b/ba/Page_white_excel.png") center right no-repeat; padding-right: 18px;
}

When successfully updated, this link will show an Excel icon:

http://example.org/test.xls

The markup detects file extensions .xls or .xlsx with both upper and lower case. The image must be 16 pixels wide. The image link must be from http://upload.wikimedia.org. To get this link, go to the file page and click on the image to open it without the file description, then copy the URL.

To remove a default icon, simply add the CSS with no URL. For example, to remove the padlock icon when viewing secure links:

#content a[href ^="https://"].external {
    background: center right no-repeat; 
    padding-right: 18px;
}

To remove all the default icons, use this CSS:

#content a.external {
    background: none !important;
    padding: 0 !important;
}

Bugs

• bug 20024 - a destination-dependent icon should be shown for interwiki links
• bug 30682 - Link icon inconsistencies when using protocol relative URLs
• bug 45891 - External link icons should have alt text
• bug 54604 - Large number of CSS rules for external links
• bugzilla:61178 - Remove yellow padlock icons on HTTPS links - (and discussion for Enwiki at MediaWiki talk:Vector.css#Padlock for secure links)
• bugzilla:63521 - Default external link icons should be a module

See also

• Help:Link#External links