What is a favicon?

HTMLJunior~2 min read

Favicon (short for "favorite icon") is a small site icon that is displayed:

on the browser tab next to the page title,
in bookmarks (favorites),
in the history list,
in search results and on the smartphone screen, if the site is added as a shortcut.

1. Example of a favicon on a tab

javascript

[icon] Wikipedia - The Free Encyclopedia

[icon] ← this is exactly the favicon, the site's visual symbol.

2. How a favicon is linked

A favicon is linked using the <link> tag inside <head>:

html

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

Main parameters:

rel="icon": indicates that this is the site icon;
href: the path to the file (can be .ico, .png, .svg, and so on);
type: the image's MIME type (optional).

3. Modern favicon formats

Format	Features	Example
`.ico`	Classic format, supported by all browsers	`favicon.ico`
`.png`	Modern format with transparency	`favicon.png`
`.svg`	Vector icon, scales without losing quality	`favicon.svg`
`.gif`	An animated icon can be used (rare)	`favicon.gif`

4. Where a favicon is used

Location	Example
Browser tab	next to the page title
Bookmarks (favorites)	when saving the site
Browsing history	next to the site name
On mobile devices	when adding to the home screen
In Google search results	next to the site's URL (for brand trust)

5. File location

By default, browsers look for the favicon at the site root:

javascript

https://example.com/favicon.ico

But it is better to always specify the path explicitly via <link>, this is more reliable.

6. Examples of linking different formats

html

<link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">

apple-touch-icon: the icon for iPhone / iPad when the site is added to the screen.
sizes: specifies the icon's size for adaptive selection.

Summary:

Characteristic	Description
Purpose	Site icon for tabs, bookmarks, and search
Linking tag	`<link rel="icon" href="favicon.ico">`
Location	Inside `<head>`
Formats	`.ico`, `.png`, `.svg`
Size	Usually 16×16 or 32×32 pixels
Importance	Improves brand recognition and site trust

In simple terms: a favicon is the site's "mini-logo", which makes the tab recognizable and professional. Without it, the site looks "empty" and less trustworthy.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is a favicon?

#1. Example of a favicon on a tab

#2. How a favicon is linked

#3. Modern favicon formats

#4. Where a favicon is used

#5. File location

#6. Examples of linking different formats

#Summary: