HTML-How to add an Icon logo in browser

Question

I'm building a website and i want to add a small icon logo to the title bar of the browser. Where i have to place the code? I tried before the head but nothing happens

Here is a good reference for you [How to add favicon for a website](https://stackoverflow.com/a/35625707/8644764) — sevilturner, Apr 16 '19 at 17:23

score 3 · Accepted Answer · answered Apr 16 '19 at 17:05

3

The logo on title bar is called favicon. To include a favicon in your website you just need to provide the link to your icon inside your tag.

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
    <link rel = "icon" type = "image/png" href = "/icon.png">
    <!-- For apple devices -->
    <link rel = "apple-touch-icon" type = "image/png" href = "/icon.png"/>
  </head> 
</html>

By using this you can include your icon in the title bar of your website. The extension of your icon should be .png for better visibility and convert your png to .ico extension for more support.

answered Apr 16 '19 at 17:05

Usman Ali

116
5

CORRECTION: I tested this in Chrome and it worked. No icon showed up in Edge or Internet Explorer using this code. – Rich Apr 16 '19 at 18:01
I also was able to get an ico to work in chrome, but not ie or edge. – Rich Apr 16 '19 at 18:13
It worked! Thank you so much! – Konstantina Apr 16 '19 at 19:52

HTML-How to add an Icon logo in browser

1 Answers1