1

I'm getting a console error in my cordova app (and hence a white screen) because somewhere it's looking its looking for favicon.ico and it's throwing a 404. I have no idea why because I haven't referenced that anywhere in the html or css files.

* {
    -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>

The favicon isn't referenced anywhere in my angular js files as well.

This is the console error I see:

enter image description here

Raihan Iqbal
  • 407
  • 3
  • 16

3 Answers3

3

Just add the following line to the section of your HTML file:

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

Ref: How to prevent favicon.ico requests?

Alessandro Garcia
  • 198
  • 1
  • 6
1

As stated here:

"Many web browsers have a facility where, if someone bookmarks your website (ie puts it in their "Favorites" menu), it associates a particular icon with your website in the bookmark. It tries to obtain that icon by first requesting for "favicon.ico" from the directory of your web page. If it cannot find such a file, it will try to obtain it from the root directory of your website, failing which, it will simply use a default icon for the bookmark."

garry man
  • 445
  • 4
  • 14
0

Just in case someone bumps into this post with a similar issue, here's what you need to do resolve the following problems.

Initially, this post led me to think it was the missing favicon causing the white screen. Try and resolve all JS console errors and see if that gets rid of the white screen.

However, in my case even after getting rid of that error I was still getting the white screen. Upon doing some digging I found this issue which advises to increase the delay of the splash screen when compiling in debug mode.

Raihan Iqbal
  • 407
  • 3
  • 16