Web Analytics
Take a Tour of Windows Guides on www.mintywhite.com   Tour    Why Should You Subscribe to this Site   Why Subscribe?    Download a copy of Windows Vista - the Pocket Guide   Free Vista Books    Get the mintywhite Windows Guides toolbar for your browser   Toolbar   Donate a Dollar to Pay for Next Year’s Web Hosting

Create a Transparent Favicon for Your Website

Mozilla Firefox Guides Add comments

Transparent Favicon

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.

Transparent Favicon

For the width and height, type in 32.

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

Transparent Favicon

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

Transparent Favicon

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

Transparent Favicon

Now select the Magic Wand tool (W)

Transparent Favicon

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

Transparent Favicon

You should see checkered boxes in the background.

Transparent Favicon

Now save the file as a PNG.

Transparent Favicon

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

Transparent Favicon

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.

Transparent Favicon

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.

Further Reading:

Take a Tour of Windows Guides on www.mintywhite.com   Tour    Why Should You Subscribe to this Site   Why Subscribe?    Download a copy of Windows Vista - the Pocket Guide   Free Vista Books    Get the mintywhite Windows Guides toolbar for your browser   Toolbar   Donate a Dollar to Pay for Next Year’s Web Hosting

14 Responses to “Create a Transparent Favicon for Your Website”

  1. Jennifaer says:

    I got it to work, now all I need is a website to use it on :)

  2. gagan says:

    How I can change the .png file to icon?

  3. Rich says:

    Go here: http://converticon.com/

  4. carchargeripodnana says:

    Your site- www.mintywhite.com is cool site, good job, owner.

  5. carchargeripodnana says:

    Your site- www.mintywhite.com is excellent resource, good job, owner.
    Good luck.

  6. Shayla says:

    Cool :) I don’t have a webiste, but I always wondered how they make them

  7. KaraWanuaft says:

    I’m new here, just wanted to say hello and introduce myself.

  8. B says:

    Nice blog, thanks.

  9. mort says:

    Cool blog
    Thanks, webmaster.

  10. Boots says:

    Good site
    Thank your.

  11. Christian says:

    The converticon site is down right now, does anyone know a similar site?

  12. Rich says:

    Christian, try here: http://www.convertico.com/

Trackbacks (Trackback URL)

  1. Madeline
  2. Favicon et gif : même combat | Carnet de kinoute

Leave a Comment

If you have a computer help question, click here to leave it on the forums instead.