FaviconX

Beginner Guides

How to Add a Favicon to Your Website

By Alex Rivera, Web Developer Published: August 11, 2026 Updated: August 11, 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 to Your Website

A favicon, short for "favorite icon," is a small image that represents your website in browser tabs, bookmarks, and other places. It is an essential part of your site's branding and helps users easily identify your site among many others. In this beginner's guide, we'll walk you through the steps to add a favicon to your website, ensuring that your site stands out and is easily recognizable.

Why You Need a Favicon

Before diving into the process of adding a favicon, let’s explore why it is important:

  • Brand Identity: A favicon reinforces your brand identity and makes your site more memorable.
  • User Experience: It helps improve user experience by allowing users to quickly locate your site in their browser.
  • Professional Appearance: A well-designed favicon gives your website a polished and professional look.

Steps to Create and Add a Favicon

Step 1: Design Your Favicon

The first step in adding a favicon to your website is to create one. Here are some tips:

  • Keep it Simple: A simple design is easier to recognize at small sizes.
  • Use Brand Colors: Incorporate your brand’s colors to maintain consistency.
  • Choose the Right Size: Favicons are typically 16x16 pixels or 32x32 pixels.

Step 2: Generate Your Favicon

Once you have your design, you can use a favicon generator tool like FaviconX to create the favicon file. Here's how:

  1. Visit the FaviconX website.
  2. Upload your image file.
  3. Customize the settings if needed (size, background color, etc.).
  4. Download the generated favicon files.

Step 3: Upload the Favicon to Your Website

Now that you have your favicon files, it’s time to upload them to your website. Follow these steps:

  • Connect to your website using an FTP client or your hosting provider’s file manager.
  • Navigate to the root directory of your website (usually the public_html folder).
  • Upload your favicon file(s), typically named favicon.ico, favicon.png, or favicon.gif.

Step 4: Link the Favicon in Your HTML

To ensure browsers recognize your favicon, you need to add a link to your HTML. Insert the following code within the <head> section of your HTML file:

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

Make sure to adjust the href attribute to point to the correct path of your favicon file if it is not in the root directory.

Step 5: Test Your Favicon

After adding the favicon to your site, it’s important to test it:

  • Clear your browser cache or open a new incognito window.
  • Visit your website and check if the favicon appears in the browser tab.

Troubleshooting Common Issues

If your favicon doesn't appear, consider the following:

  • Check the file format and ensure it is supported (ICO, PNG, GIF).
  • Verify the link in your HTML is correct.
  • Clear your browser cache to refresh the display.

Conclusion

Adding a favicon to your website is a simple yet effective way to enhance your brand's visibility and improve user experience. By following the steps outlined in this guide, you can easily create and implement a favicon that represents your site and makes it easy for visitors to identify. Don’t underestimate the power of a small image—your favicon is a vital part of your web presence!