search

mozilla-mobile / firefox-ios

Firefox for iOS
Mozilla Public License 2.0
12.26k stars 2.95k forks source link

Fav Icons Update #20971

Open data-sync-user opened 4 months ago

data-sync-user commented 4 months ago

┆Issue is synchronized with this Jira Task

data-sync-user commented 4 months ago

➤ Crystal Wong commented:

Hi, here is the updated Twitter and Facebook logo.

!x-logo-128.png|width=128,height=128,alt="x-logo-128.png"!

!facebook-logo-128.png|width=128,height=128,alt="facebook-logo-128.png"!

data-sync-user commented 4 months ago

➤ Crystal Wong commented:

And here is the Amex one, though I’m not 100% sure if this is the right logo. It says in their brand guidelines ( https://secure.americanexpress.com.bh/merchants/website-assets/downloads/American_Express_Guidelines.pdf ) to use this one for small space digital.

!amex-logo-128.png|width=128,height=128,alt="amex-logo-128.png"!

data-sync-user commented 4 months ago

➤ ih-codes commented:

Thanks Crystal Wong!

Regarding the X logo… when I let the app pull the favicon from x.com ( http://x.com ) (before adding the new asset), it displays as a white X on the black background. Maybe we should invert the X to white…? Same color shows in a desktop tab favicon as well.

Example:

!Screenshot 2024-07-12 at 2.35.30 PM.png|width=88,height=51,alt="Screenshot 2024-07-12 at 2.35.30 PM.png"!

!Simulator Screenshot - iPhone 15 - 2024-07-12 at 14.33.11.png|width=1179,height=2556,alt="Simulator Screenshot - iPhone 15 - 2024-07-12 at 14.33.11.png"!

data-sync-user commented 4 months ago

➤ Crystal Wong commented:

ih-codes Oooh yes good call. Here’s the white version:

!x-logo-128 (00c15668-e4e0-43ff-ada6-07dd36e69182).png|width=128,height=128,alt="x-logo-128.png"!

Will you manually apply the black bg or do you need it in the image?

data-sync-user commented 4 months ago

➤ ih-codes commented:

Crystal Wong Awesome thanks! I can apply the background color separately in code. I assume the color is total black? #000000

data-sync-user commented 4 months ago

➤ Crystal Wong commented:

ih-codes Yes #000000! Thank you 🙂

data-sync-user commented 4 months ago

➤ ih-codes commented:

I’m sorry to bug you again with this Crystal Wong , but to save you a long winded explanation… I think what I need for Twitter is a thicker white X, a black background, in roughly the scale of this image I mocked up below: 😅

!twitter-com.png|width=31,height=31,alt="twitter-com.png"!

Not sure if you can grab a thick version of the X from here? https://www.figma.com/community/file/1268907691626490308/x-free-svg-logo-elon-musk-x-com ( https://www.figma.com/community/file/1268907691626490308/x-free-svg-logo-elon-musk-x-com ) Seems like Musk has changed it from thin to thick, then back again. 🤔 Long story short, the favicon I’m trying to match from Twitter/X appears to be thicker!

data-sync-user commented 4 months ago

➤ ih-codes commented:

P.S. Don’t worry about this. I think there are lots of icons that need a proper update which is going to happen sometime down the road. I’ll finagle something together for now.

data-sync-user commented 4 months ago

➤ Crystal Wong commented:

Hi ih-codes, sorry I just got around to seeing this! Do you still need the updated X asset?

data-sync-user commented 4 months ago

➤ ih-codes commented:

Crystal Wong I made something that I think should be sufficient, but I’ll let you assess! (attached below)

!twitter-com-example.png|width=31,height=31,alt="twitter-com-example.png"!

data-sync-user commented 4 months ago

➤ Crystal Wong commented:

ih-codes X-wise looks great! Very small nit - if it could be perfectly centereed (vertically)?

data-sync-user commented 4 months ago

➤ ih-codes commented:

Crystal Wong I might need your help with that – I was just trying to resize the single layer favicon PNG I pulled off X and all I have on my work laptop in terms of image editing software is Krita which I barely know how to use. 😅 I think the edges are a little blurry which gives the appearance of it not being aligned. I’m not sure if you’d be able to add a solid white line to the bottom of the X and/or be able to nudge it down so it looks more centered?

data-sync-user commented 4 months ago

➤ ih-codes commented:

FYI This has been merged for now, will make a separate PR if we want further refinements in the future.

data-sync-user commented 4 months ago

➤ Diana Andreea Barladeanu commented:

Validated on v129 (44023), with iPhone 15 (17.5).

!ImportedPhoto.744017755.553776.jpeg|width=1179,height=2556,alt="ImportedPhoto.744017755.553776.jpeg"!