Pulsar Icons

[confused-Techie]

Alright, so this post won't touch on the discussion of our rebranding or waiting for icons, this is meant to document the kind of icons we need, whether we do this now, or after we receive our updated Icons isn't of much importance here.

Since I'd really like to give us First-Class support on all relevant platforms, we should probably document the following:

• where We need icons
• what Are the requirements for each Icon
• who Is the relevant tool to build such Icons.

So with that in mind, lets begin with our list, and please if there's any I've missed please feel free to add them here, I'll try to keep everything organized, so if you are adding any missing entries it may be nice to try and keep a same-ish format

---

List of the Icons needed throughout the Pulsar Project

Banners

• Banner Image

  • Description: We need to create a banner image of suitable size for GitHub Readmes, now the banner we have may work, I haven't quite checked.
  • Size: GitHub recommends for a Readme to use: 1280x640px

• Social Image Preview

  • Description: This would be an image that appears as the social media preview when our repos are shared. In a perfect world we can have a collection of them for our major repos, such as pulsar, pulsar-edit.github.io, package-backend and ppm
  • Size: GitHub recommends: 1280x640px (We very likely could use the same image that our Readme banner contains)

• Open-Collective Cover Image

  • Description: We also need one for Open-Collective.
  • Size: 2736x650

• Reddit Banner

  • Description: Our Reddit banner, there's a few choices on what size we want to have, and this will likely need to be a custom icon just for Reddit.
  • Size: We have the following choices in size
    • Small: 4,000x64px
    • Medium: 4,000x128px
    • Large: 4,000x192px

• Mastodon Banner (Header)

  • Description: The banner on our Mastodon account
  • Size: 700x335px
  • Other Requirements: Cannot be over 2MB in size

Icons

• Generic Icon

  • Description: Essentially a Generic Icon to use wherever we may need to in the future. This Icon should either be very high quality or scalable like an SVG. This one we essentially already have, just thought it'd be good to mention we need to keep it around.

• Open-Collective Profile Icon

  • Description: We need a profile icon for Open-Collective, there's no recommended size, so likely whatever highest quality or scalable image we have will work best, Such as the generic icon.

• Reddit Community Icon

  • Description: This would be the community Icon we use for Pulsar. This Icon should have a large amount of empty space on the outside, since it becomes quite cropped on Reddit
  • Size: 256x256px

• GitHub Profile Icon

  • Description: This would be the profile icon for our GitHub Org as a whole
  • Size: 500x500px (Must be smaller than 3000x3000px)
  • Other Requirements: Must be a PNG, JPG, or GIF. Must be less than 1MB in size

• Discord Profile Icon

  • Description: This will be the profile icon for our Discord Server. Additionally since the icon will be cut into a circle, we must ensure details are only in the center, with a large amount of empty space on the outside. Could likely use the same source file as Reddit, just a different size.
  • Size: 512x512px is recommended
  • Other Requirements: Must be JPG, PNG, or a GIF.

• Mastodon Profile Icon

  • Description: The profile icon for our Mastodon account.
  • Size: 120x120px
  • Other Requirements: Cannot be over 2MB in size.

Web Icons

• Classic Favicon

  • Description: Including the classic favicon means more than just a single image
  • Variants:
    • Classic: favicon.ico 32x32px
    • favicon-32x32.png
    • favicon-16x16.png
    • favicon.svg

• Apple Touch

  • Description: This Icon would be seen if an iOS user were to save our website to their homescreen.
  • Size: 180x180px
  • Name: apple-touch-icon.png

• Android Chrome

  • Description: This Icon would be seen if an Android & Chrome user were to save our website to their homescreen.
  • Size: 192x192px
  • Name: android-chrome-192x192.png
  • Variant: android-chrome-512x512.png
  • Requirements: Also requires a site.webmanifest available

• Windows 8 & 10

  • Description: This Icon would appear in a Windows Users Start Menu of frequently visited pages (If using Edge)
  • Size: 150x150.png
  • Name: mstile-150x150.png
  • Requirements: Also requires a browserconfig.xml available

• Safari

  • Description: This Icon would appear on Safari Pinned Tabs & would appear on the MacOS Touch Bar when browsing our site
  • Name: safari-pinned-tab.svg
  • Requirements: The Mask Color of the icon needs to be declared in the meta tag of the HTML page.

Application Icons

• Windows

  • Description: There is a suite of icons that are recommended for Windows. I'll try to point out what's required, and may be a good idea for us to include.

  • Standard Required:

    • Size: 24x24px
    • Where: Taskbar, Search Results, Start all apps list
    • Scaling: 100% Scale Factor

  • Standard Recommended:

    • Size: 16x16px
    • Where: Context Menu, Title Bar, System Tray
    • Scaling: 100% Scale Factor

  • Accessibility Recommended:

    • Size: 32x32px
    • Where: Start Pins @100% Scale Factor - Context Menu, Title Bar, System Tray @200% Scale Factor
    • Scaling: See Above

  • Bar Minimum:

    • Size: 256x256px
    • Description: If we include only a 256x256 icon for Windows, that ensures that windows will only ever scale the image down, and should display well enough in all locations.

  • Note on Windows: There's a LOT more sizes we could include to have the best support everywhere, getting the above would be a great starting point, especially since we don't have a single one from that list currently (But I'm working on that right now in a PR) But look below at resources to find the list of other application icons we could implement

• Linux

  • Description: The Icon that would appear for Linux users. (This has been helped by @Daeraxa )
  • Debian:
    • According to Debian.org
    • Format: xmp
    • Size: 32x32px
    • Variant: Size: 16x16
    • Other Requirements: Background should be transparent
    • Other Notes: We may want to include a hints within a menu.h file to help structure the look and behavior of a Debian installation.
  • GNOME:
    • According to FreeDesktop.org
    • Size: 48x48px
    • Variant: Include an SVG in /usr/share/icons/hicolor/scalable/apps/
  • Generic:
    • According to Hoppenheit.info
    • It's recommended to place icons into the following places
      • 32x32px XPM in /usr/share/pixmaps/
      • 48x48px PNG in /usr/share/icons/hicolor/48x48/apps
      • SVG in /usr/share/icons/hicolor/scalable/apps
    • Other Generic Variants recommended by @Daeraxa would include the following sizes
      • 16x16px
      • 24x24px
      • 32x32px
      • 48x48px
      • 72x72px
      • 96x96px
      • 128x128px
      • 144x144px
      • 256x256px
      • 512x512px
      • 1024x1024px

• MacOS

  • Description: There is again a suite of Icons recommended here. I'm not very familiar with branding on MacOS so ideally someone that is more-so can fill this in, but I'll add what I'm seeing from the docs linked below.
  • Variants:
    • Size: 1024x1024px
    • Size: 512x512px
    • Size: 256x256px
    • Size: 128x128px
    • Size: 32x32px
    • Size: 16x16px

Resources:

• Favicon Generator can be used to generate every single Web Application needed, and has already done so on the package-frontend.
• Windows Icons
• MacOS Icons
• Martin Hoppenheit Linux Icon Recommendations
• FreeDesktop.org Linux Icon Recommendations
• Debian.org Linux Icon Recommendations

[Daeraxa]

Great writeup... things I hadn't even thought about...
The macOS icon I think also needs special treatment so far as the icon for the dock in that people will want it to "fit in" with the others, likely in the squircle or whatever it is called icon style.

One small area I can think of which is often a nice QoL addition but by no means necessary is styling the macOS dmg installer window itself, no idea how it is done but I just know it is a thing.

If we are going to use a Matrix instance too then I assume we need whatever format that needs (hopefully the same as Discord).

On Linux I think we need the following (taken from another project but don't quote me on accuracy):

• 16px
• 24px
• 32px
• 48px
• 72px
• 96px
• 128px
• 144px
• 256px
• 512px
• 1024px

[confused-Techie]

Great point about MacOS, I wonder if we could even assign different variations of the icon to match different versions of MacOS? Since in each one the recommendation may slightly change, or if we just wanna focus on the newest stuff

But would you mind linking the project? Would be helpful to try and find whatever docs they are using

[Daeraxa]

As you may have guessed, it is Joplin (literally the only other project I'm familiar with :P )
https://github.com/laurent22/joplin/tree/dev/Assets

https://github.com/laurent22/joplin/blob/dev/packages/tools/generate-images.ts
https://github.com/laurent22/joplin/blob/dev/packages/tools/generate-images.json

As for macOS style I think it is best just to target the current one and update it as and when needed, I don't think it is worth maintaining all the back versions.

[confused-Techie]

Okay, I can totally agree with just focusing on the current stuff. That sounds good to me, but thanks for the link I'll go ahead and take a look at it

[Digitalone1]

@Daeraxa I'd say to ship only the svg icon for application icon on Linux.

Looking what Firefox is doing (one of the most used app on Linux - some distro ship it as default browser), see here under Package Content:

usr/share/icons/hicolor/16x16/apps/firefox.png
usr/share/icons/hicolor/22x22/apps/firefox.png
usr/share/icons/hicolor/24x24/apps/firefox.png
usr/share/icons/hicolor/32x32/apps/firefox.png
usr/share/icons/hicolor/48x48/apps/firefox.png
usr/share/icons/hicolor/64x64/apps/firefox.png
usr/share/icons/hicolor/128x128/apps/firefox.png
usr/share/icons/hicolor/192x192/apps/firefox.png
usr/share/icons/hicolor/256x256/apps/firefox.png
usr/share/icons/hicolor/384x384/apps/firefox.png
usr/share/icons/hicolor/scalable/apps/firefox.svg

But all those icons are not really needed. For a couple of years I contributed to EasyEffects which ships only the svg icon without issues (look here):

usr/share/icons/hicolor/scalable/apps/com.github.wwmm.easyeffects.svg

Besided, citing the Icon Theme Specification which Linux desktops are recommended to follow:

Minimally you should install a 48x48 icon in the hicolor theme. This means installing a PNG file in $prefix/share/icons/hicolor/48x48/apps. Optionally you can install icons in different sizes. For example, installing a svg icon in $prefix/share/icons/hicolor/scalable/apps means most desktops will have one icon that works for all sizes.

So installing only the svg icon is the best solution in my opinion, since we have to provide a single icon that works for all sizes. Simple and easy (well, not that easy because of electron-builder, but we could find a workaround).