search

carbon-design-system / carbon-website

The website for the Carbon Design System.
https://www.carbondesignsystem.com
Apache License 2.0
278 stars 778 forks source link

Add app icons (apple, android etc) #80

Closed alisonjoseph closed 4 years ago

shixiedesign commented 5 years ago

@alisonjoseph I did some tweaks and tested our icons/favicons/app icons via this site.

Download the images favicon_package_v0.16.zip

I'm not sure if this code they generated is useful, but it's here:

<link rel="apple-touch-icon" sizes="180x180" href="/src/content/global/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/src/content/global/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/src/content/global/images/favicon-16x16.png">
<link rel="manifest" href="/src/content/global/images/site.webmanifest">
<link rel="mask-icon" href="/src/content/global/images/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/src/content/global/images/favicon.ico">
<meta name="msapplication-TileColor" content="#171717">
<meta name="msapplication-config" content="/src/content/global/images/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

This is the site I used: https://realfavicongenerator.net/favicon_result?file_id=p1d3hm61h21akt180m11ob18pj1sr06#.XGNC0s9KjOQ

shixiedesign commented 5 years ago

Actually. Let me put these icons through Pete one more time. Please hold on implementation.

shixiedesign commented 5 years ago

We got the favicon for browser tabs on full screen

Looks like we need proper icon images designed needed for:

image

peter-garvin commented 5 years ago

Here it is horizontally with the eye and bee

screen shot 2019-02-13 at 12 19 49 pm
peter-garvin commented 5 years ago

Carbon icon files https://ibm.box.com/s/1d9mde4e2j7jnecr9f6th7su8ss2ln1w

Bee icon files https://ibm.box.com/s/01a2jtweop0rzqtinaue9vhe9qrzfsst

Eye icon files https://ibm.box.com/s/gs7d61rdqg1czt7knf14h2ppsgfevfwk

mjabbink commented 5 years ago

This is all good food for thought. The initial idea was Rebus but this is connected to thinking before we had app icons. Now that we do, this all makes sense.

Seeing the image above in thread on Android chrome when there is no fill or background to the icon is a bit of a problem. Especially if the screen background is busy and cuts right through an icon. We need a better solution for that platform. Is it similar to google in that we add a background shape (circle or rounded corner square) in the icon art/asset?

It also seem large in that situation as well.

peter-garvin commented 5 years ago

For Android I put it within a circle container

screen shot 2019-02-13 at 2 41 56 pm
stale[bot] commented 5 years ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

shixiedesign commented 5 years ago

Looks like we have the app icon added, but perhaps the wrong resolution. This is how the icon shows up on my iPhone Safari bookmark page: FYI @alisonjoseph @jeanservaas IMG_2023

mjabbink commented 5 years ago

Or wrong icon. It can be the color gradient version and also could be on black background @peter-garvin

shixiedesign commented 5 years ago

@alisonjoseph wanna get your eyes on this too in case it's an implementation issue. I think Pete already provided the icon files in comments above.

alisonjoseph commented 5 years ago

This issue just got lost in the backlog, will make sure it gets prioritized soon. @shixiedesign

stale[bot] commented 5 years ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

alisonjoseph commented 5 years ago

not stale

stale[bot] commented 5 years ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

stale[bot] commented 5 years ago

As there's been no activity since this issue was marked as stale, we are auto-closing it.

stale[bot] commented 5 years ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

stale[bot] commented 5 years ago

As there's been no activity since this issue was marked as stale, we are auto-closing it.

stale[bot] commented 5 years ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

mjabbink commented 4 years ago

@shixiedesign It looks like some of your studies are not using app icons but rather UI icons which have no backgrounds. The app icons have backgrounds which would change the outcome of your studies by solving all of your issues.

@peter-garvin Can we close this or are their still unresolved matters that Shixie shows above?