mui-toolpad icon indicating copy to clipboard operation
mui-toolpad copied to clipboard

Published 20 hours ago • verified publisher icon mui

Update favicon icon on Toolpad

Open prakhargupta1 opened this issue 2 years ago • 3 comments

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

prakhargupta1 avatar Aug 17 '22 15:08 prakhargupta1

Based on my discussion with @gerdadesign, we will do it as part of the larger UI overhaul. I'll remove it from the current cycle.

prakhargupta1 avatar Aug 30 '22 08:08 prakhargupta1

Is this issue also about the favicon? ⬇️

Screenshot 2022-08-30 at 11 19 29

We could see the toolpad logo there.

oliviertassinari avatar Aug 30 '22 09:08 oliviertassinari

Yes, we could update the logo in favicon. The task was about replacing Home icon MUI Toolpad CE with

Image

Some questions that came across:

  • Is it ok to remove CE?
  • The blue color in Toolpad logo is different from the blue color being used inside Toolpad currently.

Then we decided to do it later with the overhaul.

prakhargupta1 avatar Aug 30 '22 10:08 prakhargupta1

Is there anything that blocks this task? @bharatkashyap

Here is the link to the bigger task that we'll tackle separately: https://github.com/mui/mui-toolpad/issues/873

prakhargupta1 avatar Sep 06 '22 04:09 prakhargupta1

In case of https://mui.com/x/, the favicon is the MUI logo (which is the current state for Toolpad as well). Do we need to change it? My personal opinion would be to not change this.

In case we need to, I would need to have the correct .ico file to replace the existing one.

bharatkashyap avatar Sep 06 '22 05:09 bharatkashyap

Somehow, it is coming blank for me. Also checked Firefox and Incognito. Screenshot 2022-09-06 at 11 45 51 AM

prakhargupta1 avatar Sep 06 '22 06:09 prakhargupta1

Yes, I added a blank placeholder icon a while ago to avoid errors in the integration tests

Janpot avatar Sep 06 '22 07:09 Janpot

In case of https://mui.com/x/, the favicon is the MUI logo (which is the current state for Toolpad as well). Do we need to change it?

@bharatkashyap For the marketing page, as a developer, I think that I would expect to see the MUI company logo, e.g. https://www.hashicorp.com/products/consul. But I'm not sure, maybe the logo of the open source project would make more sense, like https://k6.io/.

For the documentation pages, as a developer, I think that I would expect to see the logo of the related open-source project. e.g. https://www.consul.io/docs.

In the end, it's more of a question for the design department. For the application itself, I assume the Toolpad logo? Or should it be the MUI one?

oliviertassinari avatar Sep 06 '22 10:09 oliviertassinari

For the application itself, I assume the Toolpad logo? Or should it be the MUI one?

I think the Toolpad logo makes the most sense here

bharatkashyap avatar Sep 06 '22 12:09 bharatkashyap

Confirming we discussed using the Toolpad logo as the favicon for toolpad itself. Something like: Tab (1)

gerdadesign avatar Sep 07 '22 16:09 gerdadesign

I'm reopening, #911 doesn't:

  1. respect the scale of the logo, it's distorted
  2. have the right transparency, it shouldn't have one
Screenshot 2022-09-11 at 19 02 25

compare with https://github.com/mui/mui-toolpad/issues/812#issuecomment-1239613724 or https://www.figma.com/file/fNowz3HeGrUJshzjUvvY1e/Toolpad-landing-page?node-id=1140%3A60229.

I think it would be great to wait for Gerda review on pull requests for the next design related changes.

oliviertassinari avatar Sep 11 '22 17:09 oliviertassinari

Screenshot 2022-09-12 at 11 46 43 AM

The difference can also be seen here. Toolpad icon (left), Notion space icon (right)

prakhargupta1 avatar Sep 12 '22 06:09 prakhargupta1

Thanks for catching that @oliviertassinari! @bharatkashyap See if these files work better for you. I had to do a zip since github doesn't support ico.

MUIToolpadFavicon_favicon_io.zip includes:

  • PNG @ 512px, 192px, 180px, 48px, 32px, 16px
  • ICO @ 48px
  • site.webmanifest

For reference, I created a square frame in figma, added the toolpad logo, and exported the png. Then used https://favicon.io/favicon-converter/ for the conversion + all sizes (that's why that webmanifest file is in there). This is probably overkill, but just in case you need it, here are the installation instructions from the site.

gerdadesign avatar Sep 12 '22 13:09 gerdadesign

One day, we will be able to use SVG for icons https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/. The blog post has interesting comments on making the icon look crisp and a funny story on how we got the favicon in IE 5, asking a junior PM, so smart! 😅

oliviertassinari avatar Sep 12 '22 13:09 oliviertassinari

a funny story on how we got the favicon in IE 5, asking a junior PM, so smart! 😅

A funny thing about the history of the favicon: Internet Explorer was the first browser to support them and they were snuck in at the 11th hour by a developer named Bharat Shyam:

Unexpected surprise to find another Bharat in the creation story of the .ico format :D

bharatkashyap avatar Sep 13 '22 06:09 bharatkashyap

Thanks for catching that @oliviertassinari! @bharatkashyap See if these files work better for you. I had to do a zip since github doesn't support ico.

MUIToolpadFavicon_favicon_io.zip includes:

  • PNG @ 512px, 192px, 180px, 48px, 32px, 16px
  • ICO @ 48px
  • site.webmanifest

For reference, I created a square frame in figma, added the toolpad logo, and exported the png. Then used https://favicon.io/favicon-converter/ for the conversion + all sizes (that's why that webmanifest file is in there). This is probably overkill, but just in case you need it, here are the installation instructions from the site.

Thanks @gerdadesign! This was extremely helpful 😄 I’ve opened #984 to fix this.

bharatkashyap avatar Sep 13 '22 06:09 bharatkashyap