In my HTML, I followed the guidelines here: https://mathiasbynens.be/notes/touch-icons
Currently, I have only 192x192 size icon for my app. My phone is Samsung Galaxy 4 running Android 5.0.1.
With this, Chrome on Android adds the icon correctly to homescreen but Firefox on Android does not. The latter adds a generic "C within a square" icon. See attachment.
Is this a limitation with Firefox? Is there a way to solve this?
When running RealFaviconGenerator's current favicon compatibility test with Firefox 58 on a Samsung Galaxy S7 running Android 7, I get the 180x180 Apple Touch icon:
What can go wrong with your particular case?
Your icon is slightly larger, 192x192, whereas the highest resolution defined by Apple is 180x180. In the article you mention, the reason for this is Android Chrome. But now Chrome is using the Web App manifest so this trick is probably outdated.
Caching issue. Browsers are well-known for reloading icons only when they want to. Maybe you tried various solutions and now Firefox is stuck with an old setup. Use another phone or try again in a few hours.
Full disclosure: I'm the author of RealFaviconGenerator.
Related
I'm working on a Cordova mobile app that uses jQuery Mobile. On this app, we've created buttons using icons from the Font Awesome library. In Chrome, everything works great -- the icons appear as they should. However, if we compile the app and run it on our Android test devices then the icons will start to randomly replace other icons on the same page.
If we use Chrome DevTools to inspect the page while the mobile app is running on the phone, the icons display correctly on the desktop inspector, but not on the mobile device.
Here's a screenshot of the icons displaying correctly. This is from Chrome DevTools inspecting the mobile app while it's running live on the mobile device.
Here's a capture of the same screen taken from the device. I've indicated in red where the differences in icons are.
More pertinent observations and facts:
Our primary test devices are Samsung S7s running Android 7.0 -- all of these devices have this same problem.
The icons do not start to replace one another until we've changed pages a couple times.
It's not consistent which icons get replaced. It will vary each time we fire up the app. One icon that gets replaced one time might be left untouched the next time.
This problem does not occur on our older Android test device (Droid Razr Maxx HD running Android 4.4.2).
I've tried re-compiling the app with the android-targetSdkVersion removed, set to 22 and set to 25. In all instances, the icons continue to swap randomly on the newer Androids.
We've upgraded cordova-android to the latest version (6.2.3 as of writing) and the issue remains.
If I use Chrome DevTools to manually remove the Font Awesome icon CSS class (e.g., fa-user-plus) and then re-add it again, the icon will then display correctly on the device.
We've noticed that sometimes (as you can see in the screenshot below) a small white line might appear underneath an icon that has been replaced.
Does anyone know what might be causing this? Any theories on how it's possible for Chrome DevTools to show one thing while the device shows another would also be helpful.
I stumbled across a solution for this problem while debugging a separate issue on the same app where position:relative elements would disappear while I was scrolling on a mobile device.
While I haven't been testing on an iPad, the solution provided in this question iPad Safari scrolling causes HTML elements to disappear and reappear with a delay fixed both issues.
What I did was apply -webkit-transform: translate3d(0,0,0) to the class .ui-btn (the jQuery Mobile class for buttons). After a re-compile, the icons would no longer randomly swap with one another.
I have little insight as to why -webkit-transform: translate3d(0,0,0) fixes this apparent WebView rendering bug. If anyone has a deeper understanding of what's going on, please leave a comment!
Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.
Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.
I was checking this blog http://mathiasbynens.be/notes/touch-icons and it worked fine for iPhone , but for Android I get a weird Icon on home screen.
Snapshot of Page I was viewing and in the bottom left a tiny touch icon that I added in headers.
Why is this so Is it possible to get it like a touch icon in my android device(2.2) as well ?
This favicon compatibility test indicates the following regarding Android:
Samsung Galaxy S (Android 2.3.3): the default browser takes the 16x16 PNG icon (so not the Apple Touch icon) and adds some decoration around it. Although correct, this is not the expected behavior.
HTC Desire (Android 2.2.2): the default browser takes the 57x57 Apple Touch icon, which is correct.
Nexus 7 (Android 4.4):
Chrome takes the 152x152 Apple Touch icon, which is correct.
Firefox takes the 196x196 PNG picture, which is a bit surprising but correct, too.
In the end, you might observe some unexpected behaviors on old Android devices.
In order to maximize compatibility and avoid playing with Photoshop&friends, HTML code and devices, you can try this favicon generator. Some extensive testing has been performed already. Full disclosure: I am the author of this site.
Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.
I have build an iPhone app and using same code to compile Android app. When I run the app in the phone (HTC Desire) instead in emulator, the main window shrinked to the quarter of the screen size, everything else is working fine except this. Can someone please let me know if there is any configuration to look for in Titanium ?
Ubuntu
Appaccelerator Tatanium Studio
HTC Desire
This could possibly help you?
Looking at screenshots on Appaccelerator website I see that Android phone is presented by HTC Hero, which is kind of old for 2011. This makes me think that Appaccelerator is not aware of newest high-density devices like Desire. If Appaccelerator uses physical coordinates for pixels then on high-density phones you'll get exactly the behavior you describe.
Anyways, phrase patent-pending development technology stated on the Appaccelerator website is already an alarming sign against using it.