Web notification icon is blank


I managed to show notification. Here is my code:

function notifyMe(noteMsg) {
var noteTitle = “Status”;
var opts = {
body: noteMsg,
icon: “icons/alert.ico”

if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification(noteTitle, opts);
} else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
        if (permission === "granted") {
            var notification = new Notification(noteTitle, opts);


The problem is I cannot see the icon in notification.


I tried 32x32 icon file, and also small png file (as using as the addon’s icon).

But the position for icon is kept, but the content is blank.

Any suggestion will be appreciated.

If this is an extension, you’ll likely want to use the https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications API. If you absolutely want to stick by the web notification API, you will have to at least use browser.runtime.getURL to get the full URL to the icon and possibly even mark it as web_accessible_resource.