chette.com

Creating a favicon using Adobe Photoshop

—

by

chette@chette.com
in

A favicon, shortcut for Favorites Icon, adds a subtle touch of individuality to a website. It is a graphic which is typically displayed next to the website’s name in a browser’s bookmarks or address bar.

Most favicons have a dimension of 16 x 16 pixels, and use the .ico file format. Some newer browsers, however, already support .gif and .png.

  1. Download the ICO plugin for Adobe Photoshop at the Telegraphics website. To install, extract the file to your Photoshop’s file format folder. This is typically located at C:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats

    Take note that you can use other tools to create favicons. I also use Microangelo and IrfanView. I have a personal preference in the Photoshop-plugin technique because of its flexibility.

  2. Using your favorite graphics program (such as Adobe Photoshop or Macromedia Fireworks), create a new canvas. It is recommended that you use a canvas size with a multiple of 16, such as 64 x 64 pixels.
  3. Create your graphic. Keep it simple, and don’t apply too much anti-aliasing.

    4. (Continued)

  4. Resize your graphic to 16 x 16 pixels. If you are using Adobe Photoshop, navigate to Image > Image Size, and enter 16 pixels in Width and Height. Next, to minimize blurring, select Bicubic Sharper from the drop down. Click OK.

    If the graphic looks blurry, experiment with the aliasing and the sharpening filters.

  5. It’s now time to convert your image to the .ico format. If you created your file in another graphics program, load it now in Photoshop. From the menu, go to File > Save As. The Save As dialog box will appear. Under Format, select ICO (Windows Icon) from the dropdown. In File name, enter favicon. Click Save.

  6. Upload the favicon.ico file in your web directory.
  7. In the web pages that you want your favicon to appear, include the following code between the <head> tags:
    <link rel="shortcut icon" href="/main/images/favicon.ico" />

    Make sure that you enter the correct path to your favicon in the code. For example, for this website, the following code was used:

    <link rel="shortcut icon" href="/main/images/favicon.ico" />

Comments

29 responses to “Creating a favicon using Adobe Photoshop”

  1. Avatar
    Anonymous

    Robinson :upset

    Reply
  2. Leo Avatar
    Leo

    Thanks. Hands down, this is the best icon tutorial I have ever seen.

    Reply
  3. Jomon Avatar
    Jomon

    Thanks !!
    I could make beautiful icons with photoshop

    Reply
  4. Laura Avatar
    Laura

    Thanks! Favicon now works! I like the way you wrote the instructions!

    Reply
  5. simcraigaus Avatar
    simcraigaus

    I couldn\’t get my favicon to work in the main directory for some strange reason, but by putting it in the images folder and using the shortcut

    it now works perfectly.
    Thankyou very much.

    Reply
  6. Brie D Man Avatar
    Brie D Man

    lufet mo ate chette.. i luv u na! ;D

    Reply
  7. James Avatar
    James

    thats cool thanks!

    Reply
  8. suvine Avatar
    suvine

    Hi, I do not have a save as ICO in my photoshop, I downloaded the plug in, and extracted it. How am I to install this? I still do not have the ico option to save as. Please help! Email me please

    Reply
  9. Larry Avatar
    Larry

    The Adobe Photoshop ICO plug-in must be manually moved into the correct plug-in directory

    Reply
  10. Canro International Avatar
    Canro International

    Very nice and also very useful! A big thanks to the community!

    Reply
  11. Lauren Avatar
    Lauren

    Thanks, Chette–your clear instructions made it easy to customize our favicon!

    Reply
  12. Devarshi Sridhar Avatar
    Devarshi Sridhar

    I got it – Wonder full – Thank you! for your guide lines

    Reply
  13. RUSTELL Avatar
    RUSTELL

    Pota 😉
    PAngot n2

    Reply
  14. favicon gif Avatar
    favicon gif

    I got it – Wonder full – Thank you! for your guide lines

    Reply
  15. nedylk Avatar
    nedylk

    helo 🙂 😉 😀 ;D >:( 🙁 8) 😛 :-* :'([img][/img]

    Reply
  16. ilz Avatar
    ilz

    All the download links for the Photoshop plugin file seem to be down, so I uploaded it here for all to download.

    DOWNLOAD PHOTOSHOP FAVICON PLUGIN HERE

    Reply
  17. ilz Avatar
    ilz

    Plugin is here:

    http://webdesignandsuch.com/2009/01/how-to-create-add-a-favicon-to-your-website-or-wordpress-blog/

    Reply
  18. Mo Avatar
    Mo

    Thank you! Any suggestions on how to create a favicon bundle???? My favicon looks terrible on the shortcut on my desktop, it needs to be larger. I understand that if you bundle favicons this is resolved.

    Reply
  19. khceleny Avatar
    khceleny

    :'( ang sya nmn tlga n2 hehehehehehe sponge_bhabe26 me yun…

    Reply
  20. me Avatar
    me

    would have been nice if they said up front what OS this works with

    does NOT work with 64 bit – why the heck not? too many people livin’ in old days i guess.

    so yeah, does NOT work with Vista 64 (best OS out there for powerful comps)

    Reply
  21. aloy Avatar
    aloy

    Very helpful for me. Before I saw your article, I was changing the file name manually from png to ico. Now that plug in does the job.

    Reply
  22. Suwahadi Avatar
    Suwahadi

    Its simply tutorial. Thanks for your share 😉

    Reply
  23. Toby Avatar
    Toby

    Hi,
    For those looking for a 64 bit version of the plugin, it is available at the same page.

    Reply
  24. kumarpenn Avatar
    kumarpenn

    Using your favorite graphics program (such as Adobe Photoshop or Macromedia Fireworks), create a new canvas. It is recommended that you use a canvas size with a multiple of 16, such as 64 x 64 pixels.

    Reply
  25. jersey Avatar
    jersey

    Thanks for your share. Now that plug in does the job.

    Reply
  26. Melva Gadsden Avatar
    Melva Gadsden

    thanks a lot for beginning this thread

    Reply
  27. Nanette Speranza Avatar
    Nanette Speranza

    I realy appreciate the value your posts brings to my day. I am thinking about starting a new blog. what would be a good wordpress theme for a web design blog?

    Reply
  28. Ashely Sasportas Avatar
    Ashely Sasportas

    Nice post. All very good suggestions. OMG, I am digging it immedidately.

    Reply
  29. jovann Avatar
    jovann

    ..thanks a lot for your wonderful
    tutorial!i got some ideas how to make
    my own favicon..keep it up!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *