Site Icons (Favicons)

A simple way to give a site a stronger sense of identity to users is to include an icon that shows up in the browser tab, some search listings, and other places where the site needs to be recognizable at a glance. This icon is called a favicon.

Creating a Favicon

These days, all major browsers accept images in PNG format as a favicon. The image should have a square aspect ratio (192px × 192px is a good size). It's a good idea to name the file favicon.png and place it in the root directory of the website.

Also note that PNG images support transparency, so you can create an image that is circular or other non-rectangular and the background will show through.

Using a Favicon on a Site

The most reliable way to let the browser know about a favicon is to link it in the head of each html document, similar to how we link to CSS files:

This simple line of code lets the browser know about your favicon and that it is a PNG.