Add favicons

README.md

@@ -11,11 +11,11 @@ Ready to run in production? Please [check our deployment guides](https://hexdocs
 
 ## Learn more
 
-- Official website: https://www.phoenixframework.org/
+- Official website: <https://www.phoenixframework.org/>
-- Guides: https://hexdocs.pm/phoenix/overview.html
+- Guides: <https://hexdocs.pm/phoenix/overview.html>
-- Docs: https://hexdocs.pm/phoenix
+- Docs: <https://hexdocs.pm/phoenix>
-- Forum: https://elixirforum.com/c/phoenix-forum
+- Forum: <https://elixirforum.com/c/phoenix-forum>
-- Source: https://github.com/phoenixframework/phoenix
+- Source: <https://github.com/phoenixframework/phoenix>
 
 ## Dev Notes
 
@@ -47,3 +47,12 @@ Ready to run in production? Please [check our deployment guides](https://hexdocs
 ### CI
 
 See the `.github` folder.
+
+## Favicons
+
+This favicon was generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f4bd.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (<https://github.com/twitter/twemoji>)
+- Graphics Source: <https://github.com/twitter/twemoji/blob/master/assets/svg/1f4bd.svg>
+- Graphics License: CC-BY 4.0 (<https://creativecommons.org/licenses/by/4.0/>)

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

@@ -9,6 +9,10 @@
     </.live_title>
     <link rel="preconnect" href="https://rsms.me/" />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <link rel="icon" sizes="32x32" href={~p"/images/favicon.ico"} />
+    <link rel="icon" type="image/png" sizes="32x32" href={~p"/images/favicon-32x32.png"} />
+    <link rel="icon" type="image/png" sizes="16x16" href={~p"/images/favicon-16x16.png"} />
+    <link rel="apple-touch-icon" sizes="180x180" href={~p"/images/apple-touch-icon.png"} />
     <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>