Add Touch Icon/WebClip for Blogger

htmliconsafari

I use Blogger to run my blog, and I would like to use Apple's Touch icons. However, I'm currently having trouble and I'm not sure if it's because of the limitations of Blogger or something I'm doing. I've looked to other sites for examples and I just can't figure it out. It keeps showing a default Touch Icon, not my image. Here's what I've got so far.

<link rel="apple-touch-icon" href="//yoursite.com/apple-touch-icon.png?attredirects=0&amp;d=1" />

Other information

  • The file is a 60×60 png image
  • Google Sites' file hosting service needs those parameters on the end for the download link to work.
  • Blogger says there's a parsing error if I don't put a slash at the end, but every other site I go to doesn't use that slash, so maybe that's a Blogger thing?

Any help would be greatly appreciated.

Best Answer

So, the problem that I've seem to have diagnosed is that browsers will cache favicon information, which includes Apple Touch Icons. For me, that caused my browser not to update the icons.

What I did was add append a version attribute onto the end of the URL pointing to the image.

<link rel="apple-touch-icon" sizes="180x180" href="https://yoursite.com/apple-touch-icon.png?v=1A11a1AAaA"/>

Specifically, I added "?v=1A11a1AAaA" at the end of the URL. I hope this helps anyone with the same issue.