starred/floccus

Fork 0

mirror of https://github.com/floccusaddon/floccus.git synced 2026-04-25 22:26:06 +03:00

[GH-ISSUE #1188] Android : Some Favicons not loading #792

New issue

Closed

opened 2026-02-25 22:38:07 +03:00 by kerem · 5 comments

kerem commented

2026-02-25 22:38:07 +03:00

Owner

Originally created by @pinpontitit on GitHub (May 31, 2022).
Original GitHub issue: https://github.com/floccusaddon/floccus/issues/1188

Which version of floccus are you using?

4.15

Sync method

{"label"=>"Google Drive"}

Which browser are you using? In case you are using the Android App, specify the Android version please.

No response

Which version of Nextcloud Bookmarks are you using? (if relevant)

No response

Which version of Nextcloud? (if relevant)

No response

What kind of WebDAV server are you using? (if relevant)

No response

Describe the Bug

In Android app, 4.14 already, and also 4.15,
some favicons won't load.

I don't know if floccus is the culprit or if it's the websites that are misconfigured ?
Because in desktop browser they work.

Sometimes I have two differents bookmarks with the same Website Domain, but different pages inside this domain, and one has the favicon and the other not.

For example "Codewars" and "Codewars completed kata" on the image below.

Google maps favicon works, but Google Mail don't.
Also Replit and Codepen never worked.

Thanks

Expected Behavior

I wish all the favicons could work.

To Reproduce

Debug log provided

I have provided a debug log file

Originally created by @pinpontitit on GitHub (May 31, 2022). Original GitHub issue: https://github.com/floccusaddon/floccus/issues/1188 ### Which version of floccus are you using? 4.15 ### Sync method {"label"=>"Google Drive"} ### Which browser are you using? In case you are using the Android App, specify the Android version please. _No response_ ### Which version of Nextcloud Bookmarks are you using? (if relevant) _No response_ ### Which version of Nextcloud? (if relevant) _No response_ ### What kind of WebDAV server are you using? (if relevant) _No response_ ### Describe the Bug In Android app, 4.14 already, and also 4.15, some favicons won't load. I don't know if floccus is the culprit or if it's the websites that are misconfigured ? Because in desktop browser they work. Sometimes I have two differents bookmarks with the same Website Domain, but different pages inside this domain, and one has the favicon and the other not. For example "Codewars" and "Codewars completed kata" on the image below. ![Screenshot_20220531-132512_floccus bookmark sync](https://user-images.githubusercontent.com/100489443/171163976-faf5e050-e9f5-4d10-9637-0c8a82106fe7.jpg) Google maps favicon works, but Google Mail don't. Also Replit and Codepen never worked. ![Screenshot_20220531-132503_floccus bookmark sync.jpg](https://user-images.githubusercontent.com/100489443/171164547-a7dbac07-fb37-48ea-8dd0-6cdd8d9dbdd2.jpg) Thanks ### Expected Behavior I wish all the favicons could work. ### To Reproduce .. ### Debug log provided - [ ] I have provided a debug log file

kerem

2026-02-25 22:38:07 +03:00

closed this issue
added the
bug
label

kerem commented

2026-02-25 22:38:07 +03:00

Author

Owner

@marcelklehr commented on GitHub (May 31, 2022):

I noticed it as well but haven't bothered to check why so far.

The algorithm is here: https://github.com/floccusaddon/floccus/blob/develop/src/lib/getFavicon.js

@marcelklehr commented on GitHub (May 31, 2022): I noticed it as well but haven't bothered to check why so far. The algorithm is here: https://github.com/floccusaddon/floccus/blob/develop/src/lib/getFavicon.js

kerem commented

2026-02-25 22:38:07 +03:00

Author

Owner

@pinpontitit commented on GitHub (May 31, 2022):

I'll check tonight if I'm able to decrypt the code 😉

@pinpontitit commented on GitHub (May 31, 2022): I'll check tonight if I'm able to decrypt the code 😉

kerem commented

2026-02-25 22:38:07 +03:00

Author

Owner

@pinpontitit commented on GitHub (May 31, 2022):

Ok I think I understand more or less how it works.
It parses the html of the website for "link" elements.
Then check if there's a rel "attribute" inside.
If the "rel" attribute contains "icon" in it,
then if the "href" is relative, or doesnt contain http, etc, it will add all those things.
etc..

I tried looking into the html source code of many websites from which the favicon weren't working in my floccus android, and also some where it works. And I coulndt find a repeating pattern that would lead me to the solution.

However, I concluded that maybe there are multiple causes to this bug and that it depends on the website:

For example Gmail website (https://mail.google.com/mail/u/0/) :

The source code doesnt have a "link" element with "rel" and "icon" on it.
Instead it has it decomposed like that:

<span class="start-tag">link</span>
<span class="attribute-name">rel</span>="<a class="attribute-value">shortcut icon</a>" 
<span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico">https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico</a>" 
<span class="attribute-name">type</span>="<a class="attribute-value">image/x-icon</a>

Is it that the parser used by getIcons() , can't read that kind of "presentation" of the "link" element ?

For "Codewars completed kata" (https://www.codewars.com/users/pinpontitit/completed) :
There's simply no "rel="icon" or "rel="shortcut icon" or whatever in this website HTML source code, so I guess it's their fault that your code can't reach a favicon.
However, browsers are able to fetch that favicon anyway. I guess they have another method to do it but which one ?
for CodePen (https://codepen.io/) that's a mistery because the source code has proper tags with "rel="shortcut icon", etc...

However I noticed that, in this website(codepen) but also in many other websites, there's a lot of time at least two "link" element with "ref" tag containing the word icon:

For example, in codepen:


<link rel="apple-touch-icon" href="[https://cpwebassets.codepen.io/assets/favicon/favicon-touch-de50acbf5d634ec6791894eba4ba9cf490f709b3d742597c6fc4b734e6492a5a.png](view-source:https://cpwebassets.codepen.io/assets/favicon/favicon-touch-de50acbf5d634ec6791894eba4ba9cf490f709b3d742597c6fc4b734e6492a5a.png)">

<link rel="apple-touch-icon" type="image/png" href="[https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png](view-source:https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png)" />

<link rel="shortcut icon" type="image/x-icon" href="[https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico](view-source:https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico)" />

<link rel="mask-icon" type="image/x-icon" href="[https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg](view-source:https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg)" color="#111" />

And there's something suprising in your code:

If I understood it right, getFavicon.js , because of the for loop, will return many links that comply with the if conditions you set.
So at the end, the function will return an array called "icons", that should contain all those href links.

I was thinking that, after, floccus would try the first link to create a favicon. Then if that first link don't work, it would try the second one, etc., until the default mdi-icon.

But I noticed in FaviconImage.vue, that it only tries the first one, at index 0:

const icons = getIcons(res.data, res.url)
     this.src = icons[0]

Is it wanted ?
Maybe it's a compatibility issue from Android or Vue with some format (.ico vs .png) or some "sizes", and testing different links would work ?

However, all the Codepen links correctly show an image in Chrome or Firefox, so why shouldn't it work in Android...

I've reached my limit of knowledge...

I wish I could test the code step by step, but I don't know how, there's so much methods that won't work to debug with vsCode.
I also don't know how to provide the "html" data to the function. I always got errors if I paste it as a string.
Etc.

@pinpontitit commented on GitHub (May 31, 2022): Ok I think I understand more or less how it works. It parses the html of the website for "link" elements. Then check if there's a rel "attribute" inside. If the "rel" attribute contains "icon" in it, then if the "href" is relative, or doesnt contain http, etc, it will add all those things. etc.. I tried looking into the html source code of many websites from which the favicon weren't working in my floccus android, and also some where it works. And I coulndt find a repeating pattern that would lead me to the solution. However, I concluded that maybe there are multiple causes to this bug and that it depends on the website: - For example Gmail website (https://mail.google.com/mail/u/0/) : The source code doesnt have a "link" element with "rel" and "icon" on it. Instead it has it decomposed like that: ``` link rel="<a class="attribute-value">shortcut icon</a>" href="<a class="attribute-value" href="view-source:https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico">https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico</a>" type="<a class="attribute-value">image/x-icon</a> ``` Is it that the parser used by _getIcons()_ , can't read that kind of "presentation" of the "link" element ? - For "Codewars completed kata" (https://www.codewars.com/users/pinpontitit/completed) : There's simply no "rel="icon" or "rel="shortcut icon" or whatever in this website HTML source code, so I guess it's their fault that your code can't reach a favicon. However, browsers are able to fetch that favicon anyway. I guess they have another method to do it but which one ? - for CodePen (https://codepen.io/) that's a mistery because the source code has proper <link> tags with "rel="shortcut icon", etc... However I noticed that, in this website(codepen) but also in many other websites, there's a lot of time at least two "link" element with "ref" tag containing the word icon: For example, in codepen: ``` <link rel="apple-touch-icon" href="[https://cpwebassets.codepen.io/assets/favicon/favicon-touch-de50acbf5d634ec6791894eba4ba9cf490f709b3d742597c6fc4b734e6492a5a.png](view-source:https://cpwebassets.codepen.io/assets/favicon/favicon-touch-de50acbf5d634ec6791894eba4ba9cf490f709b3d742597c6fc4b734e6492a5a.png)"> <link rel="apple-touch-icon" type="image/png" href="[https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png](view-source:https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png)" /> <link rel="shortcut icon" type="image/x-icon" href="[https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico](view-source:https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico)" /> <link rel="mask-icon" type="image/x-icon" href="[https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg](view-source:https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg)" color="#111" /> ``` And there's something suprising in your code: If I understood it right, _getFavicon.js_ , because of the for loop, will return many links that comply with the if conditions you set. So at the end, the function will return an array called "icons", that should contain all those href links. I was thinking that, after, floccus would try the first link to create a favicon. Then if that first link don't work, it would try the second one, etc., until the default mdi-icon. But I noticed in _FaviconImage.vue_, that it only tries the first one, at index 0: ``` const icons = getIcons(res.data, res.url) this.src = icons[0] ``` Is it wanted ? Maybe it's a compatibility issue from Android or Vue with some format (.ico vs .png) or some "sizes", and testing different links would work ? However, all the Codepen links correctly show an image in Chrome or Firefox, so why shouldn't it work in Android... I've reached my limit of knowledge... I wish I could test the code step by step, but I don't know how, there's so much methods that won't work to debug with vsCode. I also don't know how to provide the "html" data to the function. I always got errors if I paste it as a string. Etc.

kerem commented

2026-02-25 22:38:07 +03:00

Author

Owner

@marcelklehr commented on GitHub (Jun 8, 2022):

I've added a /favicon.ico fallback for cases where the link element is missing

@marcelklehr commented on GitHub (Jun 8, 2022): I've added a /favicon.ico fallback for cases where the link element is missing

kerem commented

2026-02-25 22:38:07 +03:00

Author

Owner

@github-actions[bot] commented on GitHub (Jun 9, 2023):

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions[bot] commented on GitHub (Jun 9, 2023): This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/floccus#792

No description provided.

Rows
Columns