Replies: 2 comments 4 replies
-
|
I was not aware that this is even possible but it seems to be, though I am not sure you will get consistent results across browsers. To add the necessary extra header information, you could override the Would be good if you could post a screenshot of your results, showing what the use of different favicon sizes achieves. I assume it is a better rendering of an icon for high resolution screens rather than an icon that is actually larger? Having looked at a random website there is also an |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Do you intend to use the Material icon? You know that you can configure your own favicon, right? |
Beta Was this translation helpful? Give feedback.
-
|
My icon is this one: |
Beta Was this translation helpful? Give feedback.
-
|
Hello @ricolxwz, Compare all of the images in some image editor like https://www.photopea.com/:
You'll notice that GitHub's leaves almost no gaps at the edges of the square, while the theme's favicon has both margin gaps at the edges and the Material "M" logo is in a circle that too has margins, which leads to this effect on the browser tab that makes it look small in comparison. Over at Nype - https://npe.cm/ due to a domain / website migration from WordPress to MkDocs there was also a change to the favicon paths. This resulted in Google search results not detecting the favicon icon due to a 404 error from the migrated site, and due to slow indexing there was no icon for a couple of weeks. Because of that I went on to find resources on how to optimize favicons. I found this article to be helpful in general together with the website it advertised, but I have no affiliation to any of them ✌️:
Note Currently Material for MkDocs doesn't support setting the mkdocs-material/src/templates/base.html Lines 79 to 80 in 6f3c05b So personally, I'm just ignoring the sizes= attribute and use both a 48x48 ICO and SVG, and as Alex has said above, you can use customization with the extrahead block or site_meta and super() to move the fetch request for the icon before other assets in the <head> ✌️
Only the Also in a previous discussion it was concluded that the favicon.ico doesn't have to be at the root of the server, just anywhere on the site and the However, compare for example those links: Both are text files without HTML with the |
Beta Was this translation helpful? Give feedback.
-
|
Fantastic work, thank you! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
How to change the size of favicon in the browser tab?
Beta Was this translation helpful? Give feedback.
All reactions