Favicon

Learn how to add a favicon to your website to improve branding and browser tab visibility.

Loading...
Favicon

A favicon is a small image that represents your website. It appears in browser tabs, bookmark bars, and history lists.

To add a favicon to your website, you simply need to link the image file to your HTML document using the <link> tag inside the <head> section.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <title>CSSnippets</title>
  </head>
  <body>
    <h1>Welcome to CSSnippets</h1>
  </body>
</html>
  • The <link> tag with rel="icon" tells the browser to use the image as the favicon.
  • The href attribute points to the image file that will be used as the favicon.
  • The type attribute specifies the image type.

Favicon Example

File Types

You can use various image formats for the favicon, such as .ico, .png, .jpg, or .svg. However, .ico is the most widely supported format, and .png is commonly used as well.

Size

The typical favicon size is 16x16 or 32x32 pixels, but larger sizes (such as 48x48 or 64x64) can be used for better resolution on high-DPI displays (Retina displays).