favicons

lib/labelmaker_web.ex

@@ -17,7 +17,9 @@ defmodule LabelmakerWeb do
   those modules here.
   """
 
-  def static_paths, do: ~w(assets fonts images labels favicon.ico robots.txt)
+  def static_paths,
+    do:
+      ~w(assets fonts images labels favicon.ico favicon.svg favicon-96x96.png apple-touch-icon.png web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest robots.txt)
 
   def router do
     quote do

lib/labelmaker_web/components/layouts/root.html.heex

@@ -7,6 +7,12 @@
     <.live_title default="labelmaker.xyz">
       {assigns[:page_title]}
     </.live_title>
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Labelmaker" />
+    <link rel="manifest" href="/site.webmanifest" />
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>

priv/static/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Labelmaker",
+  "short_name": "Labelmaker",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#6495ED",
+  "background_color": "#6495ED",
+  "display": "standalone"
+}