What is a Favicon?
A favicon (favourite icon) appears in the browser tab, bookmarks bar, and when users save your site to their home screen. It is typically 16×16 or 32×32 pixels.
Adding a Favicon
Place a <link> tag inside <head>:
<head>
<link rel="icon" type="image/png" href="/favicon.png">
</head>Favicon Formats
| Format | Extension | Notes |
|---|---|---|
| PNG | .png | Modern, transparent background support |
| ICO | .ico | Classic format, contains multiple sizes |
| SVG | .svg | Scalable, best for modern browsers |
| WebP | .webp | Small file size, modern browsers |
Multiple Sizes (Full Setup)
<head>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon.png">
</head>Use a favicon generator like favicon.io — paste in a letter, emoji, or image and it exports all the sizes you need.