style: update favicons with chart color, apple touch icon and shortcuts names

app/views/graphql/playground.html.haml

@@ -4,14 +4,14 @@
     %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
     %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
     %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    %meta{ name: "application-name", content: APPLICATION_NAME }
+    %meta{ name: "apple-mobile-web-app-title", content: APPLICATION_NAME }
     = csrf_meta_tags
 
     %title
       = content_for?(:title) ? "#{yield(:title)} · #{APPLICATION_NAME}" : APPLICATION_NAME
 
-    = favicon_link_tag(image_url("#{FAVICON_16PX_SRC}"), type: "image/png", sizes: "16x16")
+    = render partial: "layouts/favicons"
-    = favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
-    = favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")
 
     = vite_client_tag
     = vite_typescript_tag 'playground'

app/views/layouts/_favicons.html.haml

@@ -0,0 +1,5 @@
+= favicon_link_tag(image_url(FAVICONS_SRC["16px"]), type: "image/png", sizes: "16x16") if FAVICONS_SRC.key?("16px")
+= favicon_link_tag(image_url(FAVICONS_SRC["32px"]), type: "image/png", sizes: "32x32") if FAVICONS_SRC.key?("32px")
+= favicon_link_tag(image_url(FAVICONS_SRC["96px"]), type: "image/png", sizes: "96x96") if FAVICONS_SRC.key?("96px")
+= favicon_link_tag(image_url(FAVICONS_SRC["apple_touch"]), type: nil, sizes: "152x152", rel: "apple-touch-icon") if FAVICONS_SRC.key?("apple_touch")
+%meta{ name: "theme-color", content: "#ffffff" }

app/views/layouts/application.html.haml

@@ -4,14 +4,14 @@
     %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
     %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
     %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    %meta{ name: "application-name", content: APPLICATION_NAME }
+    %meta{ name: "apple-mobile-web-app-title", content: APPLICATION_NAME }
     = csrf_meta_tags
 
     %title
       = content_for?(:title) ? "#{sanitize(yield(:title))} · #{APPLICATION_NAME}" : APPLICATION_NAME
 
-    = favicon_link_tag(image_url("#{FAVICON_16PX_SRC}"), type: "image/png", sizes: "16x16")
+    = render partial: "layouts/favicons"
-    = favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
-    = favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")
 
     = Gon::Base.render_data(camel_case: true, init: true, nonce:  request.content_security_policy_nonce)
 

app/views/layouts/component_preview.html.haml

@@ -4,14 +4,14 @@
     %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
     %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
     %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    %meta{ name: "application-name", content: APPLICATION_NAME }
+    %meta{ name: "apple-mobile-web-app-title", content: APPLICATION_NAME }
     = csrf_meta_tags
 
     %title
       = content_for?(:title) ? "#{yield(:title)} · #{APPLICATION_NAME}" : APPLICATION_NAME
 
-    = favicon_link_tag(image_url("#{FAVICON_16PX_SRC}"), type: "image/png", sizes: "16x16")
+    = render partial: "layouts/favicons"
-    = favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
-    = favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")
 
     = vite_client_tag
     = vite_javascript_tag 'application'

app/views/layouts/print.html.haml

@@ -3,14 +3,14 @@
     %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
     %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
     %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    %meta{ name: "application-name", content: APPLICATION_NAME }
+    %meta{ name: "apple-mobile-web-app-title", content: APPLICATION_NAME }
     = csrf_meta_tags
 
     %title
       = t("dynamics.page_title")
 
-    = favicon_link_tag(image_url("#{FAVICON_16PX_SRC}"), type: "image/png", sizes: "16x16")
+    = render partial: "layouts/favicons"
-    = favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
-    = favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")
 
   %body
     = yield

config/env.example.optional

@@ -46,9 +46,12 @@ DS_ENV="staging"
 # STATUS_PAGE_URL=""
 
 # Instance customization: Favicons ---> to be put in "app/assets/images"
+# Search "real favicon generator" to find websites generating all these formats from a single image source.
+# An empty string disable the icon if you don't care.
 # FAVICON_16PX_SRC="favicons/16x16.png"
 # FAVICON_32PX_SRC="favicons/32x32.png"
 # FAVICON_96PX_SRC="favicons/96x96.png"
+# FAVICON_APPLE_TOUCH_152PX_SRC="favicons/apple-touch-icon.png"
 
 # Instance customization: Application logo ---> to be put in "app/assets/images"
 # HEADER_LOGO_SRC="marianne.png"

config/initializers/images.rb

@@ -1,7 +1,10 @@
 # Favicons
-FAVICON_16PX_SRC = ENV.fetch("FAVICON_16PX_SRC", "favicons/16x16.png")
+FAVICONS_SRC = {
-FAVICON_32PX_SRC = ENV.fetch("FAVICON_32PX_SRC", "favicons/32x32.png")
+  "16px" => ENV.fetch("FAVICON_16PX_SRC", "favicons/16x16.png"),
-FAVICON_96PX_SRC = ENV.fetch("FAVICON_96PX_SRC", "favicons/96x96.png")
+  "32px" => ENV.fetch("FAVICON_32PX_SRC", "favicons/32x32.png"),
+  "96px" => ENV.fetch("FAVICON_96PX_SRC", "favicons/96x96.png"),
+  "apple_touch" => ENV.fetch("FAVICON_APPLE_TOUCH_152PX_SRC", "favicons/apple-touch-icon.png")
+}.compact_blank.freeze
 
 # Header logo
 HEADER_LOGO_SRC = ENV.fetch("HEADER_LOGO_SRC", "marianne.png")