I discovered an interesting feature in Firefox today. When browsing in a local folder (Anything starting with file:///), small icons are shown to represent the format of each file. It turns out that you can access these icons with moz-icon://.ext?size=x, where ext is the extension of the file (mp3,txt, …), and x is the size of the icon to display (32 and 16 work well for me).
We can take advantage of this feature by including these icons on any web page. Simply use an img tag like this: <img src="moz-icon://.mp3?size=32" />. The beauty of this is that the icons will display natively on whatever platform they are running, taking on the look of the Operating System. Even changing your theme will change which icons are displayed. These subtle changes can make an application feel much more intuitive and familiar.
The obvious problem is that these icons only work in Firefox. However, if that is your target browser, this could be a nice little addition to a web application, which could easily be hidden in other browsers.
Here is a sampling of the icons, which will only appear if you are using Firefox. There is also a set of screenshots from several Operating Systems at the end.
Music (mp3):
Archive (zip):
Video (mov):
Picture (jpg):
Text (txt):
Document (doc):
Binary (exe):
Web (html):
Script (pl):
Presentation (ppt):
Spreadsheet (xls):
Screenshots
(Thanks to browsershots.org)
-
- Ubuntu 8.04
-
- Mac OS X 10.5
-
- Windows XP
My name is