favicon.ico not showing in Azure

StackOverflow https://stackoverflow.com/questions/21663623

  •  09-10-2022
  •  | 
  •  

Question

On my azure website, the favicon isn't showing, I have no idea why, neither Firefox nor IE even make the request.

Here is the <head>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="/Content/css?v=KcWjsA8hMEvvHcL_bYEPEoG0A-OODc2YpGMSuUcMS1Q1" rel="stylesheet">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
    <title>Home Page</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="/favicon.ico" rel="icon" type="image/x-icon">
    <style>
        body {
            padding-top: 100px;
        }

        .panel-collapse .list-group, .panel-collapse table {
            margin-bottom: 0px;
        }

            .panel-collapse .list-group .list-group-item, .panel-collapse table {
                border-left-width: 0px;
                border-right-width: 0px;
                border-radius: 0px;
            }
    </style>
    <script src="/bundles/jquery?v=2TxMtt-lnTmLSAxnR9jQkYHXAQpzj1jZXuFx38ICKHI1"></script>
    <script src="/bundles/chart?v=RDY0V8MKoRiSJgIq0Eb3kDG9qdRbC0bPh1pX3N8dtgw1"></script>
    <script src="/bundles/jqueryval?v=MI52k3GVwo4iEFMxCmNMo-z5BMWz4TVU873nXvEhQCc1"></script>
    <script src="/bundles/bootstrap?v=T3CL0nYmq80T-ZKnpoRhlfJVN4KGci-c-EnIHtG1wJc1"></script>
    <script src="/bundles/modernizr?v=JzM3NpF6dEbkVLIcHRi2kCqk7ZCwBA_bFE26szW8brc1"></script>
    <script src="/bundles/showdown?v=c23WszM8ePO8oaeidWJ9xGjaKHuSckDAdZ3qm-K0C-c1"></script>
</head>

No correct solution

OTHER TIPS

The HTML looks right to me. I've seen browsers stubbornly cache the favicon. You may have luck trying something like this where there is a ?v=1 added:

<link href="/favicon.ico?v=1" rel="shortcut icon" type="image/x-icon">

You are missing the end slash from the tag.

Personally I use

<link rel="icon" type="image/png" href="images/icon.png" />

and it works just fine.

Seems like Azure is populating the /favicon.ico with its own image. If you put the image in another folder (or rename it), it seems to fix the problem. For example: images/favicon.ico, as seen in the example from @Sopuli.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top