FaviconX

HTML & Development

How to Add a Favicon in HTML

By Alex Rivera, Web Developer Published: August 25, 2026 Updated: August 25, 2026 4 min read

TL;DR

To add a favicon, upload a 32×32 (or 16×16) PNG and an ICO file to your site root and add <link rel="icon" href="/favicon.ico"> inside your <head>. For best results on every platform, also add a 16×16 and 32×32 PNG, an Apple touch icon and a web manifest — the snippet below does all of it.

How to Add a Favicon in HTML

A favicon is a small yet significant graphical representation of your website, typically displayed in the browser tab, bookmarks, and other areas where your site is referenced. Adding a favicon to your website can enhance brand recognition and improve user experience. In this guide, we will walk you through the steps to add a favicon in HTML effectively.

What is a Favicon?

A favicon, short for "favorite icon," is a small image that represents your website. It helps users easily identify your site among multiple tabs or bookmarks. Commonly, favicons are square images (usually 16x16 or 32x32 pixels) saved in .ico, .png, or .gif formats.

Steps to Add a Favicon in HTML

Here’s a straightforward guide to adding a favicon to your website:

  1. Create Your Favicon

    Use a favicon generator tool like FaviconX to create your favicon. Upload your logo or any image you wish to convert into a favicon. The tool will generate various sizes and formats to ensure compatibility across different browsers and devices.

  2. Upload the Favicon

    After generating your favicon, upload the file(s) to your website's root directory or a specific folder. It’s common to place favicons in the root directory for easier access.

  3. Link the Favicon in HTML

    To display the favicon on your website, include a link tag in the <head> section of your HTML document. Here’s a basic example:

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

    Replace path/to/your/favicon.ico with the actual path where your favicon is stored. If you’re using a different format, make sure to update the type attribute accordingly, such as image/png for .png files.

  4. Testing Your Favicon

    Once you have added the link to your HTML, it’s time to test your favicon. Open your website in a browser and check the tab for your favicon. If it doesn’t appear immediately, try clearing your browser cache or refreshing the page.

Best Practices for Favicons

To ensure your favicon is effective and visible, consider the following best practices:

  • Keep it Simple: Since favicons are small, intricate designs may not render well. Aim for a simple and recognizable design.
  • Use Appropriate Formats: While .ico is the most widely supported format, .png and .svg are great alternatives that provide better quality.
  • Maintain Consistency: Your favicon should align with your overall branding and website design to create a cohesive user experience.
  • Test Across Browsers: Ensure your favicon displays correctly on various browsers and devices to cater to all users.

Conclusion

Adding a favicon to your website is a simple yet impactful step in enhancing your site’s identity. By following the steps outlined above, you can create and implement a favicon that not only elevates your brand but also improves usability for your visitors. Don’t underestimate the power of a small icon—it’s a significant part of your website’s overall look and feel!