What is the proper way to add a favicon to a Phoenix app ?
If you are using the default setup, then replacing assets/static/favicon.ico
with your own favicon.ico
should be enough.
For adding the bigger sized favicons, you’d also need to include a manifest.json
in your static files and serve it with Plug.Static
in endpoint.ex
:
plug Plug.Static,
at: "/",
from: :your_app,
gzip: true,
- only: ~w(css fonts images js lib favicon.ico robots.txt)
+ only: ~w(css fonts images js lib favicon.ico apple-touch-icon.png favicon-32x32.png favicon-16x16.png manifest.json robots.txt)
You’d also need to update your templates/layout/app.html.eex
to point the browser to that manifest:
+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+ <link rel="manifest" href="/manifest.json">
OMG. I was too focused with the priv/static/favicon.ico and my browser did not refresh properly.
Now, it works fine just by changing the assets/static/favicon.ico
.
Thanks !
Another resource that seems to be great for this is:
They include a favicon checker after you finish generating everything and it includes support for Windows 8 and 10 tiles too. I renamed the site.manifest
file as manifest.json
per @idi527 's post.
My frontend guru Jaan Tihvan suggested that better option is to put all icons in dedicated folder:
only: ~w(css fonts images js lib icons robots.txt)