Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

App icon not displaying on some devices #22

Open
polygonnedpotato opened this issue Nov 3, 2020 · 22 comments
Open

App icon not displaying on some devices #22

polygonnedpotato opened this issue Nov 3, 2020 · 22 comments
Labels
bug Something isn't working help wanted Extra attention is needed
Milestone
MVP

Comments

@polygonnedpotato
Copy link

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.
@MoralCode
Copy link
Owner

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!

@polygonnedpotato
Copy link
Author

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.

@MoralCode
Copy link
Owner

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!

@MoralCode MoralCode added bug Something isn't working good first issue Smaller issues that are great first issues for anyone interested in helping out help wanted Extra attention is needed labels Nov 4, 2020
@MoralCode MoralCode changed the title No Icon App icon not displaying on some devices Nov 4, 2020
@polygonnedpotato
Copy link
Author

actually, the app icon is never displayed at all on any device. for example...
image
this is the app pinned in chrome os
image
and this is the app in chrome.

@polygonnedpotato
Copy link
Author

polygonnedpotato commented Nov 9, 2020 •
edited
Loading

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">

@MoralCode
Copy link
Owner

MoralCode commented Nov 10, 2020 •
edited
Loading

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!

@polygonnedpotato
Copy link
Author

polygonnedpotato commented Nov 10, 2020 •
edited
Loading

I just made a good icon for the mstile version
mstile-512
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

@MoralCode
Copy link
Owner

MoralCode commented Dec 1, 2020 •
edited
Loading

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

@MoralCode
Copy link
Owner

also probably caused by the same or similar routing issues that are causing #25

@MoralCode
Copy link
Owner

this could also be caused by whatever software is bundling the app up seemingly not including the image assets from the /icons directory

@polygonnedpotato
Copy link
Author

polygonnedpotato commented Dec 4, 2020 •
edited
Loading

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">

@MoralCode
Copy link
Owner

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

@polygonnedpotato
Copy link
Author

When you create a shortcut in a browser, it relies on the favicon and uses that.

@MoralCode
Copy link
Owner

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

@polygonnedpotato
Copy link
Author

polygonnedpotato commented Dec 23, 2020 •
edited
Loading

OK I'll check it out

Update: Still Does not work. Might run a lighthouse test to double-check.

@MoralCode
Copy link
Owner

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
Screenshot_20201224_104757

@polygonnedpotato
Copy link
Author

polygonnedpotato commented Dec 25, 2020 •
edited
Loading

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

@MoralCode MoralCode added this to the MVP milestone Jan 6, 2021
@polygonnedpotato
Copy link
Author

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.

@MoralCode
Copy link
Owner

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

Please let me know if there are still missing icons on the development branch so I can make sure they get added.

@polygonnedpotato
Copy link
Author

i am just testing the online version. i found it out via the javascript console.

@polygonnedpotato
Copy link
Author

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.

@MoralCode
Copy link
Owner

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

@MoralCode MoralCode removed the good first issue Smaller issues that are great first issues for anyone interested in helping out label Nov 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
MVP
Development

No branches or pull requests
2 participants
@MoralCode @polygonnedpotato