Favicon is Blurry when Viewing Files from ‘Media’ Page

  • nategreen0909 · Member ·

    Hello,

    I am relatively new to WordPress, and I am currently using it as a platform to save and share PDF files, through the ‘Media’ page. I have uploaded a favicon to my WordPress site (it is the proper size of 512 x 512 pixels), but when I copy the link for any of my files under ‘Media’ and paste it into a new Chrome tab, the favicon I have uploaded becomes blurry and pixelated. Is there any way to avoid this?

    If possible, I would like a clear favicon when pasting links from the ‘Media’ page. Something to note, the favicon is not pixelated nor blurry when viewing my actual WordPress site. However, as I mentioned, my main use of WordPress at this time is for viewing and sharing PDFs, so it does not matter much to me if the personalized favicon is clear for my real site, only for files associated with the ‘Media’ page, if that makes sense.

    Here is the link to one of the pages I have created that has an example pixelated favicon: https://nategreen0909.files.wordpress.com/2021/02/cropped-512×512-png-images-9-1.png

    Many thanks!

  • supernovia · Staff ·

    Hi, my eyes may not be as sensitive — but is the image you’ve shared here the one with the image blurry and pixelated? This is the one with the chrome logo right? Do you have another image the same size uploaded elsewhere that we could compare it to? Is it being compressed?

    The favicon will generally only be displayed in small spaces, for what it’s worth.

  • nategreen0909 · Member ·

    My bad, I should have been a bit more clear in my description! The link I shared just happens to have the Chrome logo on it (which in and of itself is not blurry), but my main issue was with the blurry favicon on the top of the tab, if that makes sense. The Chrome logo was an image I found online (512 x 512 pixels), and the favicon I have tried uploading is of the same image of the Chrome logo, which is on the “Media” page.

    Here is another link, directly to a screenshot of the area in question: https://postimg.cc/GBKCnPsK. I hope this helps clear things up.

    Also, this is a link to another “Media” page, this time displaying another image front-and-center, with the same blurry favicon at the top in question: https://nategreen0909.files.wordpress.com/2021/02/qi-bin-w4hbafegiac-unsplash.jpg

    Any knowledge on how to fix the blurry favicon displayed in this picture would be greatly appreciated!

  • fstat · Staff ·

    Hi there,

    Your site’s icon is showing very crisp on my end.

    I suggest opening your site in a private browsing window or use a different browser.

    If you’re still having trouble seeing that icon clearly, I suggest removing it and adding it again.

  • nategreen0909 · Member ·

    So, when opening the page I attached above in a private browser, the favicon did clear up! Unfortunately, this only seems to work with uploaded images, not PDF documents. When trying to view a PDF uploaded through the “Media” page, under “Documents”, the favicon still appears blurry. I have removed the icon and added it again, as well as refreshing the page. Neither of these options has made a difference.

    Here is the link to a PDF document I have uploaded, where the favicon still is pixelated (I can visibly see pixels on the screen, where there should be smooth curves): https://nategreen0909.files.wordpress.com/2021/03/sample.pdf. If anyone knows of a way to resolve this pixelated favicon at the top of the page so it is clear and crisp, I would love to know of it!

    Thanks for all the helpful support so far.

  • staff-totoro · Staff ·

    Hi there,

    I’m not sure I am able to spot this issue. Are you on a laptop with a high density display, like a Retina Display (MacBook) or similar? When I view the PDF you linked above, it seems fine to me but I am viewing on a standard density monitor.

    Instead of us sharing a screenshot of what we are seeing, can you share a screenshot of what you see on your end? To share a screenshot of what you are seeing, you can use https://snipboard.io/

    Simply upload your screenshot on that web page, and then copy the link (created after you upload your screenshot) and paste it into your reply here so we can see it.

    Thanks for the additional info!

  • staff-totoro · Staff ·

    Hi again,

    I wanted to add that I’ve done a bit of research and I noticed from Google’s documentation the Chrome browser automatically resizes the ‘favicon’ to 16×16 px, so on a Retina display this may appear pixellated, since that is a very small file size. See Google’s documentation here: https://developers.google.com/search/docs/advanced/appearance/favicon-in-search

    This is the relevant passage (emphasis mine)

    Your favicon should be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. SVG files, of course, do not have a specific size. Any valid favicon format is supported. Google will rescale your image to 16x16px for use in search results, so make sure that it looks good at that resolution. Note: do not provide a 16x16px favicon.

    It sounds like regardless of the size and sharpness of the image you set in your site icon settings, Google will resize that to be quite a bit smaller, so this may not be an issue we can resolve on our end.

  • The topic ‘Favicon is Blurry when Viewing Files from ‘Media’ Page’ is closed to new replies.