Skip to content
Fix Code Error

How to add a browser tab icon (favicon) for a website?

March 13, 2021 by Code Error
Posted By: Anonymous

I’ve been working on a website and I’d like to add a small icon to the browser tab.

How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a .png logo file that I’d like to convert to an icon.

Related: HTML set image on browser tab.

Solution

There are actually two ways to add a favicon to a website.

<link rel="icon">

Simply add the following code to the <head> element:

<link rel="icon" href="http://example.com/favicon.png">

PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons.

Note that you don’t have to precede icon in rel attribute with shortcut anymore. From MDN Link types:

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

favicon.ico in the root directory

From another SO answer (by @mercator):

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via <link>.

So all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn’t allow you to use a PNG icon.

See also favicon.png vs favicon.ico – why should I use PNG instead of ICO?

Answered By: Anonymous

Related Articles

  • After a little scroll, the sticky navbar just is not fixed…
  • How to vertically align an image inside a div
  • HTML 5 Favicon - Support?
  • Favicon not showing up in Google Chrome
  • Active tab issue on page load HTML
  • How to prevent scrolling the whole page?
  • What is the best practice for creating a favicon on a web…
  • How do SO_REUSEADDR and SO_REUSEPORT differ?
  • How to add favicon.ico in ASP.NET site
  • What are the undocumented features and limitations of the…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How do I grep recursively?

Next Post:

NOW() function in PHP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error