Search code examples
iconsfavicon

How do I include a custom Apple home icon?


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


Solution

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