android


Separate favicon and android homescreen icon


In reference to these thorough write up's on the madness that is fav icons:
http://www.jonathantneal.com/blog/understand-the-favicon/
https://mathiasbynens.be/notes/touch-icons
http://en.wikipedia.org/wiki/Favicon
Android is now starting to use the <link rel="icon" .. /> syntax for it's homescreen icons which is the same as the fav icon syntax.
Does anyone have the mysterious size combinations and ordering to be able to target android with a separate homescreen icon and still keep cross browser compatibility.
For example our fav icon has a transparent background and we'd prefer dedicated icons for homescreens.
Answer
Build and declare the following icons in this order:
192x192 PNG icon (designed for Android)
194x194 PNG icon (classic favicon design, with transparency)
32x32 PNG icon (classic favicon design, with transparency)
Note: Android Chrome may use the 192x192 icon for both home screen and bookmark, although v37 does not seem to do so.
You can use this favicon generator to create code and pictures you can use as a template. Since it does not support differentiated pic for Android, you will need to add the 194x194 picture manually. Full disclosure: I'm the author of this site.
Explanations
For reference, Android Chrome uses a 192x192 icon
<link rel="icon" sizes="192x192" href="/favicon-192x192.png">
I've made some experiments about the Android Chrome favicon. The conclusions:
Android Chrome really uses the 192x192 icon.
If it cannot find a 192x192 icon, it looks for lower definition icons: 191x191. Else, 190x190. Else...
It does not use anything above 192x192. For example, if you offer a 16x16 icon and a 194x194 icon, Chrome picks the 16x16 icon, even if the 194x194 icon sounds like a better choice.
About the other browsers: as far as I know, there is no other browser that explicitly picks the 192x192 icon. Good. Else, that would be a blocking issue. There are two policies to deal with:
Some browsers choose some low definition PNG icons (eg. Windows Firefox uses a 32x32 PNG icon).
Some browsers choose the PNG icon with the highest definition (eg. IE 11).
With these information, the game is now to offer to both kind of browsers what they want, so no one (but Android Chrome) will take the special 192x192 icon. Thus the answer above.
A little additional twist about the order. Normally, it is irrelevant, since a browser is supposed to select an icon based on its size only. Except for Firefox, which picks the last declared icon.

Related Links

How to solve java.lang.RuntimeException error occured while executing doInBackground()?
How to set current time to edittext box in android without using time picker?
Android- mailto link won't work
mp3 file not getting pushed into android sd card on linux fedora
how to play video from sdcard
Different assets/content in paid/free version of Android app
Specifying a repeat count/mode in a ViewPropertyAnimator?
Problems with Linker in Xamarin Android 4.6
Storing Db in asset folder or create via code
Starting with Google Maps mapping, how to do?
How to capture screen exits on Android with Google Analytics
Android application using Eclipse. classpath conflicts (Unable to execute dex: Multiple dex files define)
How to set background resource instead of drawing a line in the compass view?
How to stop android service?
Multiple Constructor and null value
How to programmatically open and display a jp2 file on android?

Categories

HOME
httparty
api
merge
case
battery
obfuscation
oracle-apex-5
appcelerator
jquery-ui
data-visualization
missing-data
joomla3.0
libc
pybossa
flatpak
docx
do-while
azure-powershell
microsoft-dynamics-nav
dreamweaver
forgot-password
soci
shortest-path
parcelable
mongoid6
qliksense
flask-sqlalchemy
onload
fat
shared
linked-data
browser-sync
quickfixj
simplecv
html-encode
slacktextviewcontroller
sql-delete
fiware-cygnus
searchkit
magento-1.9.2.4
playframework-2.1
modernizr
release
bc
watchface
ssrs-2014
facebook-social-plugins
snapchat
sonarlint-eclipse
dtsearch
colorbar
android-testing
libjpeg
cpu-cache
template-toolkit
baidu
webjars
preprocessor
nikeplus-api
wso2developerstudio
simevents
omniauth-facebook
bizagi
qbxml
qt5.2
pypiserver
phonertc
rubaxa-sortable
lasso
jdk1.7
sql-server-data-tools
graphics2d
botan
xmltype
ghcjs
iso-prolog
webfinger
universal-image-loader
trdion2011
lambda-architecture
ora-00904
winginx
ios8-extension
menubar
inputmismatchexception
flex++
asplinkbutton
patricia-trie
cuda-gdb
extconf.rb
josql
apache-whirr
pylucene
qglwidget
pagemethods
murmurhash
unmanagedresources
technical-debt
cardspace

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App