I created a desktop icon in Linux

[awkwardwaiter]

Running reor on Ubuntu Linux. I wanted a distinct icon instead of the generic cog. In the spirit of things I asked GPT for instructions and for an icon image. My steps below.

There may be better methods of adding an icon. One weakness of this method is that I will need to update the reor appimage file name in Step 3 when the version # changes.

Steps:

1. Create your icon. I put this in the same folder as my reor appimage file, to make it easy to find later. I attached my icon file as an example. GPT suggested a small square PNG file. GPT 4 itself gives me webp file format, which I needed to save as a PNG. I used the Krita image app to crop and save as reor_icon.png

2. Create .desktop icon file. Probably need root permission. In Terminal, I entered:
   sudo nano /usr/share/applications/reor.desktop

3. Nano editor opens. Paste in this code and replace with your path and file names. Cut out my parenthetical notes

[Desktop Entry]

Type=Application

Name=Your App Name (reor for me)

Exec=/path/to/your/appimage file name (Reor_0.1.52.AppImage for me)

Icon=/path/to/your/icon.png file name (reor_icon.png for me, in the same path as my reor appimage file)

Terminal=false

4. Save that .desktop file. In Nano, thats Ctlr-X, then Y for Yes you want to save it. If you get a permission denied error, that's probably because you didn't sudo when you started creating the file.

5. Make the .desktop file executable
   sudo chmod +x /usr/share/applications/your_app.desktop

6. Update the icon database for applications
   sudo update-desktop-database

7. Look in your applications for Reor, it should have the new icon. In Ubuntu you can click the 9 dot grid in the lower left corner ("Show Applications" on hover) and then browse to see your app.

[samlhuillier]

Nice!!!! Do you know if there's a way we can set an icon by default when we build the electron app as an appimage?

[awkwardwaiter]

I asked ChatGPT. I'm happy to try my hand at doing this myself, but I don't know if you want me messing with the code? I'm a tinkerer not an actual developer.

To embed an icon within the AppImage itself, particularly for Electron-based applications, you can follow these steps:

1. Prepare the Icon: Ensure you have the icon you want to use in a suitable format (preferably .png) and in the desired resolution. (for Linux desktop, advice I saw was a square image)

2. Add the Icon to your Electron Application: In your Electron application's source code, you need to specify the icon path in your package.json file. Add or modify the build configuration to include the icon path.
   Replace "build/icon.png" with the actual path to your icon file within your Electron project.

"build": {
"appId": "com.example.app",
"productName": "MyApp",
"mac": {
"icon": "build/icon.png"
},
"linux": {
"icon": "build/icon.png"
},
"win": {
"icon": "build/icon.png"
}
}

3. Rebuild the AppImage: After updating the icon path in your Electron application, rebuild the AppImage. This step typically involves using a tool like electron-builder or electron-forge to package your Electron application into an AppImage format.

4. Verify the Icon: Once the AppImage is built, you can check if the icon has been embedded correctly. You can do this by inspecting the AppImage file using tools like AppImageTool or simply by running the AppImage to see if the icon is displayed correctly in the application launcher.

5. Hmm, if Step 4 displays the icon in the Linux application launcher, are you done? ChatGPT added a Step 5 to also create a .desktop file. I asked it to modify Step 5 to avoid having to update this file every time you increment the AppImage file version #, but I don't know if Step 5 is even necessary.

Create a Desktop Entry with Embedded Icon: Now, you can create a desktop entry (.desktop file) for your AppImage. You can create a more dynamic .desktop file by using the %k parameter. This parameter tells the desktop environment to use the icon embedded within the AppImage itself. Here's how you can modify your .desktop file:

[Desktop Entry]
Type=Application
Name=MyApp
Exec=/path/to/your/appimage
Icon=%k
Terminal=false

With %k as the icon path, the desktop environment will automatically look for the embedded icon within the AppImage file specified in the Exec field.

This way, you won't need to update the .desktop file every time you update the AppImage, as it will always use the embedded icon regardless of the version number or filename.

(the end)