Replace frontend favicon with yellow background version

[zackkrida]

Problem

After discussing with @panchovm about the current favicon, we feel that the dark icon on a yellow background better represents Openverse. The SVG favicon currently used should be replaced with this SVG:

<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="16" height="16" rx="2" fill="#FFE033" />
  <g clip-path="url(#clip0_4477_12938)">
    <path
      d="M10.5693 7.57713C11.5568 7.57713 12.3574 6.77636 12.3574 5.78857C12.3574 4.80077 11.5568 4 10.5693 4C9.58179 4 8.78125 4.80077 8.78125 5.78857C8.78125 6.77636 9.58179 7.57713 10.5693 7.57713Z"
      fill="#30272E" />
    <path
      d="M3.59961 5.78857C3.59961 6.77278 4.39368 7.57713 5.37634 7.57713V4C4.39368 4 3.59961 4.79936 3.59961 5.78857Z"
      fill="#30272E" />
    <path
      d="M6.19043 5.78857C6.19043 6.77278 6.9845 7.57713 7.96716 7.57713V4C6.98946 4 6.19043 4.79936 6.19043 5.78857Z"
      fill="#30272E" />
    <path
      d="M10.5693 11.999C11.5568 11.999 12.3574 11.1982 12.3574 10.2104C12.3574 9.22264 11.5568 8.42188 10.5693 8.42188C9.58179 8.42188 8.78125 9.22264 8.78125 10.2104C8.78125 11.1982 9.58179 11.999 10.5693 11.999Z"
      fill="#30272E" />
    <path
      d="M6.19043 10.2074C6.19043 11.1927 6.9845 11.998 7.96716 11.998V8.42188C6.98946 8.42188 6.19043 9.22212 6.19043 10.2074Z"
      fill="#30272E" />
    <path
      d="M3.59961 10.2074C3.59961 11.1977 4.39368 11.998 5.37634 11.998V8.42188C4.39368 8.42188 3.59961 9.22212 3.59961 10.2074Z"
      fill="#30272E" />
  </g>
  <defs>
    <clipPath id="clip0_4477_12938">
      <rect width="8.8" height="8" fill="white" transform="translate(3.59961 4)" />
    </clipPath>
  </defs>
</svg>

Description

Alternatives

Additional context

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[dhruvkb]

This is great. I would like to expand the issue scope to cover the favicon used by the following:

• Sphinx docs
• API docs
• Storybook

Whether to use the same favicon as the prod site or a variation to depict their documentation nature is best left to the expert, @panchovm.

[fcoveram]

Thanks for the suggestion @dhruvkb.

Adding more sites to this update makes full sense. To the list mentioned I would like to add the Staging environment.

Openverse symbol allows many color mixes, and as @zackkrida hinted, the sites where you can interact with the search engine must lean on the brand. In that sense, I propose the following favicons.

The symbol's white version is the second most reachable, and that is why I suggest it for Staging. The pink version for Storybook would look consistent with Storybook logo and I like that effect. And finally, Sphinx has the new WordPress blueberry for background color as the documentation lives in a wordpress domain.

What do you think?

[dhruvkb]

I like the idea of differentiating with the color! We could technically merge the last three as they're all just different flavours of one thing: documentation.

[fcoveram]

Awesome ✨

The dark color of Production, Staging and API is Dark Charcoal #30272E, while blueberry in Sphinx is #3858E9.

[dhruvkb]

Is blueberry becoming a new brand color? It's a really beautiful shade of blue 👌!

[fcoveram]

Yes! It was introduced in News redesign. The brand is shifting to that modern blue.

[zackkrida]

I LOVE the idea of differentiating by color. The idea of a single color for documentation makes sense to me too, and the blue has a very 'tech-ey' feel that I like a lot for that purpose.

[dhruvkb]

@panchovm is this ready for dev work? Looks to me that it's ready to go!

[fcoveram]

Yes! Ready for dev work. Let me know if any other asset is needed.

[dhruvkb]

@panchovm can these assets be included in Openverse Design Library @ Figma? Currently I don't know where they are located.

[fcoveram]

Sure. Here is the link to the Brand & Styles page of Design Library. I am also attaching the SVG files, just in case.

Openverse favicons.zip

[dhruvkb]

For the contributor who works on it, favicon support is a complex topic with different versions of different browsers on different platforms supporting different formats to different extents.

• Can I Use?
  • "Definitive" Guide (possibly outdated)
• RealFaviconGenerator
  • Compatibility chart
• Case for SVG

[HillaryWebb-coder]

Hi, I'm new to open source contributions and looking for my first contributions, Could i give this issue a shot?

[zackkrida]

Hi @HillaryWebb-coder, you can definitely work on this if you like! Sorry for the delay in response.

[HillaryWebb-coder]

Thanks

[AliTechGeek52]

Hey @HillaryWebb-coder Are you working on this issue or can I work on this issue if you are not working on it ?

[dhruvkb]

@AliTechGeek52 you can go ahead and work on this.