operations
operations copied to clipboard
openstreetmap
Use different colored icons for each of *.openstreetmap.org so can distinguish in browser
Here are some browser tabs, seen in a crowded chromium,
We observe all of *.openstreetmap.org use the same icon.
While this might have been a great choice originally,
one cannot tell at a glance which is the wiki, which is the map, etc. etc.
So perhaps use different colors for each.
How about we use the current logo for osm.org and all other pages get different colours of a mono-colour version like
The logo is actually licensed as CC-BY-SA 2.0 by wiki user Dr&mx. Is that a problem? You can find other logos in the wiki https://wiki.openstreetmap.org/wiki/Logos
That sounds like a nice approach, @Tigerfell
It would be simple way to distinguish while maintaining the same look. There is also a icon needed for the forum, as described in the mentioned openstreetmap-forum issue above. When the file is available i can add it to the template i made for the forum as well (Air3).
A suggestion for the colours. Thanks for the link @natrius
| Service (*.osm.org) | Colour | hex code | current icon |
|---|---|---|---|
| blog | mint | #aaffc3 |
- |
| blogs | orange | #f58231 |
OSM logo |
| dev | red | #e6194b |
- |
| forum | dark blue | #44699c |
- |
| git | black | #000000 |
old git logo |
| help | teal | #bdcced |
OSM logo |
| irc | grey | #a9a9a9 |
CGI irc logo |
| lists | yellow | #ffe119 |
Mailman logo |
| munin | white | #ffffff |
OSM logo |
| nominatim | lavender | #e6beff |
- |
| trac | maroon | #800000 |
OSM logo |
| wiki | green | #3cb44b |
OSM logo |
Top row: all colours from top to bottom in the table. Bottom row: colours sorted by colour scale.
Taginfo has a distinct logo already. SVN and OSMF pages (except blog.osm.org) are not included in the list. I tried to align the colours with the dominating background colour of the interface if possible.
@Tigerfell (in response to you question on https://wiki.openstreetmap.org/wiki/User_talk:ScubbX) about the licence of the file https://wiki.openstreetmap.org/wiki/File:Logo_simple.svg : You may use the file in any (also modified) way.
Thank you very much @scubbx!
These are the logos with 16, 32, 64, and 128 px and the proposed colours for lists, nominatim, forum, and the wiki (clockwise from top left).
I bigger version of the forum icon.
@Tigerfell If you write the hex code in the table in the comment like this:
`#aaffc3`
Github will make this out of it: #aaffc3
The proposed icons contain way too much detail to look clear in small format like a favicon.
I've been using a simplified version in my projects, including the osmlab organization on GitHub and the community index.
Happy to share the original assets here..
The original SVG: osm.svg.zip Generated manifest including .ico and various sizes of .png: osmlab icons.zip
To use them on a page, add this to the <head> section of the document. Modern browsers will pick the best size.
<head>
<link rel="apple-touch-icon" sizes="57x57" href="{{site.baseurl}}/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="{{site.baseurl}}/img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="{{site.baseurl}}/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="{{site.baseurl}}/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="{{site.baseurl}}/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="{{site.baseurl}}/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="{{site.baseurl}}/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="{{site.baseurl}}/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="{{site.baseurl}}/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="{{site.baseurl}}/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{site.baseurl}}/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="{{site.baseurl}}/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{site.baseurl}}/img/favicon/favicon-16x16.png">
<link rel="manifest" href="{{site.baseurl}}/img/favicon/manifest.json">
<link rel='shortcut icon' href='{{site.baseurl}}/img/favicon/favicon.ico' type='image/x-icon' />
<meta name="msapplication-TileColor" content="#000">
<meta name="msapplication-TileImage" content="{{site.baseurl}}/img/favicon/ms-icon-144x144.png">
</head>
I agree the proposed icons are much too busy, however @bhousel simplified version has bugged me also in the past with the negative of the icon confusing me (like two hands holding a bowl)
Also color blindness can be an issue where a red and green color (wiki and dev) are the same for the most common color blindness.
I'd rather see perhaps the current favicon with a letter like W or I or D in corner to differantiate
I'd rather see perhaps the current favicon with a letter like W or I or D in corner to differantiate
Does this not provoke issues with people using a non-latin alphabet? Maybe, it is best to combine both ideas, because there is a clash with "blog" and "blogs" anyway.
It is difficult to find twelve distinguishable colours if you can not use either red or green at all.
Happy to share the original assets here..
Thanks for the input! I am not yet sure if it is actually possible to specify the favicon so detailed. I can also imagine that there is some service with a simple path variable for one file only.
I received permission to use the image in the second post as well.
I simplified the other image and added a letter to them.
I had to shrink the "W" in order to make it fit.
@Stalfur I guess this is the most tricky one, because you have the same letter "B" for Blog/Blogs. Do you think we need to change one of the background colours here, because they are indistinguishable for colour blind people? Alternatively, I would suggest to remove the background rectangle entirely.
I prefer the version without the letters because it is more recocgnisable as OSM and distinguishable from other icons. There may be a case for non-colour differences though.
One thing needs to be clear - changing the icon is a rebranding effort as well. OSMF need to be on board with this.
As for color blindness there exist guidelines and tips for how to deal with that, without going into monochrome.
About color-blindness: The discussion in what i posted there includes some color blind people as well https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/ and there are simulators also like https://www.color-blindness.com/coblis-color-blindness-simulator/ as well.
One thing needs to be clear - changing the icon is a rebranding effort as well. OSMF need to be on board with this.
@Stalfur If you think so and know who to talk to, please feel free to get in touch with them. I am interested in hearing their POV as well.
Thanks @natrius I missed that. The icons of the blog and the user blogs are actually pretty distinguishable due to the different brightness.
As an OSMF board member: we trust the admins here to make these kinds of decisions. You're of course welcome to ask for input from OSMF members or maybe even CWG if needed.
Thanks @joostschouppe! I announced this on talk@ mailing list on 26 July, but there were only responses on GitHub so far. Sysadmins (@openstreetmap I guess), can we get a short :+1: or :-1:, please?
From my point of view as part of the sysadmin team:
- The favicons need to be easily identifiable as official OpenStreetMap.org sites. (eg: similar "Official" branding). eg: The OSM_Tech logo
- The actual favicons need to created for each of the sites, don't expect the Operations team to fire up inkscape to create the files.
- The source files need to be available, so that others could create new site versions of the favicons.
Thanks for the answers. Some remarks and questions from my side (based on your points):
- Is the magnifying glass in front of rectangle with rounded corners sufficiently identifiable? I am referring to these icons at about that size. Note that most users do not have a white background, so it would look more like this.
(click to expand to 100% view) - No need to discuss this.
- I planned to upload one SVG version and a list of the different colours used into the main wiki. The other files would be stored in their respective repositories (mostly OSM chef I guess). Does that suffice?
Nice work!
In the current version of the OSM logo I like the "reflection" on the magnifying glass and the lack of transparency, because it looks good whatever the color of the background. Maybe the contrast between the handle of the magnifying glass (black) and the rest of the logo also helps with easy recognition when it's small.
@Tigerfell in contrast, on your latest simplified logo, the transparency and lack of contrast has a strange effect when it's small: it makes it sometimes hard to even recognize the magnifying glass.
Did you try the approach of changing the colors of the current logo?
If we absolutely HAVE to put a letter there and it should be actually readable, we really need to let out the details. Take the map from https://github.com/openstreetmap/operations/issues/248#issuecomment-515483219 and leave out the magnifying glasses and instead drop a big letter there, including the changing colours. The logo would be simpler and it might be actually readable while still seeing the map in the background.
EDIT: I would need the actual URL where the favicon will be placed so i can add it to the forum. https://github.com/natrius/air3/issues/7
I suggest we clarify first the logo's appearance and secondly talk about the configuration. I would also appreciate if everyone who suggests something and wants to get their suggestion implemented, actually creates a file, like I did. Let's get active instead of writing suggestions, so we can actually test those images. I think I linked all my source files, so there should be nothing to stop you.
@zorun I agree that it is hard to recognize the magnifying glass. I never considered using the original logo, because I originally proposed to use a mono-coloured image.
How about we use the current logo for osm.org and all other pages get different colours of a mono-colour version ...
Why do you not create a test image and then we will see?
@natrius I would rank the magnifying glass as the most identifiable object of the logo and I think that choosing the map is the steeper path to take, because the logo will be fairly small and you want the people to identify the logo as map and therefore OSM, right? As I wrote, please feel encouraged to upload an image here so everyone can see. 😃
Ok, here is an attempt at colorizing the official OSM logo. For each color, I applied the "colorize" tool in Inkscape on all objects of layers map_details and mag_zoom. For some colors, I had to lower the opacity because otherwise it was too dark ("75percent" means that I only applied the color with 75% of opacity).
| Color | Logo 16x16, 32x32, 64x64, 128x128 |
|---|---|
| original |     |
| mint |     |
| orange |     |
| red |     |
| red-75percent |     |
| dark-blue |     |
| black-67percent |     |
| teal |     |
| grey |     |
| yellow |     |
| white |     |
| lavender |     |
| maroon-75percent |     |
| green-75percent |     |
Btw, all files (including the modified SVG files, and example HTML pages) are here: https://pub.polyno.me/osm/
Here is a screenshot of all the colors in browser tabs:
original | mint | orange | red | red-75percent | dark-blue | black-67percent
teal | grey | yellow | white | lavender | maroon-75percent | green-75percent
On the whole, I think that the darker colors (orange, red, dark blue, yellow, maroon, green) look good, while the lighter ones are hard to distinguish on a grey background. But in all cases the magnifying glass is easily recognisable.
@Tigerfell can you take a screenshot of how it looks with your orange-backgrounded browser tabs? You can use the HTML pages at https://pub.polyno.me/osm/
So what colors should the several sites be? Main site https://www.openstreetmap.org/ : use same color as now. Wiki:____ etc.____ Spectrum divided by how many colors are needed... (and/or reserve a few for future.)
@jidanni see @Tigerfell suggestion here: https://github.com/openstreetmap/operations/issues/248#issuecomment-515436438
Thanks for creating this and putting it all online.
It looks great! Here is the screenshot with my tabs:
I agree that the brighter colours are harder to distinguish. Do you think we can fix this simply by adding a letter?
Imho: No.
It would need an outline to be visible everywhere and then there are too much details and its not possible to distinguish anything. Most sites just use 2, 3 max 4 colours for it. Reddit: 2 colours, Github: 1 colour, working with outline, Buzzfeed, 2 colours, c-howto: 2 colours, and so on. I could not find an example where they use a different favicon then their main-logo.
Thats also why i suggested just a map with folding lines without the magnifying glasses. The simple one for the favicon, maybe even with a letter and the big logo with a magnifying glass maybe. This way the favicon would be easy to recognize and still similiar to the big icon. Like https://github.com/openstreetmap/operations/issues/248#issuecomment-515483219
Unfortunately i suck with graphic thingys, thats why i can just explan what i mean :/ I try to ask a friend, maybe he can help me out today.
@natrius Well?
I could not find an example where they use a different favicon then their main-logo.
We can just either have different coloured icons (this is what this ticket is about) or have the main-logo on all pages.
I created a version based on my previous one.
This is as you suggested, without the magnifying glass (font to be discussed):
I would suggest we use the icons by @zorun and add a letter as it was discussed.