Blogs

Design a Website Favicon in Photoshop

Jennifer Farley
Share

Favicons (short for favorites icons) are those tiny little icons left of your web browser’s address bar, and are a part of your overall site branding. They show up in your web browser, but also in news feeds, so it’s important that you include one with your site. Favicons really are tiny icons; their dimensions are 16 pixels by 16 pixels—not an awful lot of space to work with. Have a look around the Web and see what other sites are using. Some icons work better than others at this small size, and simplicity is the key.

Amazon

NTTimes

Sitepoint

Wired

Okay then, lets get started.

  1. Download the plugin for Photoshop that allows you to save the file in the Windows Icon (ICO) file format. You can download a free plugin called ICO Format from www.telegraphics.com.au/sw/.  The instructions for installation are included with the free download.
  2. Open Photoshop. Choose File > New and create a new document with a resolution of 72 ppi and dimensions of 64 by 64 pixels. We’ll downsize after we create the graphic.
  3. Create or place your artwork in the new document. If you’re using text in your favicon, make sure to turn off anti-aliasing so that the edges are nice and crisp.
  4. For my icon, I’m using a purple paw print, with one part of the paw highlighted in pink. This was created using a vector shape.
    64x64pixels
  5. Once you have your design ready, choose Image > Image Size. Make sure the Constrain Proportions checkbox at the bottom of the dialog box is turned on; then set the Width or Height field to 16 pixels (Photoshop automatically changes the other field to 16). Click OK.
    16x16
  6. If your design looks a bit blurry, use the Unsharp Mask filter.
  7. Now that your icon is ready, choose File > Save As, and pick Windows Icon (ICO) from the Format pop-up menu at the bottom of the dialog box; then click Save.ICO-format

And that is your favicon completed. Very easy.

If you created the favicon for your own site, you’re ready to upload the file to the root level of your website, where your index page lives. Not all web browsers support favicons, but for the browsers that do support it you can insert the following code within the <head> section of your web pages:

<link rel="SHORTCUT ICON" href="/favicon.ico">
note:Want more?

If you want to read more from Jennifer, subscribe to our web design newsletter, the SitePoint Design View.

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Foundations of Photoshop.

Comments on this article are closed. Have a question about Photoshop? Why not ask it on our forums?