I have a file called favicon.ico. I would like to know what code goes into this file or any sample code would be appreciated. And how to make this file work?
It goes in
Yeah I understand that favicon.ico lives inside
assets/static. I would like to know what the content of favicon.ico looks like, is it a html file or?
You can also use something like this site to generate the files for your icons, mentioned in a previous post of mine:
That site has instructions for how to apply them in your code once they are generated and you simply place those generated files in your
assets/static location like @APB9785 mentioned. Also, you can reference their instructions with the instructions from this post from @idi527:
Hope that helps in terms of how you make your favicons “work”.
Thank you so much. I tried this and it seemed to work for sometime but now it appears to not work. I put the
assets/static and my
endpoint.ex doesn’t need a change since I use the default setup.
plug Plug.Static, at: "/", from: :my_app, gzip: false, only: ~w(css fonts images js favicon.ico robots.txt)
Any idea why this is happening. I refreshed multiple times and restarted the server many times but it doesn’t work. I also see
priv/repo/static getting generated every time I start the server. Any thoughts on how to resolve this?
My bet is copy-webpack-plugin is not correctly configured…
In particular because it should not create inside priv/repo/static, but into priv/static.
You can check the version (package.json) and how You configured it in (webpack.config.js)
It is created in
priv/repo/static. My bad, sorry.
You need something like this too…
<link rel="icon" href="favicon.ico" />
or read this part of the link mentionned by @APB9785
This needs to be added in
This need to be in the header…
app.html.eex, or root.html.leex if You use live_view.
I am using live_view so I tried to add it inside the root.html.leex header but still it doesn’t work.
I meant the head, not the header… sorry
I just tested and checked that the default favicon appears… in chrome.
I tried both header and head. But sadly it didn’t work. I am confused how it worked before and stopped working now. I used a different favicon earlier. Then there was a need to change and after changing the favicon it didn’t work. So I reverted it back to the one I was initially successful with but even that doesn’t seem to work anymore.
Try on a new project…
It does not imply any black magic macro, or anything strange, it’s just putting the file in the right place, and add a link in the head of root.html.leex
Sorry to hear it’s no longer working for you!
Did you add all of the files from the example from my post (e.g. apple-touch-icon.png manifest.json browserconfig.xml etc.)? If that’s the case then you would need to include them in your
plug Plug.Static, ... only: ~w(... favicon.ico apple-touch-icon.png android-chrome-192x192.png android-chrome-512x512.png favicon-16x16.png favicon-32x32.png mstile-150x150.png safari-pinned-tab.svg manifest.json browserconfig.xml ..)
manifest.json in my example is the json file that they generate for you and name
site.manifest. Then, you need to include this in your appropriate html file:
+ is for reader context (from the version control diff) and is not to be included in your file. Also, you’d need to include all of the favicon related files that you have in your
plug Plug.Static in a similar fashion.
I have multiple root layouts that I use in Metamorphic, so I created a
_favicon.html file and add all of my favicon related code in that and simply render that file in my layouts (note: this goes in the
<%= render "_favicon.html", assigns %>
If there’s no issue with any of those suggestions, then I’d defer to @kokolegorille’s advice.
Thank you so much. It worked!!