Create a favicon for 100 Automations

[Olivia-Chiong]

Overview

We need to create a favicon for 100 Automations so our website is recognizable in browsers.

Action Items

• Create a standard favicon
• Review with team

Resources/Instructions

How to design a favicon

[susantangux]

Different favicon options w/ different branding colors and background shapes. Included Hack for LA logo for reference.

[susantangux]

I personally prefer options 16-19. I like the fact that the background is rotated like Hack for LA to show that 100 Automations is part of the H4LA family. Option 15 is the same concept but I don't like the color combination as much.

[Olivia-Chiong]

We like 16, 18 and 19. @ExperimentsInHonesty please give your comments

[Olivia-Chiong]

@susantangux could you mock these up into a browser window tab like below in both light and dark mode please.

[susantangux]

4 Favicon Options in Light & Dark Mode w/ 2 tab states (active & inactive) within light and dark mode:

Favicon 19 is problematic due to the white background blending in when tab is active in light mode

Because 16, 18, and 19 have their backgrounds rotated within the 16x16 space for favicon, the '100' icon is smaller than if we don't rotate the background, which is Option 11 for your reference and comparison.

[Olivia-Chiong]

@susantangux please edit with the following changes

1. Orange rotated background with single white gear
2. No background with orange gear
3. No background with blue and orange gear

[Olivia-Chiong]

@susantangux just saw the new options you posted in Figma. Could you do option 6/13 without the background so we can see how it looks?

[susantangux]

Sure! Will do!

[susantangux]

5 Options:

[NivenPrasad]

Votes on 02.24:
26 - 4
27 - 2
29 - 4
18 - At a larger size (dynamic sizing pending)
@NivenPrasad to set up Usability Hub for 26, 27, and 29

[susantangux]

Updated Favicon 29

[NivenPrasad]

Usability Hub test here: https://app.usabilityhub.com/do/24089a86036a/104b

[susantangux]

Please review this image for Favicon testing. Once approved, I'll proceed with the other 2 options.

[susantangux]

Updated Images for Favicon Usability Tests:

[henlatourrette]

With only 24 responses from the usability test, we've decided to ask for more responses leaving only the alternatives number 1 and 3 as options. @Olivia-Chiong is doing the update and will publish it again in the general channel for more responses.

[henlatourrette]

We've decided to go with option 3 (the two gears). @akibrhast will upload it to the site.

[henlatourrette]

We're starting with a 32 pixel square and investigating the options for larger sizes.