Are touch/mobile icons fully supported yet? Per this issue post Support updates to touch icon sizes/requirements
I just need to make sure {{ touch_icons }} is in my html.html.twig head.

In my generated sub-theme I have correctly toggled on "touch icons" in theme settings, added the correct paths to touch icons tab.
But I am not seeing the "links" in the of the page source. I have tried toggling "precomposed" on and off.

Looking through preprocess.inc, it appears the code should work.
Where is the best practice to manually add the "link rel" for device icons in the theme template or twig?

Thanks for any guidance.

Comments

xacto created an issue. See original summary.

xacto’s picture

xacto CreditAttribution: xacto commented
Issue summary: View changes
Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Can't reproduce it I'm afraid, are you 100% sure those paths are correct?

xacto’s picture

xacto CreditAttribution: xacto commented

Thanks jeff..
Still haven't figured it out.
According to the appearance settings->touch icon->tab. All paths should be relative to the theme's root folder. Correct?
yourthemename: images/touch-icons/your_icon.png

Is there a breakpoint I am missing?
I have been testing using macOS Safari, as well as Safari's developer "Responsive design mode" which should pass iOS browser and viewport size correctly.
Touch icons should also be passed to macOS desktop browsers for bookmark icons.

Thanks for the reply.

BTW is this the correct updated generated head from AT Tools Version: 8.x-2.0
in html.html.twig


<head>
    {{ touch_icons }}
    <head-placeholder token="{{ placeholder_token|raw }}">
    <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
    {%- if google_dns_prefetch -%}
      <link rel="dns-prefetch" href="//fonts.googleapis.com">
    {%- endif -%}
    {%- if typekit_dns_prefetch -%}
      <link rel="dns-prefetch" href="//use.typekit.net">
    {%- endif -%}
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Yep, that's correct.

What do you see in the actual output? Just nothing like:

<link href="http://drupal-stable:8888/themes/release_test_three/images/touch-icons/Icon-60.png" rel="apple-touch-icon" sizes="60x60" />
<link href="http://drupal-stable:8888/themes/release_test_three/images/touch-icons/Icon-76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://drupal-stable:8888/themes/release_test_three/images/touch-icons/Icon-60-2x.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://drupal-stable:8888/themes/release_test_three/images/touch-icons/Icon-76-2x.png" rel="apple-touch-icon" sizes="152x152" />
<link href="http://drupal-stable:8888/themes/release_test_three/images/touch-icons/Icon-60-3x.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://drupal-stable:8888/themes/release_test_three/images/touch-icons/Icon-192x192.png" rel="icon" sizes="192x192" />