GET favicon.ico 404 (Not Found) Error [Solved]

# GET favicon.ico 404 (Not Found) Error [Solved]

The error "GET favicon.ico 404 (Not Found)" occurs when the favicon.ico icon is not found at the root of your website.

To solve the error, add the link that points to your favicon.ico file in the head tag of your HTML.

If you simply want to silence the error without adding a favicon.ico file to your site, add the following link tag to the head section of your HTML file.

index.html

Copied!
<link rel="shortcut icon" href="#" />

Here is a complete example of an HTML page that has the tag.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>
  </body>
</html>

The code for this article is available on GitHub

Note that the tag must be added in the head section of your HTML page.

You can also set the rel attribute of the link tag to icon to achieve the same result.

index.html

Copied!
<link rel="icon" href="#" />

Make sure the href attribute is set to # so that the browser knows not to look for a favicon.ico file.

Try to refresh the page and check if the error is resolved.

If you still aren't able to see the favicon, try to empty the cache and hard refresh your page.

Open your developer tools by pressing F12.
Right-click on the Reload page button in the top left corner.
Select Empty Cache and Hard Reload.

You can also press Ctrl + R (macOS and Linux) or Cmd + R (Windows) to hard-reload the page.

If the issue persists, try to use the following link tag to prevent favicon.ico requests.

index.html

Copied!
<link rel="icon" href="data:," />

Make sure to add the tag in the head section of your HTML page.

Try to hard refresh the browser after adding the tag and check if the issue persists.

If the issue persists, try to replace the link tag with the following.

index.html

Copied!
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />

Here is an example HTML page that uses the tag.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>
  </body>
</html>

The code for this article is available on GitHub

If you refresh the page, you should see that the default favicon is shown and no 404 favicon.ico errors are raised.

If you use an Nginx web server, you can also add the following to your Nginx config file at /etc/nginx/nginx.conf.

/etc/nginx/nginx.conf

Copied!
# skip favicon.ico
location = /favicon.ico {
    access_log off;
    return 204;
}

The web server is configured to respond with 204 No Content status code when the browser looks for /favicon.ico.

# Adding a `favicon.ico` file to your website

Make sure you have a favicon.ico file in your project's root directory.

The favicon is the icon that is displayed in the browser tab and should be accessible at /favicon.ico, e.g. https://bobbyhadz.com/favicon.ico or http://localhost:3000/favicon.ico.

If you need a favicon for testing purposes, visit https://www.google.com/favicon.ico, right-click on the image and select Save image as.

Lastly, save the image in your project's directory, right next to your index.html file.

You can load the favicon.ico file by using a link tag.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link href="/favicon.ico" rel="icon" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>
  </body>
</html>

The link tag should be added in the head section of your HTML file.

index.html

Copied!
<link href="/favicon.ico" rel="icon" />

Make sure to specify the correct path to your /favicon.ico file.

You can also use a relative path.

index.html

Copied!
<link href="./favicon.ico" rel="icon" />

The example above assumes that your index.html and your favicon.ico files are located in the same directory.

shell

Copied!
my-project/
  └── index.html
  └── favicon.ico

You can also specify a relative path if your favicon.ico file is located in a nested directory.

Suppose we have the following folder structure.

shell

Copied!
my-project/
  └── public/
    └── favicon.ico
  └── index.html

You would load the favicon file as follows.

index.html

Copied!
<link href="./public/favicon.ico" rel="icon" />

If you need to go one directory up, use the ../ prefix.

Suppose we have the following folder structure.

shell

Copied!
my-project/
  └── pages/
    └── index.html
  └── favicon.ico

You would load the favicon.ico file as follows.

index.html

Copied!
<link href="../favicon.ico" rel="icon" />

The code for this article is available on GitHub

Similarly, if you need to go two directories up, you would use the ../../ prefix.

If you still aren't able to see the favicon, try to empty the cache and hard refresh your page.

Open your developer tools by pressing F12.
Right-click on the Reload page button in the top left corner.
Select Empty Cache and Hard Reload.

You can also press Ctrl + R (macOS and Linux) or Cmd + R (Windows) to hard-reload the page.

After clearing the cache and reloading the page, you should be able to see the favicon.

I've also written a detailed guide on how to change the favicon in React.js.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

GET favicon.ico 404 (Not Found) Error [Solved]