Does Cordova require favicon.ico?

anders.borg · January 10, 2023, 12:07pm

I get “Failed to load resource: net::ERR_CONNECTION_REFUSED favicon.ico:1”

I wonder why? Hasn’t happened before. My code doesn’t refer to favicon.ico.

The app doesn’t start either, possibly due to this, and without errors on a JavaScript level (chrome://inspect).

This is a new build of code that worked a week ago. The only thing I changed was to support Android 12, with consequences in config.xml:

        <preference name="android-targetSdkVersion" value="31"/>
        <preference name="android-compileSdkVersion" value="32" />
 
        <preference name="AndroidWindowSplashScreenAnimatedIcon" value="www/res/screen/android/splash-square.png" />
        <preference name="AndroidWindowSplashScreenBackground" value="#000000" />

All the plugins I use:

    <plugin name="cordova-plugin-device"/>
    <plugin name="cordova-plugin-statusbar"/>
    <plugin name="cordova-plugin-dialogs"/>
    <plugin name="cordova-plugin-globalization"/>
    <plugin name="cordova-plugin-inappbrowser"/>
    <plugin name="cordova-plugin-x-toast"/>
    <plugin name="phonegap-plugin-barcodescanner-android12"/>
    <plugin name="cordova-plugin-x-socialsharing-android12"/>
    <plugin name="cordova-plugin-tts-advanced"/>
    <plugin name="cordova-plugin-speechrecognition"/>

I also removed whitelist, splashscreen and an old gradle plugin just in case.

Any ideas?

I will make further attempts during the day.

Cheers.

config.xml with some redactions:

<?xml version="1.0" encoding="UTF-8"?>
<widget
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:gap="http://phonegap.com/ns/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="XXXXXXXX"
    version="0.01"
    android-versionCode="001"
    ios-CFBundleVersion="001"
>

    <!-- App information -->
    <name>XXXXXXXX</name>
    <description>XXXXXXXX</description>
    <author email="XXXXXXXX" href="XXXXXXXX">XXXXXXXX</author>

    <!-- General -->
    <access origin="*"/>
    <allow-navigation href="*"/>
    <content src="index.html"/>

    <preference name="permissions" value="none"/>
    <preference name="orientation" value="portrait"/>
    <preference name="fullscreen" value="false"/>

    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />

    <preference name="StatusBarOverlaysWebView" value="false"/>
    <preference name="StatusBarBackgroundColor" value="#ffffff"/>
    <preference name="StatusBarStyle" value="default"/>

    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="SplashScreenDelay" value="2000" />
    <preference name="FadeSplashScreenDuration" value="750"/>
    <preference name="ShowSplashScreenSpinner" value="false"/>

    <icon src="www/icon.png"/>
    <splash src="www/splash.png"/>

    <!-- iOS -->
    <platform name="ios">
        <edit-config file="*-Info.plist" target="NSCameraUsageDescription" mode="merge">
            <string>Appen behöver åtkomst till kameran för att kunna läsa streckkoder. The app needs access to the camera to be able to read barcodes.</string>
        </edit-config>

        <preference name="deployment-target" value="11.0"/>
        <preference name="target-device" value="universal"/>
        <preference name="prerendered-icon" value="false"/>
        <preference name="EnableViewportScale" value="false"/>
        <preference name="detect-data-types" value="true"/>
        <preference name="exit-on-suspend" value="false"/>
        <preference name="AllowInlineMediaPlayback" value="true"/>
        <preference name="DisallowOverscroll" value="true"/>

        <preference name="WKWebViewOnly" value="true" />

        <feature name="CDVWKWebViewEngine">
            <param name="ios-package" value="CDVWKWebViewEngine" />
        </feature>

        <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

        <icon src="www/res/icon/ios/icon-1024.png" width="1024" height="1024"/>
        <icon src="www/res/icon/ios/icon-small.png" width="29" height="29"/>
        <icon src="www/res/icon/ios/icon-small@2x.png" width="58" height="58"/>
        <icon src="www/res/icon/ios/icon-small@3x.png" width="87" height="87"/>
        <icon src="www/res/icon/ios/icon-40.png" width="40" height="40"/>
        <icon src="www/res/icon/ios/icon-40@2x.png" width="80" height="80"/>
        <icon src="www/res/icon/ios/icon-50.png" width="50" height="50"/>
        <icon src="www/res/icon/ios/icon-50@2x.png" width="100" height="100"/>
        <icon src="www/res/icon/ios/icon.png" width="57" height="57"/>
        <icon src="www/res/icon/ios/icon@2x.png" width="114" height="114"/>
        <icon src="www/res/icon/ios/icon-60.png" width="60" height="60"/>
        <icon src="www/res/icon/ios/icon-60@2x.png" width="120" height="120"/>
        <icon src="www/res/icon/ios/icon-60@3x.png" width="180" height="180"/>
        <icon src="www/res/icon/ios/icon-72.png" width="72" height="72"/>
        <icon src="www/res/icon/ios/icon-72@2x.png" width="144" height="144"/>
        <icon src="www/res/icon/ios/icon-76.png" width="76" height="76"/>
        <icon src="www/res/icon/ios/icon-76@2x.png" width="152" height="152"/>
        <icon src="www/res/icon/ios/icon-167.png" width="167" height="167"/>
        <icon src="www/res/icon/ios/icon-83.5@2x.png" width="167" height="167"/>

        <splash src="www/res/screen/ios/Default@2x~iphone~anyany.png"/>
        <splash src="www/res/screen/ios/Default@2x~iphone~comany.png"/>
        <splash src="www/res/screen/ios/Default@3x~iphone~anyany.png"/>
        <splash src="www/res/screen/ios/Default@3x~iphone~comany.png"/>
        <splash src="www/res/screen/ios/Default@2x~ipad~anyany.png"/>
        <splash src="www/res/screen/ios/Default@2x~ipad~comany.png"/>
    </platform>

    <!-- Android -->
    <platform name="android">
        <preference name="android-minSdkVersion" value="22"/>
        <preference name="android-targetSdkVersion" value="31"/>
        <preference name="android-compileSdkVersion" value="32" />
        <preference name="android-installLocation" value="auto"/>
        <preference name="SplashMaintainAspectRatio" value="true"/>
        <preference name="SplashShowOnlyFirstTime" value="true"/>
        <preference name="AndroidXEnabled" value="true"/>
        <preference name="AndroidWindowSplashScreenAnimatedIcon" value="www/res/screen/android/splash-square.png" />
        <preference name="AndroidWindowSplashScreenBackground" value="#000000" />

        <icon density="ldpi" src="www/res/icon/android/ldpi.png"/>
        <icon density="mdpi" src="www/res/icon/android/mdpi.png"/>
        <icon density="hdpi" src="www/res/icon/android/hdpi.png"/>
        <icon density="xhdpi" src="www/res/icon/android/xhdpi.png"/>
        <icon density="xxhdpi" src="www/res/icon/android/xxhdpi.png"/>
        <icon density="xxxhdpi" src="www/res/icon/android/xxxhdpi.png"/>

        <splash density="port-ldpi" src="www/res/screen/android/splash-port-ldpi.png"/>
        <splash density="port-mdpi" src="www/res/screen/android/splash-port-mdpi.png"/>
        <splash density="port-hdpi" src="www/res/screen/android/splash-port-hdpi.png"/>
        <splash density="port-xhdpi" src="www/res/screen/android/splash-port-xhdpi.png"/>
        <splash density="port-xxhdpi" src="www/res/screen/android/splash-port-xxhdpi.png"/>
        <splash density="port-xxxhdpi" src="www/res/screen/android/splash-port-xxxhdpi.png"/>
    </platform>

    <!-- Plugins -->
    <plugin name="cordova-plugin-device"/>
    <plugin name="cordova-plugin-statusbar"/>
    <plugin name="cordova-plugin-dialogs"/>
    <plugin name="cordova-plugin-globalization"/>
    <plugin name="cordova-plugin-inappbrowser"/>
    <plugin name="cordova-plugin-x-toast"/>
    <plugin name="phonegap-plugin-barcodescanner-android12"/>
    <plugin name="cordova-plugin-x-socialsharing-android12"/>
    <plugin name="cordova-plugin-tts-advanced"/>
    <plugin name="cordova-plugin-speechrecognition"/>

</widget>

JeremyWJ · January 10, 2023, 3:50pm

If you don’t specify a favicon in your HTML most browsers (which is what you app runs in) will default to looking for favicon.ico.

To prevent this you can add this line to the head of your HTML:

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

However, this is not going to be the cause of your app not running. There’s a good chance the app crashing is due to a plugin having an issue with android 12. You can disable them one by one to find the culprit.

anders.borg · January 10, 2023, 3:53pm

Thanks, I’ll add it.

It sounds like something Cordova should resolve. I’ve never needed it before.

JeremyWJ · January 10, 2023, 3:55pm

It’s not really a problem and doesn’t cause any issues. The only slight consequence might be a couple milliseconds added to the initial load time.

anders.borg · January 10, 2023, 4:02pm

I needed to break through this to see if it caused the application to not start. Clearly it didn’t contribute to that at all, so the core issue still remains: The screen goes black. Inspect doesn’t show any error. I couldn’t even see anything odd in adb logcat.

Will check other posts to see if anyone has encountered the same issues.

Thanks.

ghenne · January 10, 2023, 4:16pm

@JeremyWJ is correct - the message does not have any runtime consequences and can be ignored.

I assume you’re running a debug build. You may need to add some console.log() calls to trace the execution.

anders.borg · January 10, 2023, 4:26pm

I solved it after reading through the documentation more throroughly. The phone has Android 12.

Added:

        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <application android:exported="true" />
        </edit-config>

        <engine name="android" spec="11.0.0" />

Changed:

        <preference name="android-targetSdkVersion" value="31"/>
        <preference name="android-compileSdkVersion" value="32" />

Maybe 31 works for both. I didn’t verify.

So config.xml is now (without the meta info):

    <!-- General -->
    <access origin="*"/>
    <allow-navigation href="*"/>
    <content src="index.html"/>

    <preference name="permissions" value="none"/>
    <preference name="orientation" value="portrait"/>
    <preference name="fullscreen" value="false"/>

    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />

    <preference name="StatusBarOverlaysWebView" value="false"/>
    <preference name="StatusBarBackgroundColor" value="#ffffff"/>
    <preference name="StatusBarStyle" value="default"/>

    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="SplashScreenDelay" value="2000" />
    <preference name="FadeSplashScreenDuration" value="750"/>
    <preference name="ShowSplashScreenSpinner" value="false"/>

    <icon src="www/icon.png"/>
    <splash src="www/splash.png"/>

    <!-- iOS -->
    <platform name="ios">
        <edit-config file="*-Info.plist" target="NSCameraUsageDescription" mode="merge">
            <string>Appen behöver åtkomst till kameran för att kunna läsa streckkoder. The app needs access to the camera to be able to read barcodes.</string>
        </edit-config>

        <preference name="deployment-target" value="11.0"/>
        <preference name="target-device" value="universal"/>
        <preference name="prerendered-icon" value="false"/>
        <preference name="EnableViewportScale" value="false"/>
        <preference name="detect-data-types" value="true"/>
        <preference name="exit-on-suspend" value="false"/>
        <preference name="AllowInlineMediaPlayback" value="true"/>
        <preference name="DisallowOverscroll" value="true"/>

        <preference name="WKWebViewOnly" value="true" />

        <feature name="CDVWKWebViewEngine">
            <param name="ios-package" value="CDVWKWebViewEngine" />
        </feature>

        <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

        <icon src="www/res/icon/ios/icon-1024.png" width="1024" height="1024"/>
        <icon src="www/res/icon/ios/icon-small.png" width="29" height="29"/>
        <icon src="www/res/icon/ios/icon-small@2x.png" width="58" height="58"/>
        <icon src="www/res/icon/ios/icon-small@3x.png" width="87" height="87"/>
        <icon src="www/res/icon/ios/icon-40.png" width="40" height="40"/>
        <icon src="www/res/icon/ios/icon-40@2x.png" width="80" height="80"/>
        <icon src="www/res/icon/ios/icon-50.png" width="50" height="50"/>
        <icon src="www/res/icon/ios/icon-50@2x.png" width="100" height="100"/>
        <icon src="www/res/icon/ios/icon.png" width="57" height="57"/>
        <icon src="www/res/icon/ios/icon@2x.png" width="114" height="114"/>
        <icon src="www/res/icon/ios/icon-60.png" width="60" height="60"/>
        <icon src="www/res/icon/ios/icon-60@2x.png" width="120" height="120"/>
        <icon src="www/res/icon/ios/icon-60@3x.png" width="180" height="180"/>
        <icon src="www/res/icon/ios/icon-72.png" width="72" height="72"/>
        <icon src="www/res/icon/ios/icon-72@2x.png" width="144" height="144"/>
        <icon src="www/res/icon/ios/icon-76.png" width="76" height="76"/>
        <icon src="www/res/icon/ios/icon-76@2x.png" width="152" height="152"/>
        <icon src="www/res/icon/ios/icon-167.png" width="167" height="167"/>
        <icon src="www/res/icon/ios/icon-83.5@2x.png" width="167" height="167"/>

        <splash src="www/res/screen/ios/Default@2x~iphone~anyany.png"/>
        <splash src="www/res/screen/ios/Default@2x~iphone~comany.png"/>
        <splash src="www/res/screen/ios/Default@3x~iphone~anyany.png"/>
        <splash src="www/res/screen/ios/Default@3x~iphone~comany.png"/>
        <splash src="www/res/screen/ios/Default@2x~ipad~anyany.png"/>
        <splash src="www/res/screen/ios/Default@2x~ipad~comany.png"/>
    </platform>

    <!-- Android -->
    <platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <application android:exported="true" />
        </edit-config>

        <engine name="android" spec="11.0.0" />
        <preference name="android-minSdkVersion" value="22"/>
        <preference name="android-targetSdkVersion" value="31"/>
        <preference name="android-compileSdkVersion" value="32" />
        <preference name="android-installLocation" value="auto"/>
        <preference name="SplashMaintainAspectRatio" value="true"/>
        <preference name="SplashShowOnlyFirstTime" value="true"/>
        <preference name="AndroidXEnabled" value="true"/>
        <preference name="AndroidWindowSplashScreenAnimatedIcon" value="www/res/screen/android/splash-square.png" />
        <preference name="AndroidWindowSplashScreenBackground" value="#000000" />

        <icon density="ldpi" src="www/res/icon/android/ldpi.png"/>
        <icon density="mdpi" src="www/res/icon/android/mdpi.png"/>
        <icon density="hdpi" src="www/res/icon/android/hdpi.png"/>
        <icon density="xhdpi" src="www/res/icon/android/xhdpi.png"/>
        <icon density="xxhdpi" src="www/res/icon/android/xxhdpi.png"/>
        <icon density="xxxhdpi" src="www/res/icon/android/xxxhdpi.png"/>

        <splash density="port-ldpi" src="www/res/screen/android/splash-port-ldpi.png"/>
        <splash density="port-mdpi" src="www/res/screen/android/splash-port-mdpi.png"/>
        <splash density="port-hdpi" src="www/res/screen/android/splash-port-hdpi.png"/>
        <splash density="port-xhdpi" src="www/res/screen/android/splash-port-xhdpi.png"/>
        <splash density="port-xxhdpi" src="www/res/screen/android/splash-port-xxhdpi.png"/>
        <splash density="port-xxxhdpi" src="www/res/screen/android/splash-port-xxxhdpi.png"/>
    </platform>

    <!-- Plugins -->
    <plugin name="cordova-plugin-device"/>
    <plugin name="cordova-plugin-statusbar"/>
    <plugin name="cordova-plugin-dialogs"/>
    <plugin name="cordova-plugin-globalization"/>
    <plugin name="cordova-plugin-inappbrowser"/>
    <plugin name="cordova-plugin-x-toast"/>
    <plugin name="phonegap-plugin-barcodescanner-android12"/>
    <plugin name="cordova-plugin-x-socialsharing-android12"/>
    <plugin name="cordova-plugin-tts-advanced"/>
    <plugin name="cordova-plugin-speechrecognition"/>

</widget>

anders.borg · January 10, 2023, 5:02pm

The splash screen doesn’t show even though I added a 2732x2732 image, but that’s less of a problem.

JeremyWJ · January 10, 2023, 6:01pm

<engine name="android" spec="11.0.0" />
Move that outside of the platform tag (put it right below the “allow-intents”).

<preference name="AutoHideSplashScreen" value="false" /> <preference name="SplashScreenDelay" value="2000" /> <preference name="FadeSplashScreenDuration" value="750"/> <preference name="ShowSplashScreenSpinner" value="false"/>
Get rid of all that

<splash src="www/splash.png"/>
Get rid of that as well

anders.borg · January 10, 2023, 6:06pm

I read that the splash settings would be ignored, but they are gone now.

Thanks.

JeremyWJ · January 10, 2023, 6:14pm

Yes, but why have stuff you don’t need cluttering things up?

anders.borg · January 10, 2023, 6:29pm

That can be argued when trying to get back to square one as quickly as possible without damaging anything (further) on the way. Also, won’t building for iOS need those settings?

In any case the splash screen still doesn’t show. The square image is no doubt there, and I get no error. I will do the adb routine.

The location of the image might be critical. I’ve seen other projects placing the whole res directory at the same level as www rather than under it.

JeremyWJ · January 10, 2023, 6:35pm

Reverting things, and getting back to square one, is why you use source control systems like git.

Generally, resource files, like icons and splash screens, are in a resource/res folder at the top level.