How to Add Favicon to your Website

How to Add Favicon to your Website? Exactly what’s a Favicon?

A favicon is the little symbol that browsers display next to a search page’s title on a browser tab, or in the address bar close to its URL. It also is used when you bookmark a web page. Right here are some instances:

Does Your Site Have a Favicon?

As you could see, the favicon is very crucial. It’s crucial for website acknowledgment in an internet browser loaded with tabs, it’s a terrific possibility to expand your website’s branding, as well as your website will just look incomplete without one.

Sadly, numerous developers as well as developers do not recognize exactly how very easy it is to include a favicon. They do not specify any, or they leave the universal one their webhost gives. Exactly how’s that for marketing– you end up with the exact same favicon as countless other sites!


The Technical Information and facts

The Size

Images for favicons need to be 16×16 pixels. You can either resize an alreadying existing picture, or produce a tiny photo especially for usage as a favicon. When resizing a bigger photo to be this small, you’ll often lose vital information or end up with a blurry photo. To avoid this, you’ll likely intend to do some touch-up work after scaling down the larger image. Or, merely begin with a 16×16 canvas to avoid resizing concerns entirely.

What To Show

Considering that you just have 256 pixels to work with, it can be a little difficult to know exactly what to include in a favicon. Here are some common ideas:

  • Use your logo (or part of it).
  • If your logo doesn’t display well at such a little dimension, use a stylized version of the initial letter (or letters) of your site or company name.
  • Utilize an icon that connects exactly what your website does or stands for (for example, Google Analytics utilizes a small chart for their favicon).

The Image Style.

As the name recommends, favicons need to use the icon (. ico) data format. In the past, it was a hassle to convert into this style. Nevertheless, thanks to easy, free solutions, this is no more the instance. All you should do is create a 16×16 picture. The.ico layout supports transparency, so you’re not limited to developing a square icon. If you want to capitalize on openness, make use of the.gif or.png format when developing your photo.

Where It Goes.

Initially, favicons needed to be named specifically favicon.ico or favicon.png and also positioned at the root of your domain name (e.g. You should include also favicon photo on your images directory, make sure you will add correct link of image in below code into site.


Including a favicon is so simple, there’s no reason not to. Favicons are important for site recognition and also branding, and need to always be included in your sites. You could just have fun with them– as an example, you can include a sprig of holly for the wintertime vacations.

I wish this quick guide has actually removed the secret behind those little icons, as well as empowered you to add them to your websites!