FIX: Incorrect "rel" used for apple icons in `<head>`.

FIX: Incorrect “rel” used for apple icons in <head>.

Nothing on the web I can find suggests that this should have been rel=icon. See Configuring Web Applications

From 0972516abe274cd7a7153946bcdff4a8db58990c Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Mon, 26 Nov 2018 10:40:09 +0800
Subject: [PATCH] FIX: Incorrect "rel" used for apple icons in `<head>`.

Nothing on the web I can find suggests that this should have been `rel=icon`.
See https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 898ffd7..ad75304 100644
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@@ -8,7 +8,7 @@
 <link rel="apple-touch-icon" type="image/png" href="<%= site_apple_touch_icon_url %>">
 <%- end %>
 <%- if (site_apple_touch_icon_url != "/images/default-apple-touch-icon.png") && site_apple_touch_icon_url.present? %>
-<link rel="icon" type="image/png" sizes="144x144" href="<%= site_apple_touch_icon_url %>">
+<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="<%= site_apple_touch_icon_url %>">
 <%- end %>
 <meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', scheme_id) %>">
 <% if mobile_view? %>

GitHub

Hmmm 144x144 does not appear to be the right size to be using.

Per:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

We really should be delivering:

<link rel=“apple-touch-icon” href=“touch-icon-iphone.png”>
<link rel=“apple-touch-icon” sizes=“152x152” href=“touch-icon-ipad.png”>
<link rel=“apple-touch-icon” sizes=“180x180” href=“touch-icon-iphone-retina.png”>
<link rel=“apple-touch-icon” sizes=“167x167” href=“touch-icon-ipad-retina.png”>

We really should be using optimized image here and delivering the correct sized.

We definitely should not be delivering a very large image and calling it 144x144 unless it really is that. I think the easiest thing to change here it to up it to 180x180 and deliver a 180x180 image.

I’m going to sit on this for awhile. We can deliver a 180x180 image but it seems like iOS will scale the image up/down based on the device’s needs. Plus, apple.com uses a 152x152 icon so ¯_(ツ)_/¯.

2 Likes

hmmm what should we do here? close this ?

Yea let’s close this.