Add App Favicons

Chapter Comments
1

From @jayair on Mon Apr 10 2017 01:01:17 GMT+0000 (UTC)

Link to chapter - http://serverless-stack.com/chapters/add-app-favicons.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/30

2

From @lepirlouit on Thu Mar 15 2018 13:15:28 GMT+0000 (UTC)

When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html. This may not work for client-side routers which expect the app to be served from /. Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:

"start_url": ".",

see : https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing

3

From @jayair on Thu Mar 15 2018 17:42:49 GMT+0000 (UTC)

@lepirlouit Can you verify that this change works on Android? If it does I’ll update the tutorial.

4

From @lepirlouit on Fri Mar 16 2018 09:31:56 GMT+0000 (UTC)

I confirm, I tested this and this works on android lollipop.

5

From @jayair on Fri Mar 16 2018 18:10:36 GMT+0000 (UTC)

@lepirlouit Awesome thanks. I’ll update it.

6

Great! It useful! Thank U

1 Like
7

Hi folks - I was wondering if you had a recommendation for someone building their app with yarn & webpack.

8

What do you mean? Not using Create React App?

9

At the end of this chapter, Firefox may not immediately display the favicon.

I observed it requesting apple-touch-icon.png and favicon-16x16.png, getting HTTP 200 for both of them, and then using neither of them in the browser tab (pinned or unpinned).

After a considerable amount of refreshing, restarting Firefox and restarting the node process, Firefox started displaying the favicon as expected. Although by that time, the result was quite unexpected. It started working while I was typing this. :rofl:

10

Yeah I’ve noticed something similar in other browsers too. They don’t seem to pick up the favicon right away. Even though the change is clearly made.

11

image
image1586×1100 88 KB

It seems the favicon generator no longer creates the android-chrome-256x256.png file and instead makes android-chrome-512x512.png.

Not sure if this change occurs because I originally uploaded an SVG file as my logo, but wanted to share just in case.

1 Like
12

Thanks for letting us know! We’ll have a look at this step in the next update.

1 Like
14

Can you explain what is meant by this line? I have no idea what to do here (first time I’ve been confused in this entire guide!):

“Finally head over to your browser and try the /favicon-32x32.png path to ensure that the files were added correctly.”