App icon not displaying on some devices
Opened this issue · 22 comments
While the app does have an icon, never in the app itself is it used. this would be a great thing to fix in the future.
Thanks for the suggestion!
To be honest I think the icon originally created just so that there was something to use as a logo and/or home screen icon.
That said, if you have any ideas for new logo designs or ways that the icon can be used within the app, I would definitely be open to considering them!
well, for starters, there should be a favicon and icons formatted for all devices (ex: apple iPhone, android, etc.)
here is a list of possible icon names that can be used and how they are used:
favicon.ico -- Favorites icon and icon that appears on tab
favicon-16x16.png -- alt favicon
favicon-32x32.png -- lager alt favicon
android-chrome-192x192.png -- Google chrome icon
android-chrome-256x256.png -- larger Google Chrome icon
apple-touch-icon.png -- Safari icon
mstile-150x150.png -- Microsoft Edge icon (Windows 10)
safari-pinned-tab.svg -- Safari icon (macOS X)
that should be all.
ohhh that makes more sense, I thought you meant like displaying the icon to the user inside the <body> of the page.
There are already 512px and 192 px icons defined both here for iOS and in the manifest.json file for android as I was under the impression that these would be automatically down-scaled to the appropriate smaller sizes (and effectively replace the .ico files), however if this assumption is not the case then I can add that to the backlog.
Thanks for the detailed list!
actually, the app icon is never displayed at all on any device. for example...
this is the app pinned in chrome os
and this is the app in chrome.
Here is an example that can be used
<title>ClassClock</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=LbWArJzeO7">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=LbWArJzeO7">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=LbWArJzeO7">
<link rel="manifest" href="/site.webmanifest?v=LbWArJzeO7">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=LbWArJzeO7" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=LbWArJzeO7">
<meta name="apple-mobile-web-app-title" content="ClassClock">
<meta name="application-name" content="ClassClock">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#008080">
<meta name="viewport" content="width=device-width, user-scalable=no">well that definitely isn't supposed to happen. Thanks for the sample code!
I'm not sure when I will be able to get around to making this change though, so if you'd like to make a pull request, that would be amazing!
I just made a good icon for the mstile version
The reason it is empty is that the version needs to be completely white. I will link it here: https://user-images.githubusercontent.com/73083772/98701936-ad6cf980-232e-11eb-8ea8-960cfa2f671b.png
and here are the favicons:
https://drive.google.com/file/d/13mmBl7ACMnvm2FuujNk2FMJ2rAIOxr20/view?usp=sharing
https://drive.google.com/file/d/13iOvn3akUNjob3vMlKSkOSCaQd02lKVB/view?usp=sharing
upon some further investigation, it seems like thee icons may have been configured correctly, but the redux-first-routing model of the app is not configured to correctly returning the appropriate assets.
this could also be caused by whatever software is bundling the app up seemingly not including the image assets from the /icons directory
Another reason it might not be showing up is that the favicon is not properly configured. I am going to fork this to Repl.it and run some tests to see if I can fix it. I will report back with the information I found.
Edit: Nevermind, I found out the solution.
The reason there is no icon popping up is that there is no icon defined as the favicon. here is a line of HTML code that would work in this situation
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">does the rel attribute not allow multiple values like class does?
i thought that this line added the icon with a rel value of both shortcut and icon, but there's also so many different things going on with this that its somewhat difficult to tell what is actually causing the problems
When you create a shortcut in a browser, it relies on the favicon and uses that.
turns out that all that was needed was to move the icons to the public folder so that whatever web-packing software ClassClock is using (probably the one that comes with create-react-app) knows to just copy it to the built site.
Should be fixed in fab5c5a
OK I'll check it out
Update: Still Does not work. Might run a lighthouse test to double-check.
huh ok, To be fair i also wasnt fully testing every icon and was mostly just going off of the fact that the favicon now shows up when running the dev server as compared to the live app. I'll probably run a lighthouse test as well just to see what that says
I already did some and will send them to you.
https://drive.google.com/file/d/1CQLHrwqPOw2sfR44AaPOdaxeL1Y5rW7-/view?usp=drivesdk
https://drive.google.com/file/d/1GBrjTTCmaq2Z_us7EpDsZu_mdCKzKJKC/view?usp=drivesdk
I JUST FOUND OUT WHAT'S GOING ON!
The icon does not show up as the icons lead to a 404 page. it is possible that the icons were not uploaded correctly and thus failing to load the icon.
Good catch. I was being dumb and put the icons in the wrong place.
Are you testing with the main branch or the development branch? When I work locally on the development branch I am able to see the favicon loading correctly in my browser tab.
Please let me know if there are still missing icons on the development branch so I can make sure they get added.
i am just testing the online version. i found it out via the javascript console.
it turns out that the online version relies on the gh-pages branch, meaning that theoretically if the file classclockicon-192.png was added to a folder named icons in the gh-pages branch, the favicon would show up.
Yep, thats pretty much what happened in commit fab5c5a, i think there was already an icons folder in the repository, but when webpack generates builds of the site for releasing to gh-pages it seemed to be skipping that folder rather than copying it to the gh-pages branch since it was not in the public folder where static assets are copied from.
after this commit, icons in public/icons in the repository should be copied to /icons in gh-pages and show up properly. Currently this commit is only on the development branch so it wont be publicly visible on the main ClassClock site until it is merged to main, however, it should be visible on the beta site at https://beta.web.classclock.app if you want to test it out