Josh's Web Design Tips


Good Practice

Good favicon practice.

Bad Practice

Bad favicon practice.

You are probably thinking, what exactly is a favicon and why do I need it? Well, a favicon is a tiny image that is either 16x16 or 32x32 px that displays in your browser tab or address bar. This will vary by browser, but most default browsers usually have a blank page, globe, or something blank if there is no favicon inserted (see image above for examples).

Having a nice quality favicon gives your website huge advantages such as:

Favicons are usually saved in an ICO format, which is accepted by all browsers. They are also found in the header of a document. It is also standard to call it "favicon.ico". To insert a favicon into a web page, paste this code in the head section of your document.

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