01.16.2008 at
2:41 am
Now that the iPhone and iPod Touch allow a user to save a WebClip bookmark to your site on their Home Screen, most web developers are wondering, “How do I customize this so it doesn’t look so horrible?” To specify a bookmark icon for all pages of a web site, place a PNG image named “apple-touch-icon.png” at the root directory of your web server - similar to the “favicon.ico” which appears to the left of your URL in your web browser.
To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/> within the <head> element of the page.
<head>
<title>chrisTHIS!</title>
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
</head>
The bookmark icon dimensions should be 57×57 pixels. If the icon is a different size it will be scaled and cropped to fit. My examples are shown to the right. Design tip: leave space around your artwork since Apple crops the edges to make the icon round.
Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application.
Note: I have noticed that the <head> element is not needed for this to work. Just put the .png file in your root folder! Perhaps this isn’t needed if you use the default “apple-touch-icon.png” file name in the root folder? I went ahead and did it anyway, just to be on the safe side.
01.14.2008 at
3:20 pm
Since I switched over from Windows XP to Mac OS X Leopard this past November one of the more puzzling things has been how to add desktop shortcuts. This was real easy in Windows’ Internet Explorer. Just Right-click your desktop and select “Create Shortcut”. On a Mac (FireFox or Safari) this is not an option.
I finally found the answer, and like most things on the Mac, it’s easier than the PC.
You may have noticed while surfing around that when clicking text on a page it sometimes turns into a box, one that you can drag. I know I did, and I always wondered what I could do with it. Now I know.
You can drag any text link from a page onto your desktop to create a shortcut. Also, if you want to make a desktop shortcut of the current web page, just drag the icon that appears to the left of the URL in the address bar. This is by default a globe icon, but a site can customize it so it may look like some other 16×16 image. Either way, just drag it to your desktop and it will create a .webloc file. Just click it to open it up in your default browser!
Works great in both FireFox and Safari.
Just click and drag the icon to your desktop when it turns to a hand icon.