IMHO there’s something off with the colors. The icon simply doesn’t remind of Firefox. I think it is because in the original logo the “fox” is orange on a blue globe
Often there are very strict rules for logo use (just look at Ubuntu) and it would be good to reach out to trademark-permissions@mozilla.com to make sure we respect their brand.
@eaglers pointed out that the iOS and Android icons use a dark background and suggested trying the same one here with the normal Firefox icon in front of it:
One thing I’ve noticed is that the darker version with the brighter highlight looks brilliant when I view the mockups on my phone but not as good when I look on my laptop. I thought the sky blue version looked pretty good on my laptop but a bit naff when I look at this thread in my phone.
I thought the sky blue version looked pretty good on my laptop but a bit naff when I look at this thread in my phone
I had the same impression. Also @madsrh mockup looks good, but less crisp than others, but maybe it is just because it does not have the same fold effect, or because it’s a screenshoot
How about the dark shade but with a larger logo, so the icon doesn’t look so dark on the launcher?
EDIT: I’ve tried that on my laptop and my phone and I think it looks all right.
I also like the idea of the flat orange glyph on the blue background. I note that the Firefox style guide also describes the glyph as the “one colour icon”, so the danger is they only envisaged it being used in a monochrome design where maximum simplicity is required. When they use it themselves it’s like that. By using both colours we’re arguably inching towards recreating a flat version of the full logo, which is what we’d probably do if we had free rein To make it crisp we might need a drop shadow and possibly a top edge highlight on the fox to make it stand out on the blue, and I guess then we’re just a small step away from sticking a blue circle behind the fox That would be lovely if done well (a “paper” version of the full Firefox logo) but Mozilla might say the glyph is for when you can’t have blue and orange, use the normal icon if you want a full colour version that emphasises “this is Firefox”, etc…
How about a blue that has a bit of a gradient, so it’s darker behind the yellow and lighter behind the red for maximum contrast at all points of the logo:
EDIT: Same gradient approach with two shades of Suru grey:
Okay, I’m still chipping away at the full logo on a squircle. I’m currently using Suru grey but the refinements could be used for any colour.
What I’ve been doing is making very microscopic changes to the svg to optimise it for 48x48. I don’t believe these are trademark violations because they’re sub-pixel, and I think you could introduce equally big changes if you exported the svg from a different app that averaged the pixels out slightly differently. There’s also a slight drop shadow to make the yellow tail more distinct and the opposite on the other side to make the red edge sharper.
I like Suru yellow behind the logo, but it helps to have a fold to lighten the top right corner so the tail doesn’t melt into it:
EDIT: This might look a bit more balanced if the fold cuts the squircle in half:
EDIT #2: You know what, lol… I rejected white at the start because it made the scaled logo look ugly (pixellated) around the edges. But when I revisit it now with the newly scaled logo, I think it’s definitely an option:
In fact, if someone held a gun to my head and said I had to choose one tonight, I’d say white.
Yes, I’ll try non-diagonal folds tonight in yellow and orange. @madsrh is your preference for the orange glyph on the blue background? If so I can do svgs of that too