App icons on Chromebooks | Tauri Apps | Page 1

rotund oriole Feb 24, 2024, 5:04 AM

#

Hello, I've recently started a project using Tauri and I love this server because I can ctrl + f for all the answers to my questions haha.

However, I just was not able to find anything both online and here about Tauri icons on Chromebook linux (crostini). I'm not exactly sure if this bug is with Linux in general or just Crostini since no one on our team has a non-Chromebook Linux computer 😅 . Most articles I found online were about how to modify the icons of an app by finding a *.desktop file, but I think those are for end-users.

I can confirm that the icons work on both Windows and MacOS and they were setup using npm run tauri icon. I would appreciate a lot if someone could help!

Here is the tauri.conf.json file if you need.

"bundle": {
  "active": true,
  "targets": "all",
  "identifier": "me.zhich.project-raphael",
  "icon": [
    "icons/32x32.png",
    "icons/128x128.png",
    "icons/[email protected]",
    "icons/icon.icns",
    "icons/icon.ico"
  ]
}

lusty river Feb 24, 2024, 5:17 AM

#

What is the issue? Is the icon not showing up in the taskbar?

rotund oriole Feb 24, 2024, 5:18 AM

#

Yeah, it's showing the default Penguin icon.

lusty river Feb 24, 2024, 5:18 AM

#

Have you installed the app?

rotund oriole Feb 24, 2024, 5:19 AM

#

I've built it using npm run tauri dev, I haven't tried building it using npm run tauri build and installing it like that though.

lusty river Feb 24, 2024, 5:19 AM

#

I have no experience with Chromebooks but maybe they require the desktop file to fill in their taskbar icon as well.

rotund oriole Feb 24, 2024, 5:20 AM

#

I'm not familiar with Linux- Do I need to do anything extra to show icons on Linux?

lusty river Feb 24, 2024, 5:22 AM

#

The app-name.desktop file will be generated by Tauri when you install the app-name.deb.

rotund oriole Feb 24, 2024, 5:23 AM

#

Oh, that might be the issue. I've never tried installing it using a .deb file.

lusty river Feb 24, 2024, 5:23 AM

#

I know basically nothing about the interface of a Chromebook but for a desktop like MATE (a GNOME2 fork), it has a taskbar with a widget for showing active apps. In tauri dev, the app icon shows up on that taskbar.

rotund oriole Feb 24, 2024, 5:23 AM

#

I'll try to compile it into an executable and update you, thank you very much for the fast response!

update: It's gonna take a while from redownloading all the packages... 😅

lusty river Feb 24, 2024, 5:24 AM

#

I know GNOME3 removed their taskbar and made things harder but the overview menu should still have the icon for tauri dev when showing the window.

#

For example, a quick squiggle I just made, then ran tauri icon path/to/icon.png. It showed up the next time I ran tauri dev. Sometimes you have to delete the src-tauri/target directory because it will cache the icons.

rotund oriole Feb 24, 2024, 6:33 AM

#

Sorry I’ll have to continue this tomorrow, I just discovered that school chromebooks are so slow lmao

rotund oriole Feb 24, 2024, 9:51 PM

#

Yeah no, installation from .deb file also doesn't work.

rotund oriole Feb 24, 2024, 9:57 PM

#

lusty river For example, a quick squiggle I just made, then ran `tauri icon path/to/icon.png...

Yeah, that's what I did as well but it didn't work for all three of us on Chromebook unfortunately. I think we tried deleting the target directory as well but didn't seem to work.

rotund oriole Feb 24, 2024, 10:02 PM

#

lusty river I know basically nothing about the interface of a Chromebook but for a desktop l...

I tried installing this just now but ran into an error, I think I'll just go check out VSCode's repository later to see how they display their icons because that seems to work on Chromebook lol.

lusty river Feb 25, 2024, 5:28 AM

#

Can you check that the name and content of the *.desktop file, which should be in ~/.local/share/applications, matches the name of your app binary exactly? I did read before that ChromeOS expects an exact match while some other distros are more lenient.

rotund oriole Feb 26, 2024, 2:15 PM

#

lusty river Can you check that the name and content of the `*.desktop` file, which should be...

There are three files in ~/.local/share/applications/: mimeinfo.cache, chrome-<long-string>-Default.desktop and mimeapps.list. However, in ~/.local/share/, there are the folders project-raphael and me.zhich.project-raphael.

#

Sorry, I was busy yesterday... 😅

lusty river Feb 26, 2024, 2:36 PM

#

No problem. Does the .deb installer not create /usr/share/applications/<app-name>.desktop and the icon in /usr/share/icons/hicolor/128x128/apps/<app-name>.png and a few other resolution folders?

rotund oriole Feb 26, 2024, 2:51 PM

#

There isn't a .desktop file there, which seems odd because I also have VSCode installed in Linux and it has its icon displayed.

#

In the hicolor/128x128/apps/ folder, there's only the youtube icon.

#

I just realized that it displays its icon when I look here, just not in the task bar! (the screenshot is one I found online to indicate the place where I can see my app's icon)

lusty river Feb 26, 2024, 2:58 PM

#

I couldn't find any official documentation beyond installation instructions so I'm not sure what expectations the taskbar has for showing the icon. Usually, the icon shows in the taskbar regardless of install status because the app sets the taskbar icon at runtime.

rotund oriole Feb 26, 2024, 3:26 PM

#

Oh, I found my app's .desktop file. It's located at /usr/share/applications and contains the following:

[Desktop Entry]
Categories=
Comment=A Tauri App
Exec=project-raphael
Icon=project-raphael
Name=project-raphael
Terminal=false
Type=Application

#

The icons are at /usr/share/icons/hicolor/128x128/apps, named project-raphael.png.

rotund oriole Feb 26, 2024, 3:32 PM

#

rotund oriole Oh, I found my app's .desktop file. It's located at `/usr/share/applications` an...

There exists code-url-handler.desktop for VSCode at this location and it has some extra fields, though I don't see anything that would cause it to display the icon correctly.

[Desktop Entry]
Name=Visual Studio Code - URL Handler
Comment=Code Editing. Redefined.
GenericName=Text Editor
Exec=/usr/share/code/code --open-url %U
Icon=vscode
Type=Application
NoDisplay=true
StartupNotify=true
Categories=Utility;TextEditor;Development;IDE;
MimeType=x-scheme-handler/vscode;
keywords=vscode

lusty river Feb 26, 2024, 10:55 PM

#

I have both code.desktop and code-url-handler.desktop.

#

They also exist directly in the .deb archive so it's not the post-install script creating them.

rotund oriole Feb 26, 2024, 11:02 PM

#

Hmm, I guess we both have no ideas on how to fix this issue haha.

lusty river Feb 26, 2024, 11:03 PM

#

VSCode is OSS so maybe taking a peak at the codebase will help. I can't do that right now but will look when I have a moment.

rotund oriole Feb 26, 2024, 11:13 PM

#

VSCode seems to do this for their icons on Linux, but I'm not 100% sure because I've never heard of gulp.js...

const icon = gulp.src('resources/linux/code.png', { base: '.' })
        .pipe(rename('usr/share/pixmaps/' + product.linuxIconName + '.png'));

https://github.com/microsoft/vscode/blob/main/build/gulpfile.vscode.linux.js#L65-L66

lusty river Feb 26, 2024, 11:14 PM

#

I just noticed /usr/share/pixmaps/vscode.png which is the last place it should check according to the standard.

rotund oriole Feb 26, 2024, 11:14 PM

#

lusty river VSCode is OSS so maybe taking a peak at the codebase will help. I can't do that ...

Oh yeah, please take your time if you're busy I really appreciate the help! 🙏

#App icons on Chromebooks