Make sure your new image intended for the favicon has a transparent background. The magic wand selection tool is very handy when it comes to isolating the icon material from a bigger image.

Create or open the image you want for your favicon and set the size to 32×32 or 16×16, whichever you prefer.

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.Īnyhow, 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: 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. Otherwise it will just go by the old data it has stored. 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.

You can, however, also add the following code somehere within the brackets of your website to help browsers find the favicon:.

This should normally be enough for most browsers to detect the icon.

Upload the file to the root folder of your website.

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.

create an image in either 32×32 pixels or 16×16 pixels.I will still detail it here just for the record. I assume you already know how to make a favicon and make it work in the browser.

How to make a favicon without photoshop