Ever noticed those little icons on your browser tab for the website you are on? Those icons are called favicons. Pretty much every website seems to have these days. And this is how to add a favicon to your website. Including the best sizes and formats to use for your custom website favicon.
Where are favicons displayed?
When you add a favicon to your website, it will show up in a few different places. For one, in the top of the browser tab. It will also be the displayed icon for your website when users bookmark your website. Everyone knows those ones. But did you know that your favicon will also show up if you create a desktop shortcut to your website? Neat huhh.
What is the best size for a favicon?
A perfect square image of course! Typically website favicons will be displayed as a 32×32 pixel icon. The icons can go as low as 16×16 pixels, which is SUPER small. The downside about these small favicons is that you will loose some quality of the image. As well as the details in the icon. Some images may also start to look super pixelated if you size them down to far, so watch out!
I recommend using an image that is a little bigger than 32×32 pixels because then the browser can scale it down a bit. I prefer to use a 50×50 pixel image for my favicons.
What is the best format for a favicon?
The best format for a favicon is usually going to be a gif or png file type. For a few reasons. Firstly and most importantly, they are the best supported by all modern browsers. Even internet explorer. But, gifs and png images can support image transparency, unlike JPEGs. So if your favicon has no background color, or you wanted an image that is not a perfect square, you will be good to go with gifs or png.
If your image is not already in the gif or png format, use your favorite image editing software to convert it over. Or if you are looking for a free web app that can convert it, give convertico.com a try. With their site, you can easily convert your image to be good to go for a favicon.
How to add a favicon to your website
In order to add a favicon to your website, it actually only takes one line of code. That’s it! You just need to add a new link tag nested into your website’s head tags.
<link rel="shortcut icon" type="image/png" href="./images/favicon.png">
Locate the “head” tag on your websites HTML code, and throw the favicon code in that sucker. Once you get it all added in, you will likely have a head area looking like the one below. Full of several lines of code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>add a favicon</title> <link rel="shortcut icon" type="image/png" href="./images/favicon.png"> <link rel="stylesheet" type="text/css" href="./main.css"> </head> <body> </body> </html>