Add a favicon to a Phoenix app

Phoenix Forum Questions / Help
,
1

What is the proper way to add a favicon to a Phoenix app ?

4 Likes
2

:wave:

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">
21 Likes
3

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 !

4

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.

3 Likes
5

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)

6

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…

1 Like