Emoji as favicon is misaligned in Firefox

[proactivematter]

Describe the bug
Emoji's baseline is the same as tab title, which means it is not centered vertically as with actual favicons.

To Reproduce
Steps to reproduce the behavior:
N/A

Expected behavior
Emoji should be vertically centered with text

Screenshots

Device (please complete the following information):

• OS: 14.6.1
• Browser Firefox
• Version 130.0

[victrme]

Indeed 🤔 We'll see what we can do.

[morceaudebois]

Ok so turns out this isn't fixed, it's a bit more complicated than anticipated.

I managed to fix the bug on Chrome by increasing the font-size of the emoji in the SVG, but it created a new issue on Firefox where the emoji is too big when displayed on a standard, non Retina display. Works perfectly on @2x displays though.

I wanted to reduce the size of the emoji only on Firefox using an eventListener and the min-device-pixel-ratio media query, but then things break on Chrome :(

I'll look into it more later!

[Gitoffthelawn]

Hi Tahoe! I haven't experimented with it for this specific case, but sometimes if you adjust the line-height for the element, or its parent, you will get good cross-browser results for this type of thing. You can even try setting it to zero as you experiment.

You can also set the display property appropriately and then use vertical-align.

[morceaudebois]

Hey @Gitoffthelawn! Thanks for the input 🔥

Unfortunately line-height doesn't seem to change anything in this case. I tried display: inline; with vertical-align and no luck either.

I tried to change the viewbox but it always comes back to the same problem on Firefox with standard resolution displays. I realized that I could add media queries directly to the SVG though, like this:

<link
  rel="icon"
  href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" ><text y=".9em" font-size="98">🌕</text>
  <style>
  	@media (min-resolution: 192dpi) {
  	text {
  		display: none;
  	}
  	}
  </style>
  </svg>'
  type="image/x-icon"
  id="favicon"
/>

But the media query I need to detect the resolution of the display doesn't seem to work in this context.

It's such a niche problem that there's nothing online that can be of any help, especially as the problem is only on Firefox. All the tutorials and websites I've seen that use an emoji as their favicon do it with the same syntax as it's currently integrated in Bonjourr. Might be fixable but I'm out of ideas 🤷‍♂️