Phoenix: Favicon not found using static_path
Environment
- Elixir version (elixir -v): 1.4.0
- Phoenix version (mix deps): 1.2.1
- NodeJS version (node -v): 7.7.4
- NPM version (npm -v): 4.1.2
- Operating system: OSX 10.12.3
- Production: Deployed to Heroku
Example EEX snippet:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="<%= static_path(@conn, "/favicon.ico") %>" >
</head>
<body>
</body>
</html>
Expected behavior
Accessing compiled assets, such as favicon.ico, that are in the root assets directory, with the static_path function, should be accessible to the Phoenix app/website.
Actual behavior
static_path produces a compiled asset reference in the generated HTML but the asset cannot be found. Additionally, when accessing the full generated path, the Phoenix app produces a 404 error and the file cannot be found.
Both favicon.ico and the compiled asset exist on the Heroku filesystem. When accessing favicon.ico or robots.txt directly in the browser, they are exist/are found.
The following compiled assets exist in the root directory priv/static
favicon.ico . <-- Accessible
favicon-e140509352bf1401e9dcd10c640f17b6.ico . <-- Not Accessible
robots-067185ba27a5d9139b10a759679045bf.txt . <-- Not Accessible
robots.txt . <-- Accessible
...
Workaround
Copying the favicon.ico file under assets/images allows the favicon to be located.
<link rel="icon" type="image/x-icon" href="<%= static_path(@conn, "/images/favicon.ico") %>" >
jknipp
All 7 comments
All files at the root must be explicit listed under Plug.Static in your endpoint. Since listing auto generated files is non straight-forward, moving it to a directory is the way to go.
josevalim
on 9 May 2017
馃憤
jknipp
on 9 May 2017
@jknipp To make Plug.Static serve the digested favicon, you can also use the :only_matching option:
only_matching: ~w(favicon)
See https://hexdocs.pm/plug/Plug.Static.html#module-options
christopheradams
on 9 May 2017
@christopheradams @josevalim
My endpoint.ex is the default provided by the installer.
plug Plug.Static,
at: "/", from: :gateway_index, gzip: false,
only: ~w(css fonts images js favicon.ico robots.txt)
If I use only_matching: ~w(favicon), won't this filter out my other directories (css/images/js)?
jknipp
on 9 May 2017
Hi,
I am trying to add an audio element in my project.
I added an audio folder in the static directory and placed my audio file there.
I am trying this, but it shows the audio element but it does not play anything.
-
kaleketan07
on 24 Mar 2018
@jknipp and anyone else following this issue.
Using only_matching: ~w(css fonts images js favicon robots.txt) solved this issue for me.
My suspicion is that when you specify a full path, that breaks with cache chunking. Could be off tho..
Jesse-Cameron
on 5 Dec 2018
Just to leave the hack that worked for me here (Note: this is reverse proxied through nginx), though not totally relevant to this issue.
I didn't want to move favicon.ico to some other directory because I host a couple other webapps on this server too, with multiple proxy_passs, so moving the URL means I'd have to change the favicon.ico location in lots of other applications.
favicon.ico was stored at assets/static/favicon.ico
Here is my Plug.Static from endpoint.ex (which doesnt include anything to do with favicon):
plug Plug.Static,
at: "/",
from: :glue,
gzip: true,
only_matching: ~w(css fonts images js robots)
and the block in nginx that "fixes" this:
location = /favicon.ico {
alias /home/user/pheonix/priv/static/favicon.ico;
}
This doesn't use static_path at all, or specify a different location by using a link tag, /favicon.ico is just the default.
otherwise, nginx config was mainly copied from here: https://hexdocs.pm/phoenix/1.3.0-rc.3/phoenix_behind_proxy.html
seanbreckenridge
on 6 May 2020
Related issues
iongion
路
4Comments
oliverandrich
路
3Comments
mmcc
路
3Comments
josevalim
路
3Comments
Tica2
路
3Comments
Most helpful comment
All files at the root must be explicit listed under Plug.Static in your endpoint. Since listing auto generated files is non straight-forward, moving it to a directory is the way to go.