Electron app file association - Custom icon not appearing

Question

I'm trying to get the file icon for my electron app to work properly on mac.

My package.json has:

"fileAssociations": {
  "ext": [ "x" ],
  "name": "X",
  "description": "An x file",
  "icon": "xFile.icns",
  "role": "Editor",
  "isPackage": false
},

And I also have in package.json:

"extend-info": "Info.plist"

which contains:

...<plist version="1.0">
<dict>
  <key>CFBundleDocumentTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeExtensions</key>
      <array>
        <string>sql</string>
      </array>
      <key>CFBundleTypeIconFile</key>
      <string>xFile.icns</string>
      <key>CFBundleTypeName</key>
      <string>X File</string>
      <key>CFBundleTypeOSTypes</key>
      <array>
        <string>X</string>
      </array>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>NSDocumentClass</key>
      <string>SPDocumentController</string>
    </dict>
  </array>
  <key>CFBundleURLTypes</key>
  <array>
  </array>
</dict>
</plist>

After I package it and move it to my Applications folder, I check the contents of the app and Info.plist wasn't extended with the info above.

Double-clicking to launch an .x file works though, just no icon replacement.

Can anyone confirm if my paths for the .icns file and .plist file is correct? Is it relative to the build folder or something else?

My file structure is according to the guidelines:

app folder:
 > package.json, main.js, etc.
 > build
   > icons & Info.plist

Answer 1

I ran into this issue myself. First of all, your first snippet in package.json is related to Electron Builder not Electron Packager.

So if you plan to use electron-packager make sure that your npm run build script uses it and not builder.

Here is how I fixed the icon issue with Electron Packager:

In you config for electron-packager you'll point to the plist file, as well as add an entry to copy the icon file into the resources folder of the app.

In your electron-packager config you need these two entries:

extraResource: "app/icons/document-icon.icns",
extendInfo: "build-files/Info.plist"

Then in your plist you can just use the icon name:

<key>CFBundleTypeIconFile</key>
<string>document-icon.icns</string>

Finally, you might need to relaunch the Finder for it to take effect if you've already associated the file before.

Hope this helps!