Unabled to specify the notification icon

[gtribut]

I'm trying to set the little withe notification icon on Android (test on nexus 5 android 6.0.1), in the doc you specify to put a file named 'fcm_push_icon.png' in the res folder.

I did it, even try to put it in 'res/icon' or in 'res/icon/android' but icon of the notification in statusbar stay the app icon not my file 'fcm_push_icon.png'. I even try to set different sizes with names 'fcm_push_icon_ldpi.png' .... 'fcm_push_icon-xhdpi.png'.

Is there something to specify elsewhere ? In config.xml ?
I have tried to had a node but it doesn't work.

In my server call, i have the node

"notification" => array(
    "title" => $title,  //Any value 
    "body" => $message,  //Any value 
    "sound" => "default", //If you want notification sound 
    "click_action" => "FCM_PLUGIN_ACTIVITY",  //Must be present for Android 
    "icon" => "fcm_push_icon"  //White icon Android resource 
),

I'm sure i forgot to specify something somewhere (I'm pretty new to phonegap dev...) but I didn't find where :)

Last question, which is the size of this icon file ?

[maxlam79]

@gtribut, in order for the icon to be visible, you have to place fcm_push_icon.png of various sizes into the below folders of the res/ folder
drawable-hdpi
drawable-land-hdpi
drawable-land-ldpi
drawable-land-mdpi
drawable-land-xhdpi
drawable-land-xxhdpi
drawable-land-xxxhdpi
drawable-ldpi
drawable-mdpi
drawable-port-hdpi
drawable-port-ldpi
drawable-port-mdpi
drawable-port-xhdpi
drawable-port-xxhdpi
drawable-port-xxxhdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

You may always use this tool at: Android Asset Studio to generate the fcm_push_icon of various sizes.

Hope this helps.

[gtribut]

Thanks, that's it !

[verissimomanoel]

I have the same problem, when I receive notification the icon is blank. I tried the solution above, but doesn't works.
When I tried send parameter icon to change default icon, doesn't work again.
Any help?

[gtribut]

Here how I did it :

• generate a png transparent file (I did it in 1024*1024px) for your white icon which will be displayed in the status bar
• upload it in the Android Notification Icon Generator
• use : image / don't trim / padding: 0% / name: fcm_push_icon / API 11 and then click download
• axtract the archive, copy the archive's icon files from the directories "drawable-xxx-v11" into the the correspondant directories in "[your_project]\platforms\android\res\drawabale-xxx"

That's it for the icon files.

---

In your backend code (here php), to send the notifiaction :

$to = 'all';
/*
List of fcm token
$to = array(
    'XXXXXXXXXXX:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'YYYYYYYYYYY:YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY',
    'ZZZZZZZZZZZ:ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ'
);
*/

$url = 'https://fcm.googleapis.com/fcm/send';
$headers = array(
    'Authorization:key = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'Content-Type: application/json'
);
$fields = array(
    "notification" => array(
        "title" => $title,  //Any value 
        "body" => $message,  //Any value 
        "sound" => "default", //If you want notification sound 
        "click_action" => "FCM_PLUGIN_ACTIVITY",  //Must be present for Android 
        "icon" => "fcm_push_icon"  //White icon Android resource 
    ),
    "data" => $data,  //Any data to be retrieved in the notification callback 
    "priority" => "high", //If not set, notification won't be delivered on completely closed iOS app 
    "restricted_package_name" => "" //Optional. Set for application filtering 
);

if($to !== 'all') {
    $fields["registration_ids"] = $to;  //list of devices (registration tokens, or IDs)
}else{
    $fields["to"] = '/topics/all';
}

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);  
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
$result = curl_exec($ch);           
if ($result === FALSE) {
    die('Curl failed: ' . curl_error($ch));
}
curl_close($ch);

$result = json_decode($result);
// clean invalid token in your database
if($result->failure > 0) {
    for($i = 0; $i < count($result->results); $i++) {
        if(isset($result->results[$i]->error)) {
            echo 'delete Token : '.$tokens[$i]."\n";
        }
    }
}

[nitin7dc]

@gtribut thanks

[camden-kid]

@gtribut That was very helpful.

The instructions in the README are slightly misleading. It seems to say that you should put fcm_push_icon.png in project/www/res when in fact it should be put in the folders in project/platforms/android/res, for example drawable-hdpi.

[ahmedmohyeldean]

notification appear alert with me .. How can i appear it in notification bar ?

[cikcoh]

hi @wargun02
i have tried including fcm_push_icon.png in all drawable folders but it still uses ionic default icon.

Do you have any idea why this is happening?

Thanks.

[fabienlege]

same problem, impossible to set the fcm_push_icon.png any idea ?

[jffs]

same here

[cikcoh]

@fabienlege @jffs i'm no longer using this plugin, using phonegap-plugin-push

[fabienlege]

I've also moved to another service. I work with https://onesignal.com/ who's also free and work very well with iOS and Android on many framework

[Radecom]

I solved it by following this article.
And I'm still working with Cordova plugin Fcm
And so far everything is going well

[devner007]

I am using the FCM plugin and here is what worked for me (September 2019):

1. In config.xml (yourapp/config.xml)
   Add the following to the <widget id=""...> tag at the end
   xmlns:android="http://schemas.android.com/apk/res/android"

It should look something like this now:

<widget id="com.mydomain.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

Or simply, copy the above line, replace the value of widget id, with your own.

2. In the same config.xml file:
   Just before the tag corresponding to , add this:

<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
            <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
</config-file>

3. Visit the following link:
   Notification Icon Generator

Upload a White version (single color) of your logo on a Transparent background. If you upload a colored version, you will get a dark gray icon, which would look nasty. If you don't have a white version of your logo, get it designed. Leave the rest of the settings as they are. For the Name textbox value, enter: fcm_push_icon. Then click on the Blue colored round shaped button to download the zip file.

4. Unzip the zip file that you just downloaded it the above step and extract its contents to a folder. You will notice that it contains a res folder. If you open this folder, it will contain other folders with the following names:

• drawable-hdpi
• drawable-mdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-xxxhdpi

Each of those folders will contain a PNG icon by the name "fcm_push_icon.png". The only difference between the icons in those different folders is their size.

5. Open the following file path in your app (If it doesn't exist, create it as shown below):

yourApp/platforms/android/app/src/main/res

Simply copy all the 5 folders listed in in the point 4 above, to the location shown just above i.e. into the res folder i.e. into yourApp/platforms/android/app/src/main/res

That's it! Now just build your app. Whenever you receive a notification, you will see your app icon in the notifications (at least on Android).

If anyone has figured out how to make colored icons appear in the Android notifications, please share your solution.