Suggest an edit

Improve this article

Refine the answer for “What is a favicon?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts434 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.