1

How am I able to ad an icon for when a user downloads my website to there apple iphone or ipod it sets a custom icon.

Example: http://www.askdavetaylor.com/1-blog-pics/iphone-custom-home-page-icon-adt.png

Also, How do i make a popup recommending them to add it to there home page but only do the popup if its not on there homepage.

Example: http://static.cubiq.org/uploads/2011/01/add2home-screen2.jpg

SimplePi
  • 95
  • 1
  • 4
  • 15

1 Answers1

1

Basically, what you need is a 152x152 picture named apple-touch-icon.png and placed at the root of your web site. Yet, this is only a first shot and you need additional pictures and HTML code to get the job done correctly. For example, if you declare the pictures properly in your HTML pages, it will also work on Android. Great!

You should read Apple specs for full reference.

This favicon generator can generate the pictures and HTML code you need. Full disclosure: I'm the author of this site.

About the conditional popup: as far as I know, there is no way to detect the presence of a web clip on the home screen. In other words, you won't be able to predict if the popup should be displayed or not.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • So the popup displays no mater what? Also where can i find that code? I notice that it is the exact same code with every website. – SimplePi Feb 17 '14 at 13:52
  • The popup you refer to is probably bookmark-bubble. It does its best to show only when suitable. However, it cannot do a perfect job, and in particular it cannot detect if a bookmark already exists on the home screen (although it does some guesswork). Have a look to http://stackoverflow.com/questions/1141979/javascript-for-add-to-home-screen-on-iphone – philippe_b Feb 17 '14 at 14:34
  • THank you, will apple-touch-icon work for iphones too? – SimplePi Feb 18 '14 at 13:31
  • 1
    Sure! And also for Android devices if your declare it properly (look at Apple specs). – philippe_b Feb 19 '14 at 12:14