Adding a pinned tab icon for Safari through Phoenix

Question

I'm trying to add a pinned tab icon that is visible in Safari, like this:
pinned tabs in safari

I have found this instruction: Apple's instruction for pinned tab icon

However, when I use this construction in my app.html.eex like this:

<link rel="mask-icon" href="<%= static_path(@conn, "/website_icon.svg") %>" color="red" >

or

<link rel="mask-icon" href="/website_icon.svg") color="red" >

where the website_icon.svg is in the static root;

the page redirects me to localhost:4000/website_icon.svg, which is correct, but then shows a 404 error page as if it should have been pointed towards in the router.

So my question: How can I get Phoenix to get the mask-icon to display correctly, rather than getting a 404?

NB: The favicon is displayed correctly without explicit coding, but also 404's when I explicitly code it into app.html.eex like the previous code examples.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

In your endpoint.ex file, there is a line specifying what the static plug should handle. Mine looks like the following

plug Plug.Static,
  at: "/", from: :my_app, gzip: false,
  only: ~w(css fonts images js favicon.ico robots.txt)

You will want to either put your file in the images directory, or add a website_icon.svg similar to the favicon.ico entry.

Adding a pinned tab icon for Safari through Phoenix

Sign up