[GH-ISSUE #210] Favicon notification badge does not render correctly #140

Closed
opened 2026-03-15 12:49:03 +03:00 by kerem · 14 comments
Owner

Originally created by @federicobond on GitHub (Nov 23, 2023).
Original GitHub issue: https://github.com/axllent/mailpit/issues/210

I have some code laying around that implements this well, if you are interested I can submit a pull request for you to evaluate.

Captura de pantalla 2023-11-23 a la(s) 13 53 54
Originally created by @federicobond on GitHub (Nov 23, 2023). Original GitHub issue: https://github.com/axllent/mailpit/issues/210 I have some code laying around that implements this well, if you are interested I can submit a pull request for you to evaluate. <img width="98" alt="Captura de pantalla 2023-11-23 a la(s) 13 53 54" src="https://github.com/axllent/mailpit/assets/138426/5c1ef784-5d55-4447-92bf-ac365684437f">
kerem closed this issue 2026-03-15 12:49:08 +03:00
Author
Owner

@axllent commented on GitHub (Nov 23, 2023):

Yes thank you, I'd be very interested to see what you have @federicobond. The library I'm currently using is fairly old, but was the best one I could find at the time that didn't suffer from bad performance, and which (I thought anyway) rendered ok on all major browsers. Out of curiosity, what browser and platform are you using?

<!-- gh-comment-id:1824818582 --> @axllent commented on GitHub (Nov 23, 2023): Yes thank you, I'd be very interested to see what you have @federicobond. The library I'm currently using is fairly old, but was the best one I could find at the time that didn't suffer from bad performance, and which (I thought anyway) rendered ok on all major browsers. Out of curiosity, what browser and platform are you using?
Author
Owner

@federicobond commented on GitHub (Nov 23, 2023):

That's Firefox on MacOS Sonoma 14.1. I'll look for some time these days to put something together.

<!-- gh-comment-id:1824831652 --> @federicobond commented on GitHub (Nov 23, 2023): That's Firefox on MacOS Sonoma 14.1. I'll look for some time these days to put something together.
Author
Owner

@federicobond commented on GitHub (Nov 23, 2023):

Thanks for the quick answer!

<!-- gh-comment-id:1824831851 --> @federicobond commented on GitHub (Nov 23, 2023): Thanks for the quick answer!
Author
Owner

@axllent commented on GitHub (Nov 24, 2023):

Thank you too. I realise that implementing a PR may be the most difficult thing for you, so even if you could point me in the direction of a better library that would be great (ie: I can implement it myself).

<!-- gh-comment-id:1825016945 --> @axllent commented on GitHub (Nov 24, 2023): Thank you too. I realise that implementing a PR may be the most difficult thing for you, so even if you could point me in the direction of a better library that would be great (ie: I can implement it myself).
Author
Owner

@federicobond commented on GitHub (Nov 24, 2023):

Sure, I put together a quick demo here: https://github.com/federicobond/badgicon

Feel free to copy and paste the code there and adapt it to your needs, I release every right to you.

<!-- gh-comment-id:1825792423 --> @federicobond commented on GitHub (Nov 24, 2023): Sure, I put together a quick demo here: https://github.com/federicobond/badgicon Feel free to copy and paste the code there and adapt it to your needs, I release every right to you.
Author
Owner

@axllent commented on GitHub (Nov 25, 2023):

Thank you for this, I will definitely have a good look when I get some time (next weekend as I am away for the next 5 days).

In the meantime, could you please explain to me what the advantage is of your library vs: Tinycon (the one Mailpit uses)? I also had a quick play in my browser and has to bump the font size from 28 to 38 to get it similar to Mailpit's one as 28 was just too small to read, so I am wondering if it is just a font selection issue (ie: you don't have Arial installed).

<!-- gh-comment-id:1826216906 --> @axllent commented on GitHub (Nov 25, 2023): Thank you for this, I will definitely have a good look when I get some time (next weekend as I am away for the next 5 days). In the meantime, could you please explain to me what the advantage is of your library vs: Tinycon (the one Mailpit uses)? I also had a quick play in my browser and has to bump the font size from 28 to 38 to get it similar to Mailpit's one as 28 was just too small to read, so I am wondering if it is just a font selection issue (ie: you don't have Arial installed).
Author
Owner

@axllent commented on GitHub (Dec 1, 2023):

I have made a small change to the existing implementation to add a fallback font (sans-serif) to see if this helps your problem (I suspect you simply don't have Arial installed). This change has been released in v1.10.2.

Whilst I am still open to implementing your solution, I would like to know what the advantage is of your implementation vs: the tinyicon library I'm using before I do so, and in order to use yours (or a variation of yours) I would also require your project to have a valid LICENSE file in the repo (eg: something like this). Unfortunately just a comment in an issue stating one can use code does not legally make it open source ;-)

<!-- gh-comment-id:1835369473 --> @axllent commented on GitHub (Dec 1, 2023): I have made a small change to the existing implementation to add a fallback font (sans-serif) to see if this helps your problem (I suspect you simply don't have Arial installed). This change has been released in v1.10.2. Whilst I am still open to implementing your solution, I would like to know what the advantage is of your implementation vs: the tinyicon library I'm using before I do so, and in order to use yours (or a variation of yours) I would also require your project to have a valid LICENSE file in the repo (eg: something like [this](https://github.com/axllent/mailpit/blob/develop/LICENSE)). Unfortunately just a comment in an issue stating one can use code does not legally make it open source ;-)
Author
Owner

@parth391 commented on GitHub (Dec 2, 2023):

Still having the same problem

Mailpit Version: 1.10.2
Firefox Version: 120.0.1 (64-bit)
MacOS Version: 14.1.2 (23B92)

Screenshot 2023-12-02 at 11 32 56 AM
<!-- gh-comment-id:1837055458 --> @parth391 commented on GitHub (Dec 2, 2023): Still having the same problem Mailpit Version: 1.10.2 Firefox Version: 120.0.1 (64-bit) MacOS Version: 14.1.2 (23B92) <img width="261" alt="Screenshot 2023-12-02 at 11 32 56 AM" src="https://github.com/axllent/mailpit/assets/4966579/ff97f4b6-c7d4-47c0-8f3a-ad7f502820ec">
Author
Owner

@axllent commented on GitHub (Dec 2, 2023):

@parth391 Thanks for the feedback. Can you please open this and confirm whether the favicon appears as it should on the same platform/browser you tested previously? Thanks.

<!-- gh-comment-id:1837111247 --> @axllent commented on GitHub (Dec 2, 2023): @parth391 Thanks for the feedback. Can you please open [this](https://mailpit.axllent.org/test/) and confirm whether the favicon appears as it should on the same platform/browser you tested previously? Thanks.
Author
Owner

@parth391 commented on GitHub (Dec 2, 2023):

@axllent, Link work perfectly on Firefox and Chrome on MacOS.

Chrome:
Screenshot 2023-12-02 at 6 28 19 PM

Firefox:

Screenshot 2023-12-02 at 6 28 50 PM
<!-- gh-comment-id:1837143050 --> @parth391 commented on GitHub (Dec 2, 2023): @axllent, [Link](https://mailpit.axllent.org/test/) work perfectly on Firefox and Chrome on MacOS. Chrome: <img width="294" alt="Screenshot 2023-12-02 at 6 28 19 PM" src="https://github.com/axllent/mailpit/assets/4966579/1d825822-97af-4e10-b6e1-b405ca451ee3"> Firefox: <img width="309" alt="Screenshot 2023-12-02 at 6 28 50 PM" src="https://github.com/axllent/mailpit/assets/4966579/9b11798b-379c-45da-bec9-e0f941fadd24">
Author
Owner

@federicobond commented on GitHub (Dec 2, 2023):

Hi, I can confirm the test link looks good in my computer too.

<!-- gh-comment-id:1837209835 --> @federicobond commented on GitHub (Dec 2, 2023): Hi, I can confirm the test link looks good in my computer too.
Author
Owner

@axllent commented on GitHub (Dec 2, 2023):

Thanks to you both for the confirmation. I'll continue to work on this in the coming days as there are a few performance issues I need to address (not the fault of the code, but rather the CPU usage caused by the image generation when the favicon is updated often like in the demo). I also need to add a reset function for when there are no unread counts.

<!-- gh-comment-id:1837239341 --> @axllent commented on GitHub (Dec 2, 2023): Thanks to you both for the confirmation. I'll continue to work on this in the coming days as there are a few performance issues I need to address (not the fault of the code, but rather the CPU usage caused by the image generation when the favicon is updated often like in the demo). I also need to add a reset function for when there are no unread counts.
Author
Owner

@axllent commented on GitHub (Dec 7, 2023):

@federicobond & @parth391 - I have just released v1.10.3 which is using a modified version of @federicobond's script (thank you again!). Please have a test and let me know if this solves the issue on MacOS?

<!-- gh-comment-id:1844242236 --> @axllent commented on GitHub (Dec 7, 2023): @federicobond & @parth391 - I have just released v1.10.3 which is using a modified version of @federicobond's script (thank you again!). Please have a test and let me know if this solves the issue on MacOS?
Author
Owner

@parth391 commented on GitHub (Dec 7, 2023):

@axllent, v1.10.4 fix the issue on MacOS.

Thanks.

<!-- gh-comment-id:1844490881 --> @parth391 commented on GitHub (Dec 7, 2023): @axllent, v1.10.4 fix the issue on MacOS. Thanks.
Sign in to join this conversation.
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/mailpit#140
No description provided.