Search code examples
htmlfavicon

How does Stack Overflow make it so their apple-touch-icon doesn't have a border effect

After going through the page source, I found:

<link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69">

But even after I did that, my image still has a bored effect. My image is also a transparent png. Any ideas?

enter image description here

Here is my attempt (10.10.1 OS X Yosemite, Safari: Version 8.0.2):

enter image description here

I used this website to generate the favico:

http://realfavicongenerator.net

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

enter image description here

Solution

  • Two things in this answer:

    • How I did to reproduce StackOverflow's behavior
    • Why this may not be a good idea

    How to reproduce StackOverflow's behavior

    What I did:

    I got your expected result, ie. a transparent background.

    Safari bookmark

    This is basically what you did, so there must be something wrong. A few tips:

    • There can be a lot of issues with favicon, whatever the browser. They often cache the old icon and do not load the new one. Sometimes they do not load your icon at all, but load it if you wait a few seconds. And so on. My advice: try to use another domain to make sure you start from a fresh state.
    • Maybe your test web site as some additional stuff that can conflict with your actual test. For example, if you have a file apple-touch-icon.png in your root directory, Safari may load it, even if it is not declared in your HTML code.

    Why this may not be a good idea

    Mac OS Safari relies on the Touch icon, primarily designed for iOS. It is mainly used for the "Add to home screen" feature. In that case, iOS prevents transparency and fills transparent regions with black. Add StackOverflow.com to the home screen and you get:

    StackOVerflow to iOS screen

    Honestly the result is okay, but is this really what SO expected? Your choice.