How to add favicon?

Phoenix Forum Questions / Help
, , , ,
1

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?

2

It goes in assets/static

3

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?

4
1 Like
5

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”. :heart:

4 Likes
6

Thank you so much. I tried this and it seemed to work for sometime but now it appears to not work. I put the favicon.ico inside assets/static and my endpoint.ex doesn’t need a change since I use the default setup.

endpoint.ex

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?

7

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)

8

It is created in priv/static not priv/repo/static. My bad, sorry.

9

You need something like this too


<link rel="icon" href="favicon.ico" />

or read this part of the link mentionned by @APB9785

10

This needs to be added in templates/layout/app.html.eex ?

11

This need to be in the header


app.html.eex, or root.html.leex if You use live_view.

1 Like
12

I am using live_view so I tried to add it inside the root.html.leex header but still it doesn’t work.

13

I meant the head, not the header
 sorry

I just tested and checked that the default favicon appears
 in chrome.

14

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.

15

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

16

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:

  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 ..)

The 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:

Note: the + 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 <head>):

<%= render "_favicon.html", assigns %>

If there’s no issue with any of those suggestions, then I’d defer to @kokolegorille’s advice. :blush:

4 Likes
17

Thank you so much. It worked!!

2 Likes