Create specific apple-touch-icons

These icons shouldn't have any transparancy. Instead, we remove the
rounded corners and let iOS handle that.

app/images/icons/Makefile

@@ -1,13 +1,15 @@
 BROWSER_SIZES := 16 24 32 48 64
 ANDROID_SIZES := 72 96 144 192
+WEB_ICON_SIZES := $(BROWSER_SIZES) $(ANDROID_SIZES)
 
 #IOS_1X_SIZES := 20 29 40 76 # No such devices exist anymore
 IOS_2X_SIZES := 40 58 80 120 152 167
 IOS_3X_SIZES := 60 87 120 180
 ALL_IOS_SIZES := $(IOS_1X_SIZES) $(IOS_2X_SIZES) $(IOS_3X_SIZES)
 
-ALL_SIZES := $(BROWSER_SIZES) $(ANDROID_SIZES) $(ALL_IOS_SIZES)
-ALL_ICONS := $(ALL_SIZES:%=novnc-%.png)
+ALL_ICONS := \
+	$(ALL_IOS_SIZES:%=novnc-ios-%.png) \
+	$(WEB_ICON_SIZES:%=novnc-%.png)
 
 all: $(ALL_ICONS)
 
@@ -25,5 +27,9 @@ novnc-%.png: novnc-icon.svg
 	convert -density $$[`echo $*` * 90 / 48] \
 		-background transparent "$<" "$@"
 
+novnc-ios-%.png: novnc-ios-icon.svg
+	convert -depth 8 -background transparent \
+		-size $*x$* "$<" "$@"
+
 clean:
 	rm -f *.png

vnc.html

@@ -39,17 +39,17 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
     <!-- @2x -->
-    <link rel="apple-touch-icon" sizes="40x40" type="image/png" href="app/images/icons/novnc-40.png">
-    <link rel="apple-touch-icon" sizes="58x58" type="image/png" href="app/images/icons/novnc-58.png">
-    <link rel="apple-touch-icon" sizes="80x80" type="image/png" href="app/images/icons/novnc-80.png">
-    <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-120.png">
-    <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-152.png">
-    <link rel="apple-touch-icon" sizes="167x167" type="image/png" href="app/images/icons/novnc-167.png">
+    <link rel="apple-touch-icon" sizes="40x40" type="image/png" href="app/images/icons/novnc-ios-40.png">
+    <link rel="apple-touch-icon" sizes="58x58" type="image/png" href="app/images/icons/novnc-ios-58.png">
+    <link rel="apple-touch-icon" sizes="80x80" type="image/png" href="app/images/icons/novnc-ios-80.png">
+    <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-ios-120.png">
+    <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-ios-152.png">
+    <link rel="apple-touch-icon" sizes="167x167" type="image/png" href="app/images/icons/novnc-ios-167.png">
     <!-- @3x -->
-    <link rel="apple-touch-icon" sizes="60x60" type="image/png" href="app/images/icons/novnc-60.png">
-    <link rel="apple-touch-icon" sizes="87x87" type="image/png" href="app/images/icons/novnc-87.png">
-    <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-120.png">
-    <link rel="apple-touch-icon" sizes="180x180" type="image/png" href="app/images/icons/novnc-180.png">
+    <link rel="apple-touch-icon" sizes="60x60" type="image/png" href="app/images/icons/novnc-ios-60.png">
+    <link rel="apple-touch-icon" sizes="87x87" type="image/png" href="app/images/icons/novnc-ios-87.png">
+    <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-ios-120.png">
+    <link rel="apple-touch-icon" sizes="180x180" type="image/png" href="app/images/icons/novnc-ios-180.png">
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="app/styles/base.css">