Windows Guides Feed

Are you a webmaster who would like to create an icon for your website that will show when someone adds your page as a bookmark?

Do you already have one, but dislike the white box that surrounds your icon?

If so, this guide is for you.

Please note: you will need Photoshop to follow this guide.

Open up Photoshop and select File > New (CTRL+N)

The following dialogue will pop up.

01 Create a Transparent Favicon for Your Website

For the width and height, type in 32.

Paste in your favorite icon. You should see something like the image below.

02 Create a Transparent Favicon for Your Website

Now select Image > Mode > Indexed Color (if it isn’t already selected.)

03 Create a Transparent Favicon for Your Website

Hit “OK” at the following screen after ensuring the settings match the ones listed here.

04 Create a Transparent Favicon for Your Website

Now select the Magic Wand tool (W)

05 Create a Transparent Favicon for Your Website

Click on the white area that you would like to eliminate. Then press the delete key.

06 Create a Transparent Favicon for Your Website

You should see checkered boxes in the background.

07 Create a Transparent Favicon for Your Website

Now save the file as a PNG.

08 Create a Transparent Favicon for Your Website

When prompted, select “None” and hit “OK“.

09 Create a Transparent Favicon for Your Website

Now visit this website. Browse to the image on your hard drive (remember it must be a PNG) and convert the PNG image to an icon.

After downloading the icon, upload it to your web server.

Now for the last step. For each page or template you want to include the icon with put the following line of code between the tags.

10 Create a Transparent Favicon for Your Website

You’re done! Upload the page with the new code and there you have it – a tidy transparent icon for others to identify your page by.



 Create a Transparent Favicon for Your Website

About Rich

Rich is the owner and creator of Windows Guides; he spends his time breaking things on his PC so he can write how-to guides to fix the problems he creates.

Free PC tips by email

Search Windows Guides




Comments

  • Mel

    I just save it as .ico and it seems to work..

  • Mel

    There is a first for everyone! Let us know when you get one up! :)

  • Toby Thain

    This can be done directly from Photoshop using my ICO File Format plugin, http://www.telegraphics.com.au/sw/#icoformat

    @ commenter Mel: It is not correct to rename the PNG (or any other format) as ICO. They are different. The only universally compatible format for favicons is ICO format.

  • Toby Thain

    This can be done directly from Photoshop using my ICO File Format plugin, http://www.telegraphics.com.au/sw/#icoformat

    @ commenter Mel: It is not correct to rename the PNG (or any other format) as ICO. They are different. The only universally compatible format for favicons is ICO format.

  • Toby Thain

    This can be done directly from Photoshop using my ICO File Format plugin, http://www.telegraphics.com.au/sw/#icoformat

    @ commenter Mel: It is not correct to rename the PNG (or any other format) as ICO. They are different. The only universally compatible format for favicons is ICO format.

  • Toby Thain

    This can be done directly from Photoshop using my ICO File Format plugin, http://www.telegraphics.com.au/sw/#icoformat

    @ commenter Mel: It is not correct to rename the PNG (or any other format) as ICO. They are different. The only universally compatible format for favicons is ICO format.

  • Lue

    it works – thank you very much!

  • Qirsh

    Great!

  • Aiizen2012

    i used macromedia fireworks to edit the photo bec i don’t have photoshop app. lol

    i’d just changed the extension file of the img to .ico.lol and still, it work, btw thanks for the info. 


Computer tips in your inbox
Sign up for the Windows Guides newsletter to get PC tips and access to free Windows books (More details)

Enter your email address:
 

Popular Guides

See which sites have been visited on your PC (even if private browsing mode is used)

Create a Windows 7 System Repair Disc

Best Free Anti-malware

Hibernate vs. Sleep vs. Shut-Down

i3, i5, and i7; Dual, Quad, Hexa Core Processors. How to they Differ?

Intel's Ivy Bridge Processor: new Features

Submit Your Tip
Submit your computer tip to us; receive full credit for all published tips

Comments
Windows Guides on Facebook