Add support for custom Logo per library using metadata in package.json

[marcellodesales]

Hi there,

We've finally finished deploying NPM Onsite and we'd like to add the support for personalized icons for our own modules while they are listed in the website.

Requirement

• Library owners should be able to describe what Logo should be displayed in the NPM search site.
• The location to add the logo could be provided by developers in the package.json as follows:

  "logo": "https://cldup.com/Rg6WLgqccB.svg"

That would result in displaying a custom logo from the given PATH, whatever the protocol is (if possible supporting file-path relative to the package.json).

So, Instead of showing

We could show the regular icons like

• Format URL: Possibly to support the URL: "logo": "https://cldup.com/Rg6WLgqccB.svg"
• Format RELATIVE PATH: Replative to package.json: "logo": "static/logo-4-npm.png"
• Format: We could use the standard size from NPM, say 50x50 Pixels.

  Locations to Display

The locations where it would be great to see the icon are:

• Index Page
• Search Results
• Module page

  Enterprise

For an Enterprise, this is important to help engineers distinguish their @scope/package Modules from others.

Update Jan-14-2016

@bcoe suggests to use https://developer.chrome.com/apps/manifest/icons format:

  "logo": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png" 
  },

[bcoe]

@marcellodesales I'm really excited about this idea, and was having a discussion about this feature early in the week with @stubbornella.

Can't promise a timeline, but this is pretty high up on the team's current roadmap.

[bcoe]

@marcellodesales how do you feel about this spec for icons, could we copy it? do you have other ideas?

https://developer.chrome.com/apps/manifest/icons

[marcellodesales]

@bcoe Thanks a lot for considering this feature!!! That's definitely needed in our Enterprise, but I'm sure the Open-source community would love to see their own icons displayed in the registry!

In regards to the Chrome's manifest, that's definitely a great design!!! That way, you can adjust how you display the different icons properly! :+1:

[marcellodesales]

@bcoe Do you want change the metadata to icons or maintain logo?

[kevinSuttle]

@marcellodesales @bcoe I've been looking into this as well, and it turns out packages already support it, though it's more of a grassroots convention. There is also some distinction between logo and icon covered in this thread.

See "Software package icons" section. https://github.com/schemaorg/schemaorg/issues/939

[marcellodesales]

So, @kevinSuttle I like the distinction made at http://www.pixelresort.com/blog/icons-and-logos-are-not-the-same/...

@bcoe Shouldn't we provide support for both? I mean, the mixed size of icon is important of where to display:

• 16x16: Search results, lists, etc
• 48x/48: Front page, Details

  "logo": "http://my-logo.images.com/mylogo.png",
  "icons": { 
    "16": "icon-16.png",
    "48": "icon-48.png"
  },

The logo should be displayed on top of the page. Something you guys already do with the packages with the logos...

@kevinSuttle Is this something you're looking for?

[kevinSuttle]

@marcellodesales Yes.

[bcoe]

@kevinSuttle @marcellodesales how do folks feel about this convention:

https://developer.chrome.com/apps/manifest/icons

I thought it might be good prior art to imitate.

[kevinSuttle]

I added that Chrome link and https://developer.mozilla.org/en-US/Apps/Build/Manifest#icons to the original issue on Schema.org.

However, I do think it's a bigger discussion that needs to happen. Wondering where the best place for that would be. I feel like here is it for now? https://github.com/schemaorg/schemaorg/issues/939

[bcoe]

@kevinSuttle seems like the discussion on https://github.com/schemaorg/schemaorg/issues/939 is a good place, I will loop a few of our web folks in on this.

[kevinSuttle]

:+1:

[marcellodesales]

@bcoe @kevinSuttle the W3C Web App Manifest (Working Draft 27 January 2016) includes the Icons section... https://www.w3.org/TR/appmanifest/#example-manifest...

[kevinSuttle]

@marcellodesales Nice!

[marcellodesales]

This PR https://github.com/npm/npm-explicit-installs/pull/12 is actually working on the NPMO docker install... Looks promising!