Fav.NINJA — it makes icons

2 min read Original article ↗

How to Use

For most websites, the following should be sufficient:

  1. Download the Retina-enabled .ico file listed above.
  2. Rename the file to favicon.ico if it is not already so named
  3. Place the icon in the "document root" of your web server. For example, if your site is http://example.com, then your site's icon should be available at http://example.com/favicon.ico.

The icon will then be displayed next to bookmarks, in tabs, etc. across all major browsers.

Extra Credit

In addition, for iOS and Android devices, you may want to include a larger icon (this will be displayed on a user's home screen if he saves a link to your site):

  1. Download the 152x152 .png file linked to above.
  2. Rename the file to favicon-152.png if it is not already so named
  3. Place this file in the "document root" of your web server (or the directory of your choice).
  4. Ensure the following <link> tag appears within the <head> element of each page of your site:
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/favicon-152.png">

The 152x152 will be used as-is on high-resolution devices like the iPad. Other devices will scale down the image to a suitable size.

Resources

For more information on favicons, see the following excellent resources: