📝 Add docs on image support in atom-shell.

docs/api/browser-window.md

@@ -47,7 +47,7 @@ You can also create a window without chrome by using
     zoom percent / 100, so `3.0` represents `300%`
   * `kiosk` Boolean - The kiosk mode
   * `title` String - Default window title
-  * `icon` String - The path of icon file
+  * `icon` [Image](image.md) - The window icon
   * `show` Boolean - Whether window should be shown when created
   * `frame` Boolean - Specify `false` to create a
     [Frameless Window](frameless-window.md)

docs/api/image.md

@@ -0,0 +1,25 @@
+# Image
+
+In atom-shell images are represented by their file paths, we currently do not
+support in-memory images or remote images.
+
+For example when creating tray or setting window's icon, you can pass image's
+file path as `String` to represent an image:
+
+```javascript
+var appIcon = new Tray('/Users/somebody/images/icon@2x.png');
+var window = new BrowserWindow({icon: '/Users/somebody/images/window.png'});
+```
+
+## Supported formats
+
+Only `PNG` and `JPG` formats are supported, and `PNG` format is preferred.
+
+## High resolution image
+
+On platforms that have high-DPI support, you can append `@2x` after image's
+file name's base name to mark it as a high resolution image.
+
+For example if `icon.png` is a normal image that has standard resolution, the
+`icon@2x.png` would be treated as a high resolution image that has double DPI
+dense.

docs/api/tray.md

@@ -40,7 +40,7 @@ rely on `clicked` event and always attach a context menu to the tray icon.
 
 ### new Tray(image)
 
-* `image` String
+* `image` [Image](image.md)
 
 Creates a new tray icon associated with the `image`.
 
@@ -50,13 +50,13 @@ Emitted when the tray icon is clicked.
 
 ### Tray.setImage(image)
 
-* `image` String
+* `image` [Image](image.md)
 
 Sets the `image` associated with this tray icon.
 
 ### Tray.setPressedImage(image)
 
-* `image` String
+* `image` [Image](image.md)
 
 Sets the `image` associated with this tray icon when pressed.