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

Question

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

lipis opened this issue 9 years ago · 38 comments

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);
  });

Answer 1 · 2015-10-09T09:17:23.000Z

Same issue here.
Haven't found any solutions

Answer 2 · 2015-10-09T10:11:43.000Z

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.

Answer 3 · 2015-10-11T15:20:49.000Z

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 🙂 ~

Answer 4 · 2015-10-14T11:12:06.000Z

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..

Answer 5 · 2016-08-24T02:45:11.000Z

@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.

Answer 6 · 2016-12-01T21:03:04.000Z

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.

Answer 7 · 2017-02-20T18:10:59.000Z

Here is a step by step:

Clone or download https://github.com/mikaelbr/terminal-notifier
download xcode
delete Terminal.icns inside of terminal-notifier folder (empty trash too.)
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/)
open Xcode project file inside terminal-notifier folder
change Bundle identifier: nl.superalloy.oss.${DIAMOND:rfc1034identifier} to nl.superalloy.oss.${WHATEVERYOURAPPNAMEIS:rfc1034identifier} my app name happened to be diamond.
also for good measure i changed the bundle and bundle version to random numbers of my choosing.
this is the magic: change iconfile to the NAME of the .icns that you included in the terminal-notifier folder in step 4.
Now CLEAN the project before building. Cmd + Shift + K
then build Cmd + Shift + B
to find the built app in xcode right-click on:

and select "Show In Finder"
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
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

then anywhere you want to create a notification set the "custom path" to that path above^
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)

Answer 8 · 2017-03-24T10:59:39.000Z

Another quick solution here (inspired by @mbushpilot2b):

install node-notifier normally
```
npm install node-notifier
```

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

Answer 9 · 2017-03-26T22:11:20.000Z

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.

Answer 10 · 2017-05-23T17:04:31.000Z

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

Answer 11 · 2017-05-25T16:38:30.000Z

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)

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

Here you go! Hope this helps.

Answer 12 · 2017-05-26T05:29:11.000Z

@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.

Answer 13 · 2017-05-26T08:46:13.000Z

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

Answer 14 · 2017-08-08T06:22:39.000Z

@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:

Answer 15 · 2017-11-18T00:20:08.000Z

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

Answer 16 · 2017-12-05T18:51:30.000Z

@rien333 can u show some code?

Answer 17 · 2017-12-05T23:41:04.000Z

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.

Answer 18 · 2018-01-04T19:46:07.000Z

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

Answer 19 · 2018-05-28T14:53:27.000Z

Oh no! Did anybody find a solution to this?

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

Answer 20 · 2018-05-31T19:07:54.000Z

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

Answer 21 · 2018-06-13T07:53:27.000Z

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

Answer 22 · 2019-04-03T11:43:02.000Z

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

Answer 23 · 2019-04-14T12:55:29.000Z

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

Answer 24 · 2019-04-14T15:25:40.000Z

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

Answer 25 · 2019-04-14T15:50:57.000Z

@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 !

Answer 26 · 2019-04-14T16:16:02.000Z

@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!

Answer 27 · 2019-04-14T17:13:58.000Z

@gbougakov

Did you faced this error ?

Answer 28 · 2019-04-15T20:31:55.000Z

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

Answer 29 · 2019-04-15T20:34:33.000Z

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

Answer 30 · 2019-04-15T21:06:35.000Z

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

Answer 31 · 2019-04-15T21:08:42.000Z

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

Answer 32 · 2019-04-15T21:48:24.000Z

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.

Answer 33 · 2019-04-15T22:02:29.000Z

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

Answer 34 · 2019-04-17T19:42:25.000Z

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

Answer 35 · 2019-12-18T03:31:47.000Z

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

Answer 36 · 2020-05-11T13:29:34.000Z

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'],
 },
],

Answer 37 · 2021-09-07T08:42:27.000Z

@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>

Answer 38 · 2022-03-09T18:32:38.000Z

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? :/