Fenix: FNX3-16902 ⁃ [Bug] favicons should have smaller corner radius

[myakura]

Steps to reproduce

1. open sites
2. look at the selected tab in the "open tabs" section in the home view

Expected behavior

favicons have slightly smaller corner radius than the ones of outer box so that outer borders or inner negative space do not make thicker edges.

I cannot explain it well... these article should help understanding what I mean:

• Public Service Announcement: Careful With Your Nested Border-Radii | CSS-Tricks
  https://css-tricks.com/public-service-announcement-careful-with-your-nested-border-radii/
• Getting Inner Border Radius Just Right - Joshua Hibbert
  https://joshnh.com/weblog/getting-inner-border-radius-just-right/

Actual behavior

it seems favicons have the same or larger corner radius.

Device information

• Android device: Xiaomi Mi A1
• Fenix version: 1.0.1923

[ekager]

I agree this looks a bit strange. For reference here I have made it favIconBorderRadiusInPx cut in half to 4.

[myakura]

@ekager that looks great!

[mheubusch]

@AmyYLee can you review and approve this approach? If you are ok with it can you remove the Needs UX label and add the Ready for Eng label?

[AmyYLee]

@AmyYLee can you review and approve this approach? If you are ok with it can you remove the Needs UX label and add the Ready for Eng label?

This looks good to me. @mheubusch