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

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

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?

Related Posts:

  1. Adding a favicon to a static HTML page
  2. Customize icon for “Add to home screen”
  3. Add Favicon to Website [duplicate]
  4. Add image in title bar
  5. Do you have to include link rel=”icon” href=”favicon.ico” type=”image/x-icon” /?
  6. What is the best practice for creating a favicon on a web site?
  7. Favicon not working
  8. Edit webpage with javascript trick – how to “unedit”?
  9. Angular, image not found (GET 404)
  10. what do
    and do?
  11. Can I force a page break in HTML printing?
  12. count(): Parameter must be an array or an object that implements Countable error in php
  13. How do I vertically align text in a div?
  14. Hide scroll bar, but while still being able to scroll
  15. HTML 5: Is it
    ,
    , or
    ?
  16. Draw Circle using css alone [duplicate]
  17. How to get a tab character?
  18. What is the difference between
    and
  19. Adding a background image to a
  20. Transparent CSS background color
  21. How to center a “position: absolute” element
  22. How to run python script in HTML?
  23. Set the table column width constant regardless of the amount of text in its cells?
  24. CSS Display an Image Resized and Cropped
  25. How do I make a placeholder for a ‘select’ box?
  26. Javascript: getElementById vs getElementsById (both works on different pages)
  27. localhost/test.php returns nothing
  28. Getting “Failed to load resource: net::ERR_FILE_NOT_FOUND” when trying to load a background image
  29. CSS: background-color only inside the margin
  30. Stretch background image css?
  31. Set cellpadding and cellspacing in CSS?
  32. WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for ‘jquery’. Please add a ScriptResourceMapping named jquery(case-sensitive)
  33. Disable Scrolling on Body
  34. CSS Background Image Not Displaying
  35. Changing image sizes proportionally using CSS
  36. How to give the background-image path in CSS?
  37. How to overlay image with color in CSS?
  38. CSS Background image not loading
  39. Outline radius?
  40. right align an image using CSS HTML
  41. CSS Background Image Not Displaying
  42. Show/hide ‘div’ using JavaScript
  43. Why is this HTML5 document invalid?
  44. Removing border from table cells
  45. Check a radio button with javascript
  46. How do you give iframe 100% height
  47. HTML Display Current date
  48. Error: The requested URL “[no URL]”, is invalid
  49. How to get CSS to select ID that begins with a string (not in Javascript)?
  50. Hidden property of a button in HTML
  51. Is there any reason for using WebGL instead of 2D Canvas for 2D games/apps?
  52. Is it possible to set the equivalent of a src attribute of an img tag in CSS?
  53. Why is colspan not applied as expected
  54. Document Root PHP
  55. How to display a gif fullscreen for a webpage background?
  56. Padding a table row
  57. How to align 3 divs (left/center/right) inside another div?
  58. How can I change the thickness of my
    tag
  59. jquery – how to show a hidden div
  60. How to create spoiler text?
  61. How do I horizontally center a table in Bootstrap
  62. How do I center text in a span?
  63. text-align justify not working
  64. Best way to center a
  65. Find out whether radio button is checked with JQuery?
  66. Display text on MouseOver for image in html
  67. How to resize an image to fit in the browser window?
  68. HTML / CSS table with GRIDLINES
  69. How to embed a Google Drive folder in a website
  70. Pure HTML Back Button
  71. How to access and download a file from a server using HTML 5
  72. Display text on MouseOver for image in html
  73. Layout a flex box similar to a table?
  74. html : iframe not showing content in html
  75. How can I capture the right-click event in JavaScript?
  76. In which directory do I find the HTML file of my wordpress pages?
  77. How can I publish Word files to a WordPress blog without losing the footnotes?
  78. How do we remove mystical [X] from text? Image included
  79. Remove html markup by wordpress
  80. How can I set different html lang attribute for different countries?
  81. Add Attribute to p Tag of Post Content
  82. custom html in page change in browser
  83. Add Adsense to a website but the server responds with error 510 [closed]
  84. Can’t save any WordPress post with the html tag in it
  85. remove string: ‘custom content…’ from every page
  86. How to disable escaping html chars in wordpress?
  87. Whitespace Before Doctype
  88. html entities occur in the_excerpt used as meta description
  89. Allow Access To Subfolder Of HTML For Logged In Visitors
  90. Removing Line Break Tags from a Page
  91. Insert data through a script directly in the db
  92. Using Tags Instead of Categories for site structure
  93. Use Mail-Tag from Contac Form 7 in a script
  94. Line break before headings () appears from nowhere
  95. Tidy HTML formatting in Gutenberg HTML blocks
  96. Unable to autoplay and loop a cinemagraph from Imgur
  97. standard callback function for wp_list_comments
  98. How to replace a specific html tag in bulk?
  99. Inserting code into a page just shows raw HTML
  100. How can I insert a disclaimer in a WordPress site?

Leave a Comment