Creating a WebClip Bookmark Icon

Discussion in 'iOS Blog Discussion' started by MacRumors, Jan 16, 2008.

  1. macrumors bot

    MacRumors

    Joined:
    Apr 12, 2001
    #1
    [​IMG]

    Dan Dickinson posts instructions on how to create your own custom WebClip Icon for your website:

    - Create a 57x57 PNG.
    - Name it "apple-touch-icon.png"
    - Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)

    More instructions for web designers available at Apple's iPhone Dev Center.

    Article Link
     
  2. macrumors 68020

    mainstreetmark

    Joined:
    May 7, 2003
    Location:
    Saint Augustine, FL
  3. macrumors 6502a

    Joined:
    Sep 7, 2007
    Location:
    Boston, MA USA
    #3
    so when's macrumors going to add one? I'm looking forward to having a better icon for the site on my home screen. :)
     
  4. macrumors 65816

    zombitronic

    Joined:
    Feb 9, 2007
    #4
    Cool. Kinda like a favicon.

    Google.com must have one of these, since no matter where you scroll to, you get a nice, centered Google logo as your icon.
     
  5. macrumors 6502a

    domness

    Joined:
    Jan 14, 2008
    Location:
    Sheffield, UK
    #5
    Wow, thanks for the headsup :)

    Just added it to my site now. Looks alot better on the springboard :D
     
  6. macrumors 68020

    mainstreetmark

    Joined:
    May 7, 2003
    Location:
    Saint Augustine, FL
    #6
  7. macrumors 68030

    Drumjim85

    Joined:
    Oct 7, 2007
    Location:
    DFW, TX
    #7
    exactly ... come on Macrumors!!!!
     
  8. macrumors regular

    tethead

    Joined:
    Apr 13, 2005
    Location:
    NYC
    #8
    nice, that was easy! thanks for the tip!

    www.week4paug.net - beware, it's a website for Phishheads!
     
  9. macrumors regular

    Joined:
    Aug 21, 2007
    #9
    Awesome

    I had noticed that Google already did this with their iPhone search/gmail/calendar/reader sites...
    I just didn't know exactly how to implement it. Props for the mad investigatory skills!
     
  10. macrumors 6502

    msmith2112

    Joined:
    Sep 17, 2002
    #10
    Cool man! You ever log on to Phantasy Tour?
     
  11. macrumors 65816

    bacaramac

    Joined:
    Dec 29, 2007
    #11
    Come on MR

    Come on MacRumors, we need an icon, can you throw us a bone?

    No rush, but hurry. This is great.
     
  12. macrumors 6502

    Joined:
    May 30, 2007
    #12
    I thought it wasn't working for me, but it turns out you have to wait on the screen where it asks you to name it. If you click save too quickly, it will not pull back the PNG.
     
  13. macrumors 603

    roland.g

    Joined:
    Apr 11, 2005
    Location:
    One mile up and soaring
    #13
    I think we need a sticky of major sites that have this icons.

    BTW, thanks arn and MR, looks great.
     
  14. macrumors newbie

    Joined:
    Jul 1, 2007
    #14
    Apple, heal thyself

    As of 2 minutes ago, Apple didn't even have one of these in place. What's that about? Nobody let their graphics department in on the secret? Is it "in the air"? Am I missing something?

    Although this is probably obvious, a fast way to check this from a browser is to type in "www.[domain].com/apple-touch-icon.png" -- it will return the icon if it's there.
     
  15. macrumors 604

    ravenvii

    Joined:
    Mar 17, 2004
    Location:
    Melenkurion Skyweir
    #15
    The regular version of the MacRumors site has the .png, but the mobile version doesn't.

    Put one up there on the mobile site!
     
  16. macrumors 6502

    Joined:
    Jan 11, 2006
    #16
    Try my apps :)

    see sig. I just added support for them today. Kinda cool!
     
  17. macrumors member

    Joined:
    Jul 8, 2002
    Location:
    Chicago
  18. macrumors newbie

    Joined:
    Jan 17, 2008
    #18
    Where do I put the Icon in iWeb

    I'm new to web site design and I just read this thread. I am using iWeb by Apple to make my webpage. i want to ad this icon for my website, but where do i put the icon that i made in iWeb. What folder???

    Thanks.
     
  19. macrumors 6502

    Joined:
    Jan 17, 2008
    Location:
    Glossop UK
    #19
    new webclips

    Wikipedia has a great webclip, any other new ones today ?
     
  20. macrumors newbie

    Joined:
    Jan 23, 2006
    #20
    Engadget, Gizmodo, iLounge, and Meebo now have icons.

    CNN now has an icon.

    Ars Technica and Flickr now have icons.

    BBC (beta) now has an icon.
     
  21. macrumors 68020

    samh004

    Joined:
    Mar 1, 2004
    Location:
    Australia
    #21
    Got one added for my website too, now just trying to work out how to get the favicon to work, haha.
     
  22. macrumors member

    ericelben

    Joined:
    Jan 21, 2008
    Location:
    Iowa
  23. macrumors regular

    Joined:
    Sep 25, 2006
    Location:
    London
    #23
    Cool thanks - added "hi-res" icon in 5 minutes - great!

    Hi all,

    Thanks for a great little tutorial and good links - here's our new :apple:iPhone icon for Undervalued-Shares.com:

    [​IMG]
    http://www.undervalued-shares.com

    Jonas :apple:
     
  24. macrumors 68000

    Joined:
    Jan 26, 2008
    #24
    Got mine up: http://www.dbstalk.com

    Had to go back and look for a nice clean version of my logo. It looks really sharp and clear. Thanks for the info.
     
  25. macrumors newbie

    Joined:
    Jan 28, 2008
    #25
    Awesome!

    I didn't even know I could make one of these! But now my site is a little more iPhone friendly (always glad to do so)! Thanks for the head's up!

    If you want to check mine out, go to www.NickCarverPhotography.com (has a lot of images, may take some time to load the first time).
     

Share This Page