Icon problem in browser bar

Asked

Viewed 336 times

0

Gentlemen I’m having trouble with the icon on the taskbar .

I am using Brackets to copy there when I use the option "Live Preview" inserir a descrição da imagem aqui

soon after the window opens showing that everything is ok fucionando inserir a descrição da imagem aqui

later when I upload the files, there is some problem.

inserir a descrição da imagem aqui

<!DOCTYPE HTML>

<html>

<head>
    <title>exemplo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--- zoom desativado para o usuario -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!----fonts google------->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/js" href="js/alerta.js">
    <link rel="shortcut icon" href="img/logoT3.png" >
    


    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->

    <style>
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
    </style>

</head>

    <!--------------------------------------------------------- Menu ------------------------------------------------------------>

 <body>
             <div class="row">
    <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-xl-">
        <img src="img/logoT5.jpg"></div><div class="col-12 col-sm-6 col-md-6 col-lg-8 col-xl-"><h1 class="w3-xlarge  w3-animate-opacity" >exemplo</h1></div></div>
        </body>
        </html>

html html5 website

  • Check if the image address is correct, and if you are using linux check the upper case and minuscule letters of the whole address

2 answers

2


Most likely the mistake is because of this! rel="shortcut icon" that rel does not exist, and it is strange that it worked even locally, but in serve surely there must be some config which does not recognise this attribute and does not show the favicon https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

To use it the way you used it you have to have the extension .ico to ensure that it will work even in older browsers and that the server will recognize the MIME Type correctly. The way you stated will probably only work in the older IE.

That form of <link> that you stated does not exist in HTML5 and will not work due to tb <!DOCTYPE html> that you put in. Read more details here: https://mathiasbynens.be/notes/rel-shortcut-icon

"... shortcut is not a Valid link relation. Indeed, it doesn’t show up in Section 4.12.5 of the HTML5 Specification on +link types' ... rel="icon" would suffice to specify a favicon."

Here’s an example of tag building for favicon, it meets the oldest and most modern specifications tb.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

This site can help you generate these files: https://realfavicongenerator.net/

If you want to support IE more securely an alternative is to include this tag in the code

<!--[if IE]><link rel="shortcut icon" href="img/favicon.ico"><![endif]-->

  • first thank you ! second if remotely ta working as I’ll know if other functions I added might be wrong ! just testing to find out ? you have some channel on youtube ?

  • 1

    @Caiquesey here has an online code validator from W3C itself you can put your code there and see if it accuses some error. Favicon usually gets "impregnated" in the browser cache, and even if you delete or change it for another image it is normal to continue showing the old image for a while... I have no channel on Youtube no, but my tip is to read a lot! Especially the Mozilla Documentation which is quite complete, and do exercises replicating codes you saw etc. Needing to just give a touch [] s

0

Try <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> If not, make sure the location of the icon matches the hosting, may be on your PC img/logoT3.png, but when the hosting has another directory.

Browser other questions tagged html html5 website

You are not signed in. Login or sign up in order to post.