New to the community? Start here

[Smush Pro] Generate apple-touch-icon?

I am currently redirecting /apple-touch-icon.png to /favicon.ico. I’d like to do better. Can Smush help? Other suggestions?

I want to properly serve Apple users with images that match their various form factors. Is there now, or will there be, a feature in Smush to generate the various apple-touch-icon sizes for a given image?

Is this blog still valid?
https://wpza.net/how-to-add-apple-touch-icons-in-wordpress/
Should we do something like that? Maybe manually create images of the favicon and then manually add link metatags into pages?

If we don’t redirect, do we still need to “know” that we should add /apple-touch-icon.png to a new site to avoid a Defender 404 and possible ban of all Apple devices? :astonished:

What’s the “state of the art” on this topic, and how can or does WPMUDEV help with it?

Topic for DOTW or WPMUDEV Blog?

Thanks

Sat, 21 Oct 2023 19:46:32
More Smush Pro discussions
Smush Pro
  • Tony G
    • Mr. LetsFixTheWorld

    Daniel Voran Spot on! Thanks. And that’s exactly why I opened this question.

    So, it’s common to offload the grueling task of generating these necessary files for an ever-growing list of screens and devices to favicon generator tools. No one in their right mind would ever want to spend hours creating them by hand. We’re here to build websites, after all, not to make browser vendors happy.

    I appreciate this:


    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
    <link rel="manifest" href="/manifest.webmanifest">

    I want to avoid this :
    [attachments are only viewable by logged-in members]

    And I have no idea about this:


    // manifest.webmanifest
    {
    "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
    ]
    }

    That’s why I have a WPMUDEV subscription. :grinning:

    • Daniel Voran
      • Flash Drive

      It does get complicated depending on the theme you are using. I use Twenty Seventeen along with a child theme to add some special functions. And Twenty Seventeen asks for 512 x 512 image for its Site Identity and generates the various icon sizes from that.
      But Twenty Twenty Three uses a Logo Block where you upload an image. I find how that theme does it rather confusing.
      With Twenty Seventeen it adds this to the pages:

      <link rel="icon" href="https://mycdnurl/wp-content/uploads/2019/04/cropped-apple-touch-icon-512x512-32x32.png" sizes="32x32"/>
<link rel="icon" href="https://mycdnurl/wp-content/uploads/2019/04/cropped-apple-touch-icon-512x512-192x192.png" sizes="192x192"/>
<link rel="apple-touch-icon" href="https://mycdnurl/wp-content/uploads/2019/04/cropped-apple-touch-icon-512x512-180x180.png"/>
<meta name="msapplication-TileImage" content="https://mycdnurl/wp-content/uploads/2019/04/cropped-apple-touch-icon-512x512-270x270.png"/>

      With those links, there may be no point in having separate favicon.ico or apple-touch icons.
      And Yoast takes the image I set as the Site Identity and uses it in its SEO output.
      You might see what the themes you are using do.

      At least ChatGPT tells me that:

      Yes, if your Twenty Seventeen theme is generating these <link> elements for favicon and apple-touch-icon and they are correctly displaying the icons for your website, you can safely remove any separate favicon.ico and specific icons for android-chrome from your website’s root directory.

      I will try getting rid of them and see how things go.

  • Daniel Voran
    • Flash Drive

    After removing all the favicon, android, and apple-touch-icons from my root directory and letting users get these icons from the <link rel=”icon”> links on my web pages, I discovered by browsing the 404 requests in my access logs, that current browsers do not request these icons at all. The browsers see the <link rel=”icon”> links on the webpages and use those. The only requests for these icons comes from a handful of IPs that are all Cloudflare IPs.

    So it seems that it is no longer necessary to maintain these icons in the root directory. They are relics that are no longer used.

    Depending on the theme you are using (I use twenty seventeen and a child theme) if your theme supports setting the site icon, the theme will generate the necessary site icons and put them in your uploads directory. And if you are using a CDN, these will get uploaded to your CDN.

    After more than a day without those icons in my root directory the icons that Cloudflare has looked for are:
    favicon.ico
    apple-touch-icon.png
    apple-touch-icon-precomposed.png
    apple-touch-icon-120×120-precomposed.png
    apple-touch-icon-120×120.png

    I put those back in my root directory just to reduce the 404 entries those Cloudflare IPs generate. Not having them does not affect how users see my website. They still see the site icon because of the <link rel=”icon”> links.

  • Christian Saborio
    • WPMU DEV Initiate

    Probably best to add a rule in Defender to ignore those entries?

    /apple-touch-icon-precomposed.png
    /apple-touch-icon.png
    /apple-touch-icon-120×120-precomposed.png
    /apple-touch-icon-120×120.png

    As of 2025-07-01, I see these requests in the logs and users have been banned.

    • Tony G
      • Mr. LetsFixTheWorld

      Great, Defender banning iOS visitors. That’s So unexpected… :rolling_eyes:

      > If we don’t redirect, do we still need to “know” that we should add /apple-touch-icon.png to a new site to avoid a Defender 404 and possible ban of all Apple devices? (Oct 21, 2023)

  • Patrick Freitas
    • FLS

    Hi Tony G

    I hope you are doing well

    I’d like to do better. Can Smush help? Other suggestions?

    Smush is more related to image optimisation than generating any, in this case it would fit better on https://wpmudev.com/docs/wpmu-dev-plugins/branda/#favicon, which already includes some sizing but I can see we have a feature request to improve it too.

    If we don’t redirect, do we still need to “know” that we should add /apple-touch-icon.png to a new site to avoid a Defender 404 and possible ban of all Apple devices?

    We haven’t had any report for this. Defender may block any traffic if you specified the favicon path and it leads to a 404 not found, but not for missing metadata.

    As for should we still use or not, since it has been a while then I created my latest website I will leave that to community, I do see we still implement all sizes in the WPMU DEV Site though.

    Best Regards
    Patrick Freitas

  • Christian Saborio
    • WPMU DEV Initiate

    It’s happened again, this is absolutely embarrassing for my clients…

    Hoenstly, I am finding so many ongoing issues with Snapshot, Forminator, Defender, and Humminbird that I really wonder if the subscription is worth it….so many tickets trying to get basic functionality working 😢😢😢😢

  • Sajjad Rahat
    • Staff

    Hi Christian Saborio ,

    I’m sorry to hear that you’re facing issues related to Defender and our other plugins.

    However, upon checking the screenshot, I can see that Defender is locking out users who repeatedly try to access favicons URLs that return 404, and locking out those users.

    In this case, have you verified whether these favicon URLs exist? And does that load or return 404 status codes?

    Defender will only lock out users if those URL entries return 404 status codes and users exceed the 404 thresholds within the specified timeframes: https://wpmudev.com/docs/wpmu-dev-plugins/defender/#threshold.

    However, as mentioned earlier, this appears to be a new issue, and we will continue to monitor this thread for further community responses. Please let us know if you have any additional questions.

    Best Regards,
    Sajjad Rahat