1933052 - Root icon is preferred to associated icon when latter size doesn't fit well

Status: NEW

(Firefox :: Bookmarks & History, enhancement, P3)

Description

[Justin]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Steps to reproduce:

Hi, I have recently observed that bookmark favicons don't stick, for pages located within a subdirectory on a domain! Yikes

Steps to Reproduce: See my SuperUser post -

• https://superuser.com/questions/1862447/firefox-favicons-for-subdirs-not-working

1. Cleared out favicons present (favicons.sqlite)

2. Open my justinreina.com bookmark in Firefox to load its favicon

3. Open the justinreina.com\lifebook bookmark in Firefox to load its different favicon!

Success?

4. Nope; if you click on the justinreina.com bookmark next, it will RESET BOTH FAVICONS to the justinreina.com favicon 😫

Actual results:

Both bookmarks show the same favicon, while the page tabs show the correct & different favicons

Expected results:

Bookmark favicons should remain set! Why are they changing for Firefox? See the detail of my SuperUser post above, where I illustrate how Chrome & Firefox do as expected

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Bookmarks & History' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Marco Bonardo [:mak]]

In general icons in tabs can and will differ from icons on bookmarks, because bookmarks can pick from a larger set of icons and it will try to pick one that is more adapt for the current resolution. The tab instead works with what is on the page.
So the answer to this question is specific to each site.

I cannot login, but going to https://justinreina.com/lifebook/ I see in the network console that it is trying to load https://justinreina.com/lifebook/icons/Lifebook.ico that is a 404 not found error?
The root favicon only works on the root domain, e.g. www.domain.com/favicon.ico, the browser doesn't know about icons at www.domain.com/path/favicon.ico.
Off-hand it looks like a mistake on the website, the <link rel="icon"> must be corrected, or the icon put in the right subfolder.

Comment 3

[Justin]

Excellent feedback Marco, thank you! I have granted you access and shared the login information by email

Your feedback coupled with the SuperUser comments gives me leverage, back next with a response. Thank you guys

Kind Regards,
Justin

Comment 4

[lucasli]

I also encountered the same problem
https://brg365.com/futebol/rb-bragantino-conquista-o-titulo-da-copa-aspirantes-do-brasil-e-encerra-time-sub-23/

Comment 5

[Marco Bonardo [:mak]]

Afaict, https://justinreina.com/lifebook/icons/Lifebook.ico is a 256x256 ico file, it doesn't have other frames.
https://justinreina.com/favicon.ico on the other side has multiple frames at 16x16, 32x32, 48x48, 57x57... and so on
When looking for a 16px favicon, supposing you're on an hi dpi screen (so the icon must be larger than 16x16 to be shown as 16px), bookmarks will look for a 32px icon. The root favicon (that ideally should be valid for most sub pages) perfectly matches that, while the page favicon is really large and by downscaling it, it may become unrecognizable.

Providing a better favicon (either svg or multi-frame or multiple png) that can adapt to normal favicon sizes would likely help.

We could probably prefer the associated icon to the root icon, though the visual result would not be the best, we'd end up showing blurry or unrecognizable icons more often.
We should think about this, but there's no perfect solution, each choice has its own downsides.

(In reply to lucasli from comment #4)

I also encountered the same problem
https://brg365.com/futebol/rb-bragantino-conquista-o-titulo-da-copa-aspirantes-do-brasil-e-encerra-time-sub-23/

This seems to be working fine for me?

Comment 6

[Justin]

Marco, yes! It works now thank you, I had been using the wrong favicon last and things got sticky. 

**Issue:**

- In trying to update the ''lifebook' favicon; I had been updating the wrong file! 🙄

    - Was debuggins with: _justinreina.com/lifebook/favicon.ico_

- But MediaWiki uses a favicon specified in their _LocalSetings.php_ file instead!

`
$wgFavicon = "$wgResourceBasePath/icons/Lifebook.ico";``
` 

Where this lifebook.ico was a single 256x256 ico file, oops!

**Challenge:**

- Cache updates were delayed providing false positives (e.g. sometimes it would work for a bit, or not at all until reboot)

So from this all, and your feedback - 

**Solution:**

- Create layered favicon [(GIMP)](https://slions.net/threads/create-an-ico-file-using-gimp.3/) & Validate [(Icon Check)](https://redketchup.io/icon-editor#google_vignette)

    - Matching the layers of my justinreina.com/favicon.ico, for now - 16/32/48/57/70/72/96/114/120/128/144/152/167/180/196/228/270/310

- Update LocalSettings.php & hosted favicon files:

Site Favicon

$wgFavicon = "$wgResourceBasePath/icons/favicon.ico";

- Placing this new, correct favicon featuring all layers

    - Placing at lifebook/favicon.ico & icons/favicon.ico for this test

- Uninstall Firefox, clearing _Program Files\_, _Program Files (x86)\_, _ProgramData\_ & _AppData\_ for Mozilla content

- Install Firefox, login to Firefox and open these toolbar links for justinreina.com & justinreina.com/lifebook

That was sticky, and I got to solution with your feedback Marco - thank you so much!

Here was my GIMP file, if useful [_(Lifebook.XCF)_](https://drive.google.com/file/d/1iq1SjZ4xiltT3SmFnPNPZdSjgZxBHAP6/view?usp=sharing)

Comment 7

[Justin]

Marco, yes! It works now thank you, I had been using the wrong favicon last and things got sticky.

 

Issue:

• In trying to update the ''lifebook' favicon; I had been updating the wrong file! 🙄

  • Was debugging with: justinreina.com/lifebook/favicon.ico

• But MediaWiki uses a favicon specified in their LocalSetings.php file instead!

  • $wgFavicon = "$wgResourceBasePath/icons/Lifebook.ico";

 

Where this icons/Lifebook.ico was a single 256x256 ico file, oops!

 

Challenge:

• Cache updates were delayed providing false positives (e.g. sometimes it would work for a bit, or not at all until reboot)

 

So from this all, and your feedback -

 

Solution:

1. Create layered favicon (GIMP) & Validate (Icon Check)

   • Matching the layers of my justinreina.com/favicon.ico, for now - 16/32/48/57/70/72/96/114/120/128/144/152/167/180/196/228/270/310

2. Update LocalSettings.php & hosted favicon files:

   • $wgFavicon = "$wgResourceBasePath/icons/favicon.ico";

3. Placing this new, correct favicon featuring all layers

   • Placing at lifebook/favicon.ico & icons/favicon.ico for this test

4. Uninstall Firefox, clearing _Program Files_, _Program Files (x86)_, _ProgramData_ & _AppData_ for Mozilla content

5. Install Firefox, login to Firefox and open these toolbar links for justinreina.com & justinreina.com/lifebook

 

That was sticky, and I got to solution with your feedback Marco - thank you so much!

 

Here was the GIMP icon file I used here - (Lifebook.XCF) 😎