Favicons pt III. – Transparent Icons

0

You’ve already learned how to make a favicon and an animated favicon for your web design, well here is one more way you can make your favicon that comes in very handy. Transparent favicon are becoming increasingly important, especially when you have a design that isn’t limited to a 16×16 box. Look at the picture below. Notice the favicon highlighted in blue has no white border while the favicon in red does. This is why you

want a transparent favicon. On different browsers there are colors other than white so you can’t always rely on a matching color background, this is why transparency is important. For example, in Firefox the address bar is white however; the tabs are a light gray shade. This causes a discrepancy between your white background color and the new background. In order to fix this you create a graphic with a transparent background so that it matches whatever color the browser may be. There are a few ways you can achieve this.

Way #1 – IconEdit32
Using IconEdit32 you select your graphic (should be 16×16) and using the “color Palette” look for a box with a blue line through it. That is the transparency palette and each box that has a blue line through will be transparent.

Way #2 – IrfanView
Using IrfanView open your previously created image. Then go File > save as. In the “save as type” drop down box select ICO in the and save your file as favicon.ico. There will be a dialog called PNG/PNH/ICO, under the ICO section select “save transparent color” then click save. The image will pop up and you will be able to select your desired background color, choose one and you’re done.

Way #3 – Photoshop
Using Photoshop create a new canvas. Then create a new layer and delete your background layer, past in your existing image and save it.

Way #4 – GIMP
Open up your image and click Image > Mode > RGB. Select your erase tool and erase everything you want to be transparent. Then save the file as a GIF (there will be a pop-up saying “GIF can only handle grayscale or indexed images”). Select * and convert to indexed using default settings and click on export. Finally save as .ICO and select 4bpp, 1 bit alpha and 16-slot palette.

Way #5 = Favicon Generator This favicon generator from Dynamic drive allows you to convert an image with transparency to ICO.