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:
Home