Home / Questions / 53441
Accepted
Pavlo B.
Asked: 2020-03-07 09:36:13 +0800 CST 2020-03-07 09:36:13 +0800 CST

Place icon on tab

  • 772

I am trying to place an icon on my tab, something like this:

enter image description here

The favicon.ico file is in the same folder as the file where I put this code:

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

But it doesn't do anything, it leaves me the xamp icon...

html

7 Answers

  1. Best Answer

    It seems to me that the url of the href is wrong, try this:

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

    Also always clear the cache of the page so that the change is updated

    • 7

  2. If you see the XAMPP icon it's because it keeps raising that icon. Look inside your XAMPP server folder for this icon and delete it. Replace it with your icon and it should work.

    If when modifying the favicon.ico file you still see the XAMPP icon, you should refresh your browser's cache so that it reloads all the resources. A page refresh plus cache is achieved with Ctrl+ Shift+ R(Windows/Linux) or Cmd+ Shift+ R(Mac)

    It is worth clarifying that the address of the icon, although it is well written, is always relative to the root of the server, not necessarily the same level where you have your HTML file.

    • 7

  3. I just did it and it worked for me as follows:

    Of course, previously I had to transform my jpg image to favicon.ico, I have done it with the GIMP 2.10.22 editor, to a square size of max 31x31, first I have exported the image as jpg and later, in Visual Studio itself I have renamed it to favicon.ico

    Another thing, This code has to go in the part of the hea, the link tag is not inside the title.

    Let's see like this! :)

    • 1

  4. you just add a link in the header of the page, with rel =icon and the full url of the icon. Here is an example with the es.stackoverflow.com icon:

    <html>
<head>
    <meta charset="utf-8">
    <title>Icono en el navegador</title>
    <link rel="icon" type="https://cdn.sstatic.net/Sites/es/img/apple-touch-icon.png?v=7739871010e6
">
</head>
<body>
    <h1>Test de Icono en el tab de navegador</h1>
</body>
</html>

    • 0

  5. The code that I have used to put an image in the browser tab is:

    <link rel="shortcut icon" href="imagenes/favicon.png">

    in my case, I had the image in a folder called images, eye; It doesn't work for many, not because the code doesn't work, but because of the possible errors that we may have in the code structure.

    • 0

  6. It worked for me like this -->

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

    PS: The image must be in the same folder. Or the href you must specify, if it is inside a folder it will be href="tucarpeta/tulogo.ico" And if the file is before, that is, you must go back, it would be like this -->

    href="../tucarpeta/tulogo.ico"
    • 0 
  7. <link rel="icon"  type="image/png" href="nombre de la imagen .tipo de archico ejemplo png">

    link in comments

    And that's it. You must put it in the header, the image must be in the same folder as the page.

    • -2