popo63301
Add a favicon to a Phoenix app
What is the proper way to add a favicon to a Phoenix app ?
Marked As Solved
idi527
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">
Also Liked
f0rest8
Raf
Just wanted to add a note to this, because the favicon was working fine locally, but failing to load (with a 404) after deployment.
Locally, Phoenix will always load favicon.ico, but after bundling, it tries to load something like favicon-41a4deef9b2b06219597139b6e017760.ico?vsn=d. I debugged the deployed docker image and the file was definitely there.
It took me some time to realize that the problem was with the static_paths I was allowing, which included favicon.ico but not favicon-41a4deef9b2b06219597139b6e017760.ico.
So doing what @karlosmid suggests make sense and did fix the problem.
I’m now just wondering if that shouldn’t be the default for a new phoenix app…
Last Post!
Raf
Just wanted to add a note to this, because the favicon was working fine locally, but failing to load (with a 404) after deployment.
Locally, Phoenix will always load favicon.ico, but after bundling, it tries to load something like favicon-41a4deef9b2b06219597139b6e017760.ico?vsn=d. I debugged the deployed docker image and the file was definitely there.
It took me some time to realize that the problem was with the static_paths I was allowing, which included favicon.ico but not favicon-41a4deef9b2b06219597139b6e017760.ico.
So doing what @karlosmid suggests make sense and did fix the problem.
I’m now just wondering if that shouldn’t be the default for a new phoenix app…
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"