Why do I see the default terminal icon when I'm setting my own? (OS X)

[lipis]

This happens on OS X (didn't test other platforms) when I'm not have the icon option:

and when I have it:

Am I missing something? How could I get rid of the terminal icon next to the title?

  notifier.notify({
    title: 'Title',
    message: 'Hello, world!',
    icon: 'path/to/image.png,
  }, function(error, response) {
    console.log('error', response);
  });

[adrienaggery]

Same issue here.
Haven't found any solutions

[mikaelbr]

No, I'm afraid that's how the notification work, as it's the terminal that initiates the message. The only way to avoid this is to use your custom terminal-notifier where the Terminal icon is swapped for your own. It's not a big task, and you can easily set customPath for notification center reporter.

[kurisubrooks]

This happens because of the way notifications in macOS work. The notification shows the referring app's icon, and as we're using terminal-notifier to push notifications for macOS, we have the icon of terminal-notifier.

To work around this, you'll need to compile terminal-notifier with your own app.icns. Download the source, change out the AppIcon bundle with your own in Xcode, recompile terminal-notifier and pop it into node-notifier. (/node-notifier/vendor/terminal-notifier.app)

Now that you have your own terminal-notifier inside node-notifier, remove all the icon references from your OS X Notification Center code, and run the notification as if it has no icon. If the old app icon is showing in your notifications, you need to clear your local icon cache. (Google how to do this)

If you have any questions, feel free to ping me 🙂 ~

[lipis]

Thanks @kurisubrooks but I won't try it at the moment, since that wasn't urgent and it looks like it's not that straight forward. The Notifications API works nicely on OSX so I'll rely on this one now..

[zimo888]

@georgebgk
Navigate to node_modules/node-notifier/vendor
Rename your custom icon into Terminal.icns
Right-click terminal-notifier file and click Show Package Contents
Navigate to Contents/Resources
Replace Terminal.icns file with your own
Open terminal-notifier/Contents/Info.plist

The most important things are the next two steps.
Change the build version to anything.
Change the bundle identifier to anything.

[averissimo]

If you are running a packaged electron app, you need to have the CFBundleIdentifier value in the Info.plist equal to the sender property when calling notifiy

we just experienced this when building the OSX app with yakyak. they didn't match and the terminal started appearing.

[mbushpilot2b]

Here is a step by step:

1. Clone or download https://github.com/mikaelbr/terminal-notifier

2. download xcode

3. delete Terminal.icns inside of terminal-notifier folder (empty trash too.)

4. drag in your apps .icns inside of terminal-notifier folder. (dont know how to make a .icns? Use .png to .icns converter: https://iconverticons.com/online/)

5. open Xcode project file inside terminal-notifier folder

6. change Bundle identifier: nl.superalloy.oss.${DIAMOND:rfc1034identifier} to nl.superalloy.oss.${WHATEVERYOURAPPNAMEIS:rfc1034identifier} my app name happened to be diamond.
   

7. also for good measure i changed the bundle and bundle version to random numbers of my choosing.

8. this is the magic: change iconfile to the NAME of the .icns that you included in the terminal-notifier folder in step 4.

9. Now CLEAN the project before building. Cmd + Shift + K

10. then build Cmd + Shift + B

11. to find the built app in xcode right-click on:
    
    and select "Show In Finder"

12. copy that to replace your old terminal-notifier.app in your project folder which should be inside of your yourProjectName/node_modules/node-notifier/vendor/terminal-notifier.app

13. you can check to see if the new icon works by double clicking on the terminal-notifier.app and a notification should show up with your new icon!

THEN you have to USE the custom path when calling for a notification in electron so it uses your version and not OSX's.
14. copy path to new app:

should look something like this: /Users/yourcomputeraccountname/Desktop/nameofyourelectronappfolder/node_modules/node-notifier/vendor/terminal-notifier.app/Contents/MacOS/terminal-notifier

15. then anywhere you want to create a notification set the "custom path" to that path above^
    

16. If you want to change the name of the app that the notification comes from, from terminal-notifier to yourAppName, then just change the name of the project here:
    
    And the target name here:
    
    that should do it if not go crazy changing anything that says app name anywhere from terminal-notifier to yourAppName, also change name of the (manage schemes) (search in help bar of xcode)

[fritx]

Another quick solution here (inspired by @mbushpilot2b):

1. install node-notifier normally

   npm install node-notifier
   

2. hack assets of terminal-notifier

   cd node_modules/node-notifier/vendor
   cd terminal-notifier.app/Contents
   sed -i -- 's/terminal-notifier/genius-notifier/g' Info.plist  # replace identifiers
   sed -i -- 's/Terminal/Genius/g' Info.plist  # replace icon
   rm Resources/Terminal.icns  # remove the original icon
   cp my/resource/Genius.icns Resources/Genius.icns  # replaced by our own icon
   

[tolgaergin]

hey @fritx Thanks for quick solution.
Is there any missing step left? After I did what you wrote, I can't see any notification but the listeners such as timeout is working.

[fritx]

@tolgaergin hey, did you replace the icns with an existing one of your own?

[gbougakov]

These instruction are horrible, please see this

Here's a quick guide how to do it. (If you don't have an ICNS file, here's a converter)

1. Navigate to node_modules/node-notifier/vendor
2. Rename your custom icon into Terminal.icns
3. Right-click terminal-notifier file and click Show Package Contents
4. Navigate to Contents/Resources
5. Replace Terminal.icns file with your own
   

Here you go! Hope this helps.

[fritx]

@georgebgk oops, I don't think it is a good idea to replace Terminal.icns directly,
without replacing identifiers in plist mentioned at #71 (comment).

It seems that would cause other apps on your computer, which are using node-terminal as well, to show the replaced icon, not the original one. That would be confusing.

[gbougakov]

@fritx You are incorrect. I replace Terminal.icns only in my project. It does not affect others, I tested

[yourfavorite]

@georgebgk I tried your method and my electron app still shows the terminal icon. Is there some cache clean command I need to run?

I tried this: https://gist.github.com/fabiofl/5873100 but it didn't fix the issue. I'm pretty sure I have placed the icon correctly but there might be an issue as get info on terminal-notifier.app shows the correct icon but notice the titlebar still has the terminal icon:

[rien333]

My personal solution is to create an application with a fully transparent icon, and call it's sender ID with -sender flag.

[djalmaaraujo]

@rien333 can u show some code?

[rien333]

idk, nothing too fancy: terminal-notifier -message 'hi' -title "$(date +"%H:%M")" -appIcon img.jpg -sender 'rw.EmptyApp' The actual important part is creating an app with the bundle identifier 'rw.emptyApp' (or any bundle ID of your choosing) with for example Xcode. Google can surely show you how. As said, this app should have a fully transparent icon so it will not show up in the notification (only as whitespace I guess) I think some of the spacing is off due to the whitespace tho somewhere (the title field maybe?) but it does avoid the icon.

[code-with-sam]

For anyone who finds their way to this issue. I found this script from 'vitorgalvao/tiny-scripts' which had since been removed from the repo. I brought it back to life incase it can help anyone else here.

https://github.com/code-with-sam/customise-terminal-notifier

[damianobarbati]

Oh no! Did anybody find a solution to this?

Having to create a window+renderer just to show a notification is crazy :\

[gbougakov]

Just customize terminal-notifier icns file.
https://github.com/mikaelbr/node-notifier/blob/master/vendor/terminal-notifier.app/Contents/Resources/Terminal.icns

[laxmikanta415]

This solved my problem and you only need to have your icns file ready:

run this command in terminal after downloading :customise-terminal-notifier

** path/customise-terminal-notifier-master/customise-terminal-notifier -i path/Terminal.icns -b com.bundle.identifier

[Ivorfason]

It worked with custom icon.... But the click event doesn't response....

[Aarbel]

Do anyone has a solution to use thru electron and electron-builder ?

Changing directly the files in node modules isn't really a stable solution

[gbougakov]

Rebuild terminal-notifier, point node-notifier to rebuilt binary.

[Aarbel]

@gbougakov do you have more details ? I saw your post: #71 (comment) ;)

We don't want to make this procedure each time we install our node_modules.

Thanks a lot for your help !

[gbougakov]

@Aarbel Sorry for that post. It is horrible, has a lot of caveats, do not follow it.

node-notifier uses terminal-notifier under the hood to send notifications on macOS.

First, clone the terminal-notifier repo, open the Xcode project, replace Terminal.icns and rebuild the project. Under Products you'll find terminal-notifier.app, copy it to your project directory.

When initialising NotificationCenter, specify path to terminal-notifier.app like so:

const notifier = new NotificationCenter({
  customPath: 'path/to/terminal-notifier.app'
})

That's it!

[Aarbel]

@gbougakov

Did you faced this error ?

[BluFenix00]

i could change the icon but the click is not working, and i can't se extra buttons

[BluFenix00]

@Aarbel your path is wrong, inside the terminal-notifier.app is /Contents/MacOS/terminal-notifier

[Aarbel]

@BluFenix00 i just left node-notifer to basic new Notification api of Electron. works like a charm, no extra tricks to do during hours :)

[Aarbel]

About click event i've made this PR to provide a slightly better doc : https://github.com/mikaelbr/node-notifier/pull/274/files

[BluFenix00]

i could resolve all my problems but when i install my app in another computer the icon look with a forbidden icon overriding it, but in my computer it look fine.

[Aarbel]

With node-notifier ?
If you continue to face problems with this library, just use the standard api inside Electron renderer process, and without any library: https://developer.mozilla.org/en-US/docs/Web/API/notification

[BluFenix00]

the problem was the version of terminal-notifier, if you want to try the process of replace the icon with xcode, make sure that you are working on terminal-notifier 1.7.2

[zquancai]

With node-notifier ?
If you continue to face problems with this library, just use the standard api inside Electron renderer process, and without any library: https://developer.mozilla.org/en-US/docs/Web/API/notification

It has a question that the notification can't show a close button when try to hover it. like below:

must meet the following criteria:
https://electronjs.org/docs/api/structures/notification-action#button-support-on-macos

[ghost]

Anyone using electron builder and node-notifier and still facing this issue, here are quick easy solutions below, works on both win 10.0.17134 and macOS Version: 10.15.4

In your electron main process:

import notifier from 'node-notifier';

notifier.notify({
      sound: true,
      title: 'My Title',
      message: 'My Message in body',
      icon: 'My Absolute path to icon (after app has been built',
      contentImage: 'My Absolute path to icon (after app has been built',
      appID: 'MyApp',
})

You also need to configure electron builder build config as below:

asarUnpack: ['node_modules/node-notifier/vendor/'],
extraResources: [
 {
   from: 'src/relative/path/to/directory/with a "Terminal.icns" file',
   to: 'app.asar.unpacked/node_modules/node-notifier/vendor/mac.noindex/terminal-notifier.app/Contents/Resources',
   filter: ['*.icns'],
 },
],

[mayeaux]

@georgebgk
Navigate to node_modules/node-notifier/vendor
Rename your custom icon into Terminal.icns
Right-click terminal-notifier file and click Show Package Contents
Navigate to Contents/Resources
Replace Terminal.icns file with your own
Open terminal-notifier/Contents/Info.plist

The most important things are the next two steps.
Change the build version to anything.
Change the bundle identifier to anything.

Worked for me thanks.

For reference, the two keys you have to change are
<key>CFBundleIdentifier</key>
<key>CFBundleVersion</key>

[CobbleShop]

I read every comment on this. So, it seems like we can't just dynamically use a custom icon, right? I'm using this on a minecraft-project which should send me their custom player-heads, which i download via "request"-module in advance.

So, now big hope on getting custom icons to work with this, right? :/