App Icon Won't Work


#1

I’m developing a Markdown editor called WriteDown. For some reason, despite my attempts to set the icon when building with electron-packager, I cannot get the icon to work. The source code can be found here, the only difference between the latest commit and my working copy is line 279 of main.js, which looks like this:

mainWindow = new BrowserWindow({width: 800, height: 600, icon: './resources/img/typewriter.png'})

The above does not work on Ubuntu 16.10, and I’ve been unable to test on Windows. I also tried using electron-packager, both with and without the --icon parameter. Below is with the icon parameter, as it’s quite obvious what it would be without it.

electron-packager . WriteDown --out=build/ --platform=linux --arch=x64 --icon=resources/img/typewriter.png

The command is obviously being run from the base directory, and all parameters appear to be valid. However, on Linux, there is still no app icon in the dock.


#2

try using path when setting the icon
var path = require('path')

mainWindow = new BrowserWindow({width: 800, height: 600, icon: path.join(__dirname,'resources/img/typewriter.png') })

#3

Didn’t work. Near the top of main.js, i’ve got a constant defining path, and I use path.join in browser window.

const path = require('path')
...
// create window
function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600, icon: path.join(__dirname, 'resources/img/typewriter.png') }) // window data
  mainWindow.loadURL(`file://${__dirname}/index.html`) // and load the index.html of the app.
  // on window close, deref window object
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

There’s the entire function I use to create the window, in case it helps.


#4

Hmm, i downloaded your app from your repo (master branch) and changed createWindow to this. the icon was set to an html document before. And i got the icon. See image below.

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600, icon: path.join(__dirname, 'resources/img/typewriter.png') }) // window data
  mainWindow.loadURL(`file://${__dirname}/index.html`) // and load the index.html of the app.
  // on window close, deref window object
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

Ubuntu 16.04 lts:


#5

i can see in package.json that you are running electron 1.3.4
Not sure, but try update it to the latest version(1.4.4). maybe that will help?


#6

I really don’t know what is wrong with this now. I’m currently running Ubuntu 16.10, though it was the same on 16.04. I just updated electron to 1.4.4, and have confirmed that it has updated properly with --version. To update, I deleted ~/.electron and ran NPM install again, as I don’t know of another way to do it.

Anyways, as far as I can tell, my local codebase is identical to yours, with the createWindow() function modified appropriately. I’ve also updated the devDependencies to depend on electron ^1.4.4. However, I still cannot get the icon working. I’m guessing something is wrong with my electron install, but I have no idea what. Note that I’m using the global version of Electron, so I should not need to do npm install in the base directory, however I am doing so anyways.

Edit: I installed electron locally to the project with npm install, but the icon still does not show. I’m personally out of ideas, since updating node to the latest version (7), didn’t help either.

Edit 2: I discovered that I had installed nodejs from the APT repos sometimes in the past, so I had version 4.x as well as 7.0.0. The new version was simple named node, so I uninstalled the old NodeJS and rebooted my computer, but icon is still broken.


#7

Try the following:
First clone the electron-quick-start project

Then access the directory electron-quick-start and run the command “npm install”

Then run the command “electron .” you will see that it opened the electron-quick-start program without an icon.

Now copy it to the electron-quick-start a file of type folder “.png” to use as icon.

Then open the file and edit main.js the part where made and the window opening and place the code according to the image.

Then run the command nomamente “electron.” and see now that the program uses as the icon “.png” file you chose.

I hope you solve your problem.

Already I apologize to any error writing I do not speak English and am using Google Translate.


#8

Just so i understood correctly: Did you update the global electron package as well?
If you run electron -v in the terminal, what version number shows up?
You can update it to the latest version by running:
npm install -g electron


#9

To clarify, I’ve got Node v7.0.0, NPM v3.10.9, and Electron (global) v1.4.4.

I tried the above, and like everything else I’ve tried it didn’t work. I’m thinking about trying it on a VM, because obviously I have something messed up, most likely NodeJS, maybe Electron.


#10

So try on a virtual machine to verify that it works may be some error in your Ubuntu.


#11

OK, so I tried installing node, electron, and running writedown on a completely different computer, but still no icon. The image below shows the createWindow code, Node, Electron, and NPM versions (in the order mentioned). I’ve also adjusted the function to print to the console the path, which is valid.

I do wonder though, should I have fs and path in my package.json as dependencies? I’m thinking (and hoping) that’s the cause, but IRDK.


#12

I don’t have fs and path in package.json so i don’t think that is the problem.

Im running out of ideas here. But i can see i use an older version(4.6.1) of node than your ubuntu machine.
I used these commands to install it (https://nodejs.org/en/download/package-manager/):

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

Would that make a difference?


#13

Very strange. Try downloading this example I created based on electron-quick-start. Extract the folder somewhere and execulte via terminal using “electron .” who knows can work.

https://drive.google.com/file/d/0Byn5w32x2ebpRzd4QzhELXI1THM/view?usp=sharing


#14

You did it?
I was curious if the example I sent worked for you.

I apologize for any error writing because I am Brazilian and I am still learning to speak English.


#15

It’s been a while, but finally I’ve had a chance to revisit this. Since my HDD just failed, I reinstalled everything on a new SSD.

What I discovered, was that the problem was something with my installation of NodeJS.

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

The above (as mentioned by @crilleengvall), worked just fine and the icon for the example provided by @RodriguesCosta works, as well as WriteDown itself.

Anyways, thanks all for your help.


#16

Does not work for me. I think it is not good idea to provide the instruction to reinstall everything.
It is better to help with debugging .