We've moved discussions to Discord

Favicons

Ugurcan Kaya
realfavicongenerator.net only generates the following favicon files

<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="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#722b9a">
<meta name="msapplication-TileColor" content="#722b9a">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

but jumpstart-pro has more files in the public folder. Are those important for specific devices? If so, how can we generate the same set of files?

There is also an apple-touch-icon-precomposed file left from the initial commit in the public folder. We can remove it if not necessary.
https://realfavicongenerator.net/favicon_checker?protocol=http&site=jumpstartrails.com
John Chambers
Hi , I think this one generates most of the icons for you https://www.favicon-generator.org/

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
 
Ugurcan Kaya
  thanks, will try!

Though the documentation refers to the other website so I am curious if I am missing anything there
https://jumpstartrails.com/docs/branding

Chris Oliver
I spent a day or two recently trying to figure out what was the most up-to-date list of favicons that were necessary. The realfavicongenerator.net site developer had posted about it recently on Stack Overflow, so I think that those are the safe icons to use.

It might be that more is better and we should use favicon-generator.org instead. I'm not 100% sure.
Ugurcan Kaya
I worked on this a bit, Current favicons are sufficient. The only thing seems to be missing is the splash screen files, which is only important if you plan to release your app as a PWA. 
Chris Oliver
What are the details on that?
Ugurcan Kaya
If Jumpstart is going to support PWA we need to add service workers and splash screens. (this is probably another discussion.) If there is not going to be a support for PWA, current files are sufficient to generate favicons.

App manifest already exists in the template, generated by that favicon site, which is also a requirement for PWA. And I used this site to generate splash screens for iOS:
https://appsco.pe/developer/splash-screens

But this generator does not support screens for iPad. Files required by iPad are well explained here:
https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3

Android automatically generates splash screens using generated favicons.

In case anyone needs more information about PWA, there are some good presentations made at GoogleIO.
https://developers.google.com/web/progressive-web-apps/

Another good video:
https://www.youtube.com/watch?v=DfFlBWCQjzA

Ugurcan Kaya
  It seems like favicon always falls back to the 16x16 version and it looks blurry on high-resolution displays. Moving 32x32 below fixes.

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Ugurcan Kaya
realfavicongenerator.net only generates the following favicon files

<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="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#722b9a">
<meta name="msapplication-TileColor" content="#722b9a">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

but jumpstart-pro has more files in the public folder. Are those important for specific devices? If so, how can we generate the same set of files?

There is also an apple-touch-icon-precomposed file left from the initial commit in the public folder. We can remove it if not necessary.
https://realfavicongenerator.net/favicon_checker?protocol=http&site=jumpstartrails.com
John Chambers
Hi , I think this one generates most of the icons for you https://www.favicon-generator.org/

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
 
Ugurcan Kaya
  thanks, will try!

Though the documentation refers to the other website so I am curious if I am missing anything there
https://jumpstartrails.com/docs/branding

Chris Oliver
I spent a day or two recently trying to figure out what was the most up-to-date list of favicons that were necessary. The realfavicongenerator.net site developer had posted about it recently on Stack Overflow, so I think that those are the safe icons to use.

It might be that more is better and we should use favicon-generator.org instead. I'm not 100% sure.
Ugurcan Kaya
I worked on this a bit, Current favicons are sufficient. The only thing seems to be missing is the splash screen files, which is only important if you plan to release your app as a PWA. 
Chris Oliver
What are the details on that?
Ugurcan Kaya
If Jumpstart is going to support PWA we need to add service workers and splash screens. (this is probably another discussion.) If there is not going to be a support for PWA, current files are sufficient to generate favicons.

App manifest already exists in the template, generated by that favicon site, which is also a requirement for PWA. And I used this site to generate splash screens for iOS:
https://appsco.pe/developer/splash-screens

But this generator does not support screens for iPad. Files required by iPad are well explained here:
https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3

Android automatically generates splash screens using generated favicons.

In case anyone needs more information about PWA, there are some good presentations made at GoogleIO.
https://developers.google.com/web/progressive-web-apps/

Another good video:
https://www.youtube.com/watch?v=DfFlBWCQjzA

Ugurcan Kaya
  It seems like favicon always falls back to the 16x16 version and it looks blurry on high-resolution displays. Moving 32x32 below fixes.

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Notifications
You’re not receiving notifications from this thread.
© 2022 Jumpstart Pro by GoRails, LLC