Fav.NINJA it makes icons

Settings

Click one of the icons above to get started.

Feedback

Fav.NINJA is a work in progress. Is it lacking something, however small, that could be useful to you?
Send us Feedback!

Preview

16x16

Standard size for a website favicon

57x57

Non-retina iPhone and Android devices

152x152

High-resolution tablet devices (iPad and Android)

Download your Icon

Retina-enabled .ico

This is a .ico file containg both a 16x16 image and a 32x32 image.
This is recommended.

Download

Traditional .ico

This is a .ico file containing a single 16x16 image.
NOT recommended. This will look terrible on retina displays.

Download

Additional files

Below are links to .png files appropriate for App Store submissions.

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:

© 2014 Nathaniel Story