Cordova 应用程序正在寻找未知的 favicon.ico答案

【问题标题】：Cordova app looking for unknown favicon.icoCordova 应用程序正在寻找未知的 favicon.ico
【发布时间】：2019-08-04 02:38:53
【问题描述】：

我在我的 cordova 应用程序 (and hence a white screen) 中遇到控制台错误，因为它在某处寻找 favicon.ico 并抛出 404。我不知道为什么，因为我没有在任何地方引用它html 或 css 文件。

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    background-color: #36774F !important;
    color: #FFF !important;
    font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 100%;
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
    width: 100%;
    font-family: 'RobotoRegular', 'Droid Sans', 'Segoe UI', Segoe, 'San Francisco', 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
    font-size: 12px;
}

.app {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 225px;
    text-align: center;
    padding: 180px 0px 0px 0px;
    margin: -115px 0px 0px -112px;
}

@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position: left center;
        padding: 75px 0px 75px 170px;
        margin: -90px 0px 0px -198px;
    }
}

.event {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #FFFFFF;
    font-size: 12px;
    margin: 0px 30px;
    padding: 2px 0px;
}

    .event.listening {
        background-color: #333333;
        display: block;
    }

    .event.received {
        background-color: #4B946A;
        display: none;
    }

@keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

.blink {
    animation: fade 3000ms infinite;
    -webkit-animation: fade 3000ms infinite;
}

body {
    background-color: #36774f;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.left-column {
    background-color: #285d3c;
}

table.timetable {
    background-color: #285d3c;
    background-size: cover;
}

.header {
    background: transparent url(../images/header-bg.jpg) no-repeat center center;
    background-size: cover;
    margin-left: 0px;
    max-width: 100%;
    height: 73px
}

img.logo{
    width: 85px;
}

marquee.moving-text {
    background-color: #285d3c;
}

a.nav-link {
    color: white;
}

a.nav-link.show {
    color: black;
}

.table.month-view tr th
{
    min-width: 65px;
}

.copyright{
    text-align: center;
    font-size: 8px;
}

.salah-header {
    font-size: 1.1rem;
    text-align: center;
}

<!DOCTYPE html>
<html ng-app="mia">
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/color_green.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <title>MIA</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="scripts/bootstrap.js"></script>
    <script type="text/javascript" src="scripts/moment-with-locales.js"></script>
    <script type="text/javascript" src="scripts/angular.min.js"></script>
    <script type="text/javascript" src="scripts/angular-animate.min.js"></script>
    <script type="text/javascript" src="scripts/angular-resource.min.js"></script>
    <script type="text/javascript" src="scripts/angular-route.min.js"></script>
    <script type="text/javascript" src="scripts/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="scripts/angular-touch.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
    <!--- Controllers --->
    <script type="text/javascript" src="scripts/controllers/index.controller.js"></script>
</head>

<body class="body-section" ng-cloak>
    <div class="container-fluid" ng-controller="IndexController as vm">
        <div class="row" style="background: transparent url('images/header-bg.jpg') no-repeat center center; background-size: cover; margin-left: 0px; max-width: 100%; height: 73px">
            <div class="col-md-12">
                <img src="images/logo.png" class="logo img-fluid" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <img src="images/musallah_cover.jpg" class="img-fluid" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Today</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Tomorrow</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Month</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        
                        
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 copyright">
                Copyright &copy; All rights reserved. 
            </div>
        </div>
    </div>
</body>

</html>

我的 Angular js 文件中的任何地方都没有引用该网站图标。

这是我看到的控制台错误：

【问题讨论】：

标签： javascript android html css cordova

【解决方案1】：

只需将以下行添加到 HTML 文件的部分：

<link rel="icon" href="data:,">

参考：How to prevent favicon.ico requests?

【讨论】：

谢谢。这摆脱了网站图标错误，但在启动画面后我仍然看到白页:(

【解决方案2】：

如here所述：

"许多网络浏览器都有一个功能，如果有人为您的网站添加书签（即，将其放入“收藏夹”菜单中），它会将特定图标与书签中的您的网站相关联。它会尝试获取该图标首先从您的网页目录中请求“favicon.ico”。如果找不到这样的文件，它将尝试从您网站的root目录中获取它，如果失败，它会将简单地使用书签的默认图标。"

【讨论】：

【解决方案3】：

以防万一有人遇到类似问题的帖子，您需要解决以下问题。

最初，this 的帖子让我认为是丢失的图标导致白屏。尝试解决所有 JS 控制台错误，看看是否可以消除白屏。

但是，就我而言，即使在消除了该错误之后，我仍然会出现白屏。在进行一些挖掘后，我发现了this 问题，该问题建议在调试模式下编译时增加启动画面的延迟。

【讨论】：