Design a Website Favicon in Photoshop

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?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • jess_azur

    Thank you very much, now my favicon looks excellent! :)

  • Autograff

    Thanks, an excellent outline of the process. Of course, you might have to redraw your image at the smaller size. Not every blurred image is fixed with unsharp mask. When you have only 16 pixels to work with, every pixel counts. I often use several layers to get just the right look, and sometimes paint with the 1 pixel pencil at different opacities to make my own fully controlled anti-aliasing. You can also leave the background transparent if your icon looks better that way.

    • http://www.laughingliondesign.net Jennifer Farley

      Thanks Autograff. Yes, you’re absolutely right sometimes the unsharp mask will make it look worse. There is a certain amount of trial and error involved when choosing a suitable icon and I think simplicity is the key.

  • http://www.haroldinc.com haroldbr

    You can also use .png as the file format. You still name the file favicon.ico. That way you can use transparency for browsers like Firefox that have a non-white background behind the icon.

    • http://www.laughingliondesign.net Jennifer Farley

      Thanks Harold, I didn’t realise you could do it with .png files too. Great tip.

      • ravidor

        PNG is not supported on IE6 :)

  • peter_s

    Are we still restricted to the old 16×16 pixels, or has browser technology moved on? I noticed a site recently with a 50×50 favicon. There’s an example here (not my site!) … It seems to work OK in IE8, Firefox and Chrome, and looks pretty good. I tried other sizes with Firefox and Chrome and almost anything seems to work.

  • http://www.crunch42.com/ crunch42

    If creating a favicon in software that doesn’t save the ICO format, you can also save it as a PNG and then rename the extension ICO. It won’t display in IE<7, but will work in all other browsers. Or just save as a PNG then convert using some free online tool.

  • jluce

    Just wondering if there is a plug-in for Adobe Illustrator to create *.ico files…

  • Fred

    It is much easier to just use any graphic and this web site

    http://www.htmlkit.com/services/favicon/

  • ddtgard

    I am using an asp.net website with a master page. I have entered the link in my master page and it does not work. Do I need to enter it on each page of the website?

    • ddtgard

      Opps, I just didn’t wait long enough. It works now! Thanks!

  • SaraSmile

    Thank you for this little tutorial on favicon…It’s just what our site needed. Reading the comments help when the unsharp mask made it look really bad. I layered it and now it’s perfect. Check it out at heep://healingwatersclinic.com.

  • http://galengidman.com/ GalenGidman

    It’s my understanding that you don’t need to stick the link code in the head if there is a favicon.ico file in the website’s root folder. I could be wrong, but I think I remember reading that somewhere…

    • http://www.optimalworks.net/ Craig Buckler

      Most browsers look for a favicon in the website root, but it’s a good idea to use the <link> for older versions.

      Another useful tip: open 2 windows for the graphic you’re editing — one at normal size and one at full 1600x zoom. It allows you to edit the icon easily but see how changes really look.

  • http://www.theparodynetwork.com salcha00

    Great tutorial. Favicons give sites more personality.

  • ravidor

    A favicon.ico should have multiple layers 16px X 16px, 32px X 32px and 48px X 48px (even 64px X 64px and 128px X128px). The different layers are shown in different places (try to create a shortcut to the desktop to a site for example).

  • Wardrop

    Like ravidor, I was just going to comment on the fact that you may want to incorporate different sizes of your icon into your ICO file. The direction operating systems and browsers are moving in, seems to be one where larger icons are more heavily used.

  • http://p163.sg angelee

    This is what I’m looking for, thanks so much site point, you’re really a blessing.. page bookmarked…….

  • jtpalette

    I’m curious..how would one have multiple layers at different sizes in the same .ico file? That sounds interesting.

    Thanks.

    • Toby

      @jtpalette @wardrop @ravidor
      I am the author of the ICO File Format plugin.

      On my site, http://telegraphics.com.au/sw/#icoformat you can also download a CLI utility which can combine separate ICO files saved from Photoshop at different resolutions into a single ICO suite.
      However, if this is your intention, you are probably better off with a dedicated icon editor.

      Any questions on the plugin or icobundle utility: email support@telegraphics.com.au

  • Frank

    Hey, Thanks for providing these simple but detailed instructions. Can you suggest me the best free hosting service to host our favicons? I have also published my very first hubpage about adding favicon to blogger. Hope it’s related to here. What do you think about it? (hey, i’m a newbie in this field :-) Thanks.

  • http://pulse.yahoo.com/_ZBWU6U3TJATHLZTSNZKIGR4T4A Junil

    Nice…it help me a lot as a wordpress and a graphic designer

    Thank you

  • hardin

    Nice……
    Thank you.

  • Gathsam

    Hey…how comes we dont have one on this site?.. Jus Curious!!

  • http://www.cisteach.com cisteach

    I would like to obtain permission to link to or reprint your article on favicon creation for use in a Photoshop class I teach. Does anyone know how to go about obtaining permission.

    • http://www.onsman.com Ricky Onsman

      Hi cisteach, you are welcome to make the article content available to your students. Please do provide a link to the original article, and credit the writers and SitePoint. Also just point out to your students that the content is provided under fair use provisions for educational purposes and should not be used for commercial purposes.

      And if you or any of your students have any brainwaves as a result, you know where to come to share them.