Skip to content

How to Create Multi-Size Icons or Favicon.ico Files

by on March 22, 2012

Resources

Telegraphics -  Icoformat plugin for photoshop & Icobudle utility
Using icon plugin with Photoshop http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
Icobundle instructions http://www.telegraphics.com.au/sw/info/icobundle.htm
Great icon examples http://www.deltatangobravo.com/archive/2004/march/favourite
Irfanview download (if you need this to view all sizes of icon – windows picture viewer will also allow you to see the layers/files in the icon) http://www.download.com/1770-2001_4-0.html?query=irfanview&tag=srch&searchtype=downloads

Get Ready

1.    Download Icoformat plugin for photoshop from telegraphic
2.    Extract plugin to plugins folder
  a.    If you want to make a new plugins folder, do so
  b.    Open photoshop> edit> preference> plugins & scratch disks
  c.    Check “additional plugins folder”> browse to new folder location> OK> OK
  d.    Close photoshop
  e.    Paste icoformat.zip into plugins folder
  f.    Right click & extract icoformat zip to plugins folder with zip utility (I like 7zip)
  g.    Restart photoshop
  h.    See if it’s working> file> save as> >ico should now be available in file type dropdown

To use this plug in in CS5 you must restart Photoshop in 32 bit mode To do this go to Applications>Photoshop>  On the Ps icon "right click" and "Get Info" or CMD+i >Look for a check box "Open in 32 Bit Mode". Then open Photoshop and you’re good to go.

NOTE: I believe there is now a icoformat fix for 64 bit, so if you are having issues I recommend downloading it.

Extract Icobundle utility

  1. Create a new folder called Icons on your desktop
  2. Paste icobundle.zip into icons folder
  3. Right click & extract icobundle.zip into icons folder

Create the Icons

  1. Create a square graphic (with transparency if desired)> save .psd file
  2. Create 5 .png versions of the icon in varying sizes **
    1. Image>resize image>  200×200 pixels> save for web as>  choose .png 24 file type> save into Icons folder*> name it “icon64.png” >undo resize NOTE: I have started including this for iPad and other high resolution or tablet devices which may use large icon images – this can be skipped if you do not have a need for it (check analytics to see if you have a tablet audience)
    2. Image>resize image>  64×64 pixels> save for web as>  choose .png 24 file type> save into Icons folder*> name it “icon64.png” >undo resize
    3. Image>resize image>  48×48 pixels> save for web as>  choose .png 24 file type> save into Icons folder*> name it “icon48.png” >undo resize
    4. Image>resize image>  32×32 pixels> save for web as>  choose .png 24 file type> save into Icons folder*> name it “icon32.png” >undo resize
    5. Image>resize image>  24×24 pixels> save for web as>  choose .png 24 file type> save into Icons folder*> name it “icon24.png” >undo resize
    6. Image>resize image>  16×16 pixels> save for web as>  choose .png 24 file type> save into Icons folder*> name it “icon16.png” >undo resize NOTE: This smallest icon is often the most problematic, so I check it first and often will have to do extra work to make sure it is clear to the viewer
  3. Open all 5 .png files and  File> Save As> file type .ico to the Icons folder
  4. Check the icons folder to see there are now 5 .ico files

Bundle the different sized icons into one .ico file

  1. Start>run> type “cmd”
  2. Type “cd desktop\icons
  3. Type “icobundl   –o   combined.ico   *.ico “( Where combined.ico is the name of the new multi-icon file EX: favicon.ico)
    • Also, if in folder in the icons dir “icobundle   –o   favicon.ico   foldername\*.ico
  4. Cut icon from icons folder and move to its new home in the subfolder for this particular icon – copy to final location so you have a backup ^_^

*Be sure to remove all .png and .ico folders when finished with a project or they will all be bundled together in the next operation (you could also save over names (icon16.png, icon16.ico)

**You can view icons in photoshop only one file at a time, I recommend downloading Irfanview and associationg it with .ico files (use page up & page down- not left and right arrows- to view the quality and transparency of your .ico files before using. Lower quality Png 8 and other formats can leave jaggies, especially with transparency, so I recommend Png 24 format

Advertisements

From → Photoshop, Web Design

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: