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.
- 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 Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File 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.
- 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.
- Create your graphic. Keep it simple, and don’t apply too much anti-aliasing.
- 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.
- 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.
- Upload the favicon.ico file in your web directory.
- 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" />
(Continued)
Robinson :upset
Thanks. Hands down, this is the best icon tutorial I have ever seen.
Thanks !!
I could make beautiful icons with photoshop
Thanks! Favicon now works! I like the way you wrote the instructions!
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.
lufet mo ate chette.. i luv u na! ;D
thats cool thanks!
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
The Adobe Photoshop ICO plug-in must be manually moved into the correct plug-in directory
Very nice and also very useful! A big thanks to the community!
Thanks, Chette–your clear instructions made it easy to customize our favicon!
I got it – Wonder full – Thank you! for your guide lines
Pota ;)
PAngot n2
I got it – Wonder full – Thank you! for your guide lines
helo :) ;) :D ;D >:( :( 8) :P :-* :'([img][/img]
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
Plugin is here:
http://webdesignandsuch.com/2009/01/how-to-create-add-a-favicon-to-your-website-or-wordpress-blog/
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.
:'( ang sya nmn tlga n2 hehehehehehe sponge_bhabe26 me yun…
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)
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.
Its simply tutorial. Thanks for your share ;)
Hi,
For those looking for a 64 bit version of the plugin, it is available at the same page.
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.
Thanks for your share. Now that plug in does the job.
thanks a lot for beginning this thread
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?
Nice post. All very good suggestions. OMG, I am digging it immedidately.
..thanks a lot for your wonderful
tutorial!i got some ideas how to make
my own favicon..keep it up!