How to add a favicon to your website with HTML5

To add a website favicon correctly, first prepare a 32×32 or 64×64 pixel .ico, .png or .svg format icon file and name it favicon.ico, etc., place it in the website root directory or a specified path, and then use <link> to explicitly declare it in the HTML

tag, for example: <link rel="icon" href="/favicon.ico" type="image/x-icon">. It is recommended to support multiple formats and devices at the same time, such as adding PNG different size versions, SVG icons, and Apple touch icons. Finally, clear the cache and test whether it displays normally, to ensure that the path is correct and the file is accessible. The entire process requires attention to the file format, path and compatibility to avoid loading failure.

Adding a favicon to your website using HTML5 is simple and only requires a few steps. A favicon is the small icon that appears in the browser tab, bookmarks, and on mobile device home screens when someone saves your site. Here's how to do it properly.

1. Prepare Your Favicon File

Start by creating or choosing a square image, ideally 32×32 or 64×64 pixels in size. The most widely supported format is .ico , but modern browsers also accept .png , .svg , and even .webp .

• Save your file as favicon.ico or favicon.png (or favicon.svg if using SVG).
• Place it in your website's root directory (eg, /favicon.ico ) so browsers can find it automatically.

Alternatively, you can keep it in a subfolder like /images/favicon.ico , but then you'll need to specify the path in HTML.

2. Add the Favicon Link in the HTML

Even though some browsers will look for favicon.ico in the root by default, it's best practice to explicitly declare it in your HTML using the <link> tag inside the section.

For a standard .ico file:

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

For a PNG favicon:

 <link rel="icon" type="image/png" href="/images/favicon.png">

For an SVG favicon (great for scalability and modern browsers):

 <link rel="icon" type="image/svg xml" href="/images/favicon.svg">

You can also use multiple formats for better compatibility:

 <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="icon" type="image/svg xml" href="/images/favicon.svg">
<link rel="shortcut icon" href="/favicon.ico">

Note: Using rel="shortcut icon" is a legacy convention but still recommended for backward compatibility.

3. Support for Apple and Other Devices (Optional but Recommended)

Apple devices use their own format for favicons when a site is saved to the home screen. To support them:

 <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">

You can also specify sizes:

 <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">

For modern web apps, you might want to use a web app manifest, which can define icons for different devices:

 <link rel="manifest" href="/site.webmanifest">

4. Test Your Favicon

After adding the code:

• Clear your browser cache or do a hard refresh (Ctrl F5 or Cmd Shift R).
• Open your site and check the browser tab.
• Try bookmarking the page or saving it to a mobile home screen to verify it appears correctly.

If the favicon doesn't show up, double-check:

• The file path is correct.
• The file is uploaded to the server.
• The file format is supported.
• There are no server errors (check browser DevTools Network tab).

Basically, just link your icon in the and make sure the file is accessible. It's not complicated, but small mistakes in path or format can cause it to fail.

The above is the detailed content of How to add a favicon to your website with HTML5. For more information, please follow other related articles on the PHP Chinese website!