Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • YouTube Videos
  • Top Categories
  • Subscribe via Email
  • Ask A Question
  • Meet Dave
  • Home
  • Articles, Tutorials, and Reviews
  • How to create a custom Apple iPhone icon for your Web site

How to create a custom Apple iPhone icon for your Web site

January 22, 2008 / Dave Taylor / Articles, Tutorials, and Reviews, HTML & Web Page Design, iPhone & iOS Help / 69 Comments

One of the features added to the latest revision of the Apple iPhone operating system that’s garnered quite a bit of attention is the ability to save Web page bookmark icons directly on the main screen of the phone. Experimentation reveals that some sites have cool icons while most are just miniature representations of the Web site. What’s the difference? Read on and find out, including step-by-step directions on how you can easily ensure your own site (or blog!) has a custom iPhone icon too.

I’ve had a variety of different cellphones in the last few years as the technology underlying the cellular network has evolved from being about phone calls to offering up a wide variety of services, many of which have a small but growing price tag associated. A year ago I had just bought a Blackberry Pearl and was finding it a wonderful evolutionary step from the Motorola RAZR which, upon reflection, was all about the form factor and definitely not about the phone capabilities (especially with the crippled Verizon RAZR operating system).
The Apple iPhone represents a significant step in the evolution of these phone systems, however, because, like the iPod itself, Apple continually tweaks and tunes the operating system with updates. I can recall at least five updates since the phone was released, updates that generally improved stability and functionality, but also added new features and even entirely new applications (in this case I’m thinking of access to the iTunes Store, which just *poof* appeared one day).
The latest update to the phone, 1.1.3, added a very important new feature to the phone system, one that finally gives you the ability to truly customize and tweak the phone’s base screen for your personal tastes and requirements: Home Screen Bookmarks.
Let me show you how it works, then I’ll explain how to make a custom icon for those bookmarks too.
Here’s AskDaveTaylor as shown in the iPhone Safari browser:

Apple iPhone: Safari: Viewing Ask Dave Taylor Tech Support

Cute, eh? Everything in miniature, even my shrunken voodoo head.
To bookmark this – or any other page – you simply tap on the “+” symbol along the bottom of the screen, which brings up:
Apple iPhone: Safari: Creating a Bookmark for Ask Dave Taylor Tech Support

“Add Bookmark” adds it to your bookmark menu, but the interesting feature here is Add to Home Screen. Tap it and you’ll now have a chance to fine-tune the name of the bookmark:
Apple iPhone: Safari: Naming Bookmark for Ask Dave Taylor Tech Support

In this instance, shorter is definitely better. Even here, by adding the ” 2″ to the default “Tech Support” it kinda messes up the display on the iPhone screen, showing “Tech…port 2” to fit. Instead, I’ll actually skip the “2” so you can see the default home screen bookmark:
Apple iPhone: Safari: Home Page bookmark - default - for Ask Dave Taylor Tech Support

It’s kind of hard to see, but the icon itself is a tiny representation of the home page of the site, with the “Ask Dave” button supplying the red dot on the right side. Above and to the right you can see custom home page bookmark icons for Meebo.com and Twitter.com.
How’d they do it and how can I have my own custom icon too?
It’s surprisingly easy. You need to create a PNG format graphic file that’s 45×45 pixels in size, name it apple-touch-icon.png and drop it in the root directory of your Web site. Here’s what I had my graphics guy create:
Apple iPhone / iPod Touch custom icon

You’ll notice that it’s just a regular rectangular graphic image with no rounded corners or other fancy stuff. I’ve added the gray edge so you can see how big it is too, that’s not part of the graphic. Later you’ll see that the iPhone itself automatically rounds off the corners and adds a slight glassy reflection on the top half of the icon to make it more three-dimensional.
Anyway, adding that graphic is enough that when I again try to bookmark the AskDaveTaylor site with a home page bookmark on the iPhone, it’s a much improved icon:
Apple iPhone: Safari: Custom home page bookmark icon

Cool, eh? I’m now busy creating similar little icons for all of my sites so that iPhone users can enjoy shortcuts to all of my sites.
If you can’t add the icon graphic to the root directory of your Web site, or just want to keep things organized in subfolders, you can add a link command to specify a different filename or different location for the apple-touch-icon.png file:

<link rel=”apple-touch-icon” href=”/Graphics/iphone-icon.png” />

That’s all there is to it. Go forth, create your icon, and enjoy!

Thanks to Dan Dickinson, Anil Dash and, of course, Apple for detailing exactly how to accomplish this nifty trick.
About the Author: Dave Taylor has been involved with the online world since the early days of the Internet. Author of over 20 technical books, he runs the popular AskDaveTaylor.com tech help site. You can also find his gadget reviews on YouTube and chat with him on Twitter as @DaveTaylor.

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

69 comments on “How to create a custom Apple iPhone icon for your Web site”

  1. karen patrick says:
    January 30, 2014 at 1:00 am

    This quick tip has inspired me to have a go at creating my own icons. Thanks for this. It’s very handy.

    Reply
  2. Josiah says:
    January 10, 2014 at 3:32 pm

    Great tip! Thanks for the help.

    Reply
  3. Make your website iPhone-friendly with an easy mobile bookmarking icon | Karl Sakas says:
    September 9, 2013 at 8:32 am

    […] How to create a custom Apple iPhone icon for your Web site, by Ask Dave Taylor […]

    Reply
  4. takis says:
    December 8, 2012 at 2:38 pm

    Thanks for this information.. was really helpful. I’m trying the same method for my website iPhone service Επισκευή iphone

    Reply
  5. Di Ana says:
    October 12, 2012 at 7:14 am

    Hi, how do I delete all those icons which I created by the Add To Home Screen option? I have iOS6 and tried to delete it in the iTunes on my laptop, but there’s none of those saved links in the list of apps that I can delete. Though it’s fair enough, the saved links are not apps, yet how can I delete them, please?

    Reply
  6. emmm says:
    August 15, 2012 at 9:30 pm

    Hi, is there a way to create a non-glossy icon to the home screen?

    Reply
  7. Kenan says:
    July 15, 2012 at 1:13 am

    Thank you so much for this valuable information

    Reply
  8. sarvar says:
    April 7, 2012 at 1:05 pm

    HELLO MY NAME IS ……..

    Reply
  9. Tom Pizzano says:
    March 18, 2012 at 2:52 pm

    Thank you,
    It worked very well, perfect

    Reply
  10. Bruno says:
    January 31, 2012 at 12:34 pm

    My website is prestashop based. It’s also hosted on my own unix server. it’s a subfolder in my www.
    i’ll explain it better: the main website is voltumna.cjb.net
    e-piazza.biz domain is redirected to voltumna.cjb.net/e-piazza
    what you see on e-piazza homepage is in voltumna.cjb.net/e-piazza/themes/prestashop/header.tpl
    there is also index.tpl but it just as a HOOK Header
    i’ve dropped the icon.png (for ipod ipad and iphone4) either in e-piazza folder and in prestashop where header.tpl is. i’ve even used an universal link http://voltumna….png but still no success.
    any idea?

    Reply
  11. Alex says:
    January 16, 2012 at 7:23 pm

    Incredible! I didn’t know it until today! Now I can put it on my Diseño Gráfico minimalista website. Love it!
    Thanks

    Reply
  12. Jack says:
    January 9, 2012 at 5:29 am

    Thanks, got my Iphone Icon now avaible for my Website. – Hoesje

    Reply
  13. Hoesje says:
    January 9, 2012 at 5:27 am

    Thanks, got my Iphone Icon now avaible for my Website. Handy Information

    Reply
  14. Sergio says:
    September 6, 2011 at 1:20 am

    Try my online iPhone/ipad generator at http://www.quirco.com/iPhoneIcon/

    Reply
  15. Jared Bulford says:
    August 19, 2011 at 6:27 pm

    Hi Dave, thanks for sharing such great info. Like professionals we think that this article is really worth reading for everyone who’d like to have a custom app icon.

    Reply
  16. Luc says:
    June 22, 2011 at 12:17 pm

    Hi Dave, can you help me how to create a custom icon for other smarthphones than Apple for my Web site.
    Thanks in advance

    Reply
  17. Eivind says:
    June 20, 2011 at 11:22 am

    Job well done!

    Reply
  18. Kathy says:
    April 7, 2011 at 6:42 pm

    I put an app of my site on my phone I also put a link to your instructions on my site. I was just wondering how I could put something on my site as a downloadable App like I see on some of the other sites..If you could email me any information that would be great..
    Thank You

    Reply
  19. Shahzad says:
    February 9, 2011 at 2:44 am

    now the generator do not working and do not make code plz help

    Reply

Comment navigation

← Older Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

  • How to Check Energy Recommendations on your Windows Laptop
  • How Do I Customize New Tab Windows in Safari for Mac?
  • Can AI-Generated ChatGPT Text Be Accurately Identified?
  • How to Perform a Microsoft Account Security Audit and Checkup
  • How Can I Customize My Linux Dock / Taskbar?

On Our YouTube Channel

How to: Replace a Switchbot Door Sensor Battery

EMEET Luna vs INNOTRIK Studio Bluetooth Speakerphones -- DEMOS & REVIEW

Categories

  • AdSense, AdWords, and PPC Help (106)
  • Amazon, eBay, and Online Shopping Help (163)
  • Android Help (226)
  • Apple iPad Help (147)
  • Apple Watch Help (53)
  • Articles, Tutorials, and Reviews (346)
  • Auto Tech Help (15)
  • Business Advice (200)
  • ChromeOS Help (31)
  • Computer & Internet Basics (778)
  • d) None of the Above (166)
  • Facebook Help (383)
  • Google, Chrome & Gmail Help (188)
  • HTML & Web Page Design (247)
  • Instagram Help (49)
  • iPhone & iOS Help (623)
  • iPod & MP3 Player Help (173)
  • Kindle & Nook Help (99)
  • LinkedIn Help (88)
  • Linux Help (173)
  • Linux Shell Script Programming (89)
  • Mac & MacOS Help (911)
  • Most Popular (16)
  • Outlook & Office 365 Help (33)
  • PayPal Help (68)
  • Pinterest Help (54)
  • Reddit Help (19)
  • SEO & Marketing (82)
  • Spam, Scams & Security (95)
  • Trade Show News & Updates (23)
  • Twitter Help (220)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows PC Help (947)
  • Wordpress Help (206)
  • Writing and Publishing (72)
  • YouTube Help (47)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (62)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2023 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy