Problem/Motivation
The Project Browser Initiative is working on a new Browser page for the Extend functionality. The default display of the Project Browser will include the most popular Drupal modules for the version of Drupal the site is using. A card will be displayed for each of the modules (projects). Three key components displayed on the card will include a logo, a short description and the top categories this module belongs to. This META issue is for creating a logo.
Instructions
DO NOT add any additional child issues. We are reserving this ticket for the TOP 100 modules
See Docs page: How to update projects to be compatible with Project Browser.
- Design a logo for the module.
- Create a logo that is 512x512 square dimension in PNG format without animations. Suggested file size should be 10k or less. Note: Please do not round the corners of the PNG itself unless there is some compelling branding reason. Corners are rounded automatically when displayed in the Project Browser.
- Use a lossy image tool (such as
pngquanttool or the tinypng.com online service) to reduce file size while keeping the image quality at around 80%. - To test a proposed logo in Project Browser before committing the file to the actual git repository, you can install the Project Browser to a local drupal site, then use your browser tools or web developer tools to inspect the logo element and edit the
srcto specify a new url. For example, on the drupal.org issue the url would be something likehttps://www.drupal.org/files/issues/2024-mm-dd/the-logo-file.png - When it is finalized, place the logo in the root directory of the Git repository for your project, on the default branch. The logo file should be named
logo.png. The logo will appear on Drupal.org project pages, to the left of the project name. Logos are cached and may take up to an hour to show.
Recommendations
These recommendations are not requirements, but only suggested guidelines to help get started when starting from scratch.
Use a vector graphics editing application (Inkscape, Figma, Penpot, Adobe Illustrator, etc), and consider exporting and committing the source SVG file logo.svg alongside the PNG. Follow discussion #3311380: Prefer SVG format, but allow PNG for logo?.
Please note: you should not round the corners in the PNG itself, unless there is some compelling branding reason. We will round corners when displaying in the Project Browser.
![]()
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | icon_artwork_sample.jpg | 39.03 KB | dandolorion |
Comments
Comment #2
leslieg commentedComment #3
adrian_s_m commentedCan one of the requirements be that logos stick to a certain color palette or a few colors approved by the community or maybe something that matches the Olivero theme or the default theme? I'm not a designer but it would be nice to have some consistency when looking at the logos. As of right now they are all over the place in term of colors/background/no background. Some designer input and guidance would be appreciated.
Comment #4
lostcarpark commented@Adrian_S_M That's a nice idea, but many logos are already RTBC, so it would be tricky to introduce at this stage.
Also, module maintainers are responsible for their module logos, so it would be down to module maintainers to adopt a color scheme.
I'm hoping that one day we will allow SVG logos. One thing that SVG logos could do is reference CSS variables. This would make it possible for the admin theme to assign color names, for example a primary and secondary color, and the SVG logos could utilise those. Then if there is a theme change in future, or the site owner picks an alternative admin theme, the project logos could automatically adapt to the new color scheme.
I know there are good reasons for not allowing SVG images for now, but I feel these are no more difficult than filtering HTML input in content fields, so hopefully this can be adopted in future.
Comment #5
bramdriesenFixed a typo in the issue description. Great tracking issue!
Comment #6
tim.plunkettComment #7
jwilson3Also late to the party here, but seems like it would have made sense to also provide more detailed guidelines for creating these logos, such as stroke width, stroke vs filled/solid iconography, a restricted (in-palette) background / foreground color choices, rounded corners vs hard edges, and maybe most importantly, define a minimum amount of whitespace around the edges of the foreground image vs the background. The whitespace seems a bit all over the place.
Comment #8
dandolorion commentedAgree with having consistency. I for one dislike seeing a hodge-podge of styles. Maybe something like this could be created to stick onto the ticket once a style has been agreed on?
Comment #9
bramdriesenThink guidelines are great. But in the end it's the maintainer who decides on what the logo will be.
Comment #10
jwilson3#8 this is the way. Nice job. I thought I saw somewhere in all the logo work to avoid rounded corners, but no idea where I saw that now. Plus it wasnt clear if it was in reference to the background color corners on the box, or rounded strokes/icons for foreground.
Comment #11
lostcarpark commentedYou are correct, @jwilson3, there is a note on rounded corners in the documentation page:
This is mainly referring to the logo background, since rounding is applied by the CSS, having rounded corners on the logos would lead to inconsistency.
I like the idea of having style guidelines, but I think the priority when logo work was started was to have logos for the 100 most popular modules.We've gone well beyond this.
Perhaps we could set up a working group to propose a set of style guidelines, either for future logo design, or perhaps people would be interested in revisiting some of the existing logos and reworking to fit the guidelines. However, as @BramDriesen says, it would be up to module maintainers to decide on a project logo.
Comment #12
jwilson3Comment #13
jwilson3Comment #14
jwilson3Comment #15
jwilson3It is worth pointing out that the documentation page mentions the logo.png from the Project Browser module, which doesn't follow the recommendations (the file is NOT 512x512 pixels and uses rounded corners). Needs follow-up?
Comment #16
lostcarpark commentedGood catch, @jwilson3.
The logo in the repo is 328x338 pixels, so it's not even square.
I agree it should be corrected, although I'm not sure what will happen to the logo after Project Browser gets merged into core. We should still have the PB logo as a good example for other modules to follow.
I'll create an issue for it.
Comment #17
lostcarpark commentedComment #18
lostcarpark commentedI've added the note about rounded corners to this issue. I've also added Inkscape to the list of recommended vector art software, as we should be promoting the use of open source software.
Comment #19
bramdriesenI addressed this at the project browser meeting of 31oct, but I still feel that creating all the logo's in this issue queue is not the best approach.
I would suggest creating the issues in their respective issue queue, and link to this meta. The only thing you will lose is the ability to filter in a single project for all logo suggestions. But that can still be done from the all issues view if you would leverage a proper tag or naming convention.
Comment #20
jwilson3As a project maintainer, I ended up just switching the issue from Project Browser to the contrib module, in order to get an MR, and then switched it back to this issue queue, so it could be marked fixed. The problem with creating new issues in the respective project queues is that ultimately its going to be a lot more duplicate work to re-upload images, copy over instructions for maintainers, copy over issue credits, etc.
The detailed steps I followed for a module I maintain:
Project Browser Logoto the issue's Tags typeahead.Comment #21
bramdriesenHence why I'm saying the issue should be created in the real project issue queue from the start and not here. I'm not talking about creating new issues for the issues that we already have here.
And here is my issue, people are doing so much work without the maintainer input. If the work would be moved into their project queue, they have a view on it and comment early. Before someone has to go through all that trouble, and then after that again.
Comment #22
lostcarpark commentedI think @BramDriesen makes a very good point.
If logos are created as a child of this issue, they are visible in the sidebar here, so designers can easily pick them up to work on them.
Creating them in the target project rather Project Browser means the project maintainers have visibility of the logo design process and can engage with it if they wish.
It also makes it easy to turn the accepted logo into a merge request.
It might make it easier to get project maintainers to accept logos as they will have seen the creation process and may have contributed to it.
It would also reduce the number of issues in the Project Browser queue.
Comment #23
bramdriesenI'll do some issue triage and cleanup in the referenced issues here as well, as there many set to RTBC which could be set to fixed.
Comment #24
baluertlMentioning an easier-to-use PNG minimizer alternative.
Comment #25
chi commentedWith these logos it will be so easy to find a list of installed contrib modules on any Drupal site.
Comment #26
teknorahWould it makes sense for the logo creator or other contributor to see if a logo or logo creation issue already exists for the corresponding project? Or was this already done?
Comment #27
kristen polPasting from Slack:
@tekNorah said she'd try to help get this organized ❤️
Comment #28
kristen polFyi, I'm going to pick a few projects for logo/icon work right now and double-check them against the issues to make sure they haven't already been done and then I'll make child issues.
Comment #29
kristen polI went through the top 250 Drupal 10 compatible projects and:
I've added 116 child issues. Example:
#3458929: Project Browser: Create a logo for jQuery UI Selectable
I'll work with my kids on doing some of these (already started).
Comment #30
leslieg commentedComment #31
kristen polI have moved or closed all the non-top-100 logo issues I created. For the closed ones, I removed this issue as the parent so it won't show up in the sidebar.
Comment #32
jonathan1055 commentedQuite a few modules that are not in the top 100 still have this meta issue as their parent. But the link back here is still useful, therefore they can be changed to 'refer' to this issue instead, and not have it set as 'parent'
For reference here is the list https://www.drupal.org/project/usage
Comment #33
jonathan1055 commentedUpdated the issue summary to include a hint about testing the logo files locally before committing.