I assume you already know how to make a favicon and make it work in the browser. I will still detail it here just for the record.
- Get the .ico plugin for Photoshop.
- create an image in either 32×32 pixels or 16×16 pixels. I find that 32×32 is better because it is automatically downscaled to 16×16 where needed and displayed in its native resolution where supported.
- Save the file as favicon.ico.
- Upload the file to the root folder of your website. This should normally be enough for most browsers to detect the icon.
- You can, however, also add the following code somehere within the <head> </head> brackets of your website to help browsers find the favicon: <link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>
Please be aware that you may have to delete your cookies and temporary internet files in order for your browser to display the icon straight away. Otherwise it will just go by the old data it has stored.
If you don’t make the favicon properly, it will be displayed with the background-color around it in the dropdown list of visited websites, which is displayed when clicking the down-arrow in the address bar, and the background color will also be displayed around your favicon in your bookmarks. However, the favicon tends to be displayed without background-color, whether it has background-color around it or not, in the actual address field to the left of the url when visiting the website.
Anyhow, to make a favicon with transparent background, a background that is not displayed in the browser at any instance, you need to do as follows:
- Create or open the image you want for your favicon and set the size to 32×32 or 16×16, whichever you prefer. The magic wand selection tool is very handy when it comes to isolating the icon material from a bigger image. Make sure your new image intended for the favicon has a transparent background. Transparent background is configured for the image when you select “new” in the Photoshop file menu so it is the very first thing you must do.
- Save image for “web and devices” and select gif as file format. Make sure background is set to transparent in the preview windows before saving.
- Once you have saved it as gif with transparent background, choose “save as” and select the file format .ico.
-
That’s it. You should now have a favicon with transparent background.
Home