Martin Martin - 4 years ago 102
HTML Question

Adding a pinned tab icon for Safari through Phoenix

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download