How to Create Your Favicon?

How do you create a favicon and how do you get it uploaded onto your website? For starter we recommend a PNG rather than GIF or JPG/JPEG. Here is the reason; Most favicons are either circular or they are the logo itself so it's not a perfect square. If it is a perfect square then you can use any of those formats -- it doesn't matter. But if it's not and there's a transparency behind it, you want to make sure your logo's transparent.

For example if your logo is a circular emblem, you want to make sure that the outside isn't just white or black, because many times, the web browser's background colors will be some sort of gray. You don't want it to look like it's a cutout. You want it to be fully transparent in the places where the emblem isn't there. The PNG format allows that. GIF allows that too except what happens is you have jaggedy edges due to how that image format works. Once you have a transparent PNG version of your logo, what you will do is; Upload it with our favicon generator then generate your favicon. You can watch our tutorial video above too. Viola! That easy right?

What is a Favicon?

A favicon also known as a "faahviconn" stands for favorites icon. What that means is if somebody browsing your website, right next to the title bar there is a little icon which is usually it is a logo of a company or something visual that represents a brand or the website itself. The purpose of the favicon if somebody has tons of browser tabs open, all titles will dissapear and all you can is the favicons. That is why really important to have favicon up there. Also when somebody adds your website to their favorites or their bookmarks, the icon shows up there as well. In the beginning, favicons are typically the size of 16 x 16 pixels. However, these days, with all the different ways of accessing websites, it's recommended that you have larger versions of the favicon such as in 32x32 as well as 48x48 pixels.

Here is the reason why; Let us say if somebody wants to add your website to their reading list on Safari what that does is actually to the left side of the Safari, it will expand. Then you will see a big version of your favicon and a little short description which is taken from the website's title. If you only have the 16x16 pixels size favicon, it becomes pixelated and you don't want that. You want it to be sharp. Let's say if somebody wants to add your website as a shortcut onto their desktop in Windows OS and if you only have the 16x16 pixels, it will become pixelated as well. So you want to make sure you have multiple sizes, because having a low-quality favicon is just bad for your branding in general.

How to Use a Favicon

The size of the image you have chosen can be 16x16 pixels or 32x32 pixels (or you can choose other sizes from the dropdown menu), using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO. W3C

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">