How to create a custom iPhone and iPod touch icon for your web siteどのように自分のWebサイト用のカスタムiPhoneとiPodタッチのアイコンを作成する

by Ross McKillop on August 11, 2008 ロス McKillop 2008年 8月 11日にで

Webデザイン&開発iPodの

This brief tutorial will explain out how to create a custom icon to display on the iPhone and/or iPod touch springboard for your web site.この簡単なチュートリアルをどのようにiPhone 、ウェブサイトの/またはiPodに触れる飛び板を表示するためのカスタムアイコンを作成して説明する。

iPhoneのスプリングボードにsimplehelp.net用のカスタムサイトのアイコンを

  1. When a user adds a site to their springboard by using the Add to Home Screen feature, by default, the iPhone or iPod touch will use a thumbnail of the visible part of the page being displayed in Safari.飛び板には、ユーザーのホーム画面の機能には、 デフォルトで追加使用して、サイトを追加すると、 iPhoneまたはiPodに触れるSafariで表示されているページの目に見える部分のサムネイルが使用されます。
  2. は、 iPhoneとiPodタッチ飛び板のデフォルトのサイトのアイコンを
    click to enlargeクリックして拡大する

  3. If you’d like your site to have a much nicer icon appear on the springboard when people add it, create a 57px by 57px PNG icon, name it apple-touch-icon.png , and upload it to the root folder of your site. Note: Apple themselves actually use a 129×129px icon, so you may want to experiment to see what size looks best for yours (it will scale to the default iPhone/iPod touch springboard icon size).もしあなたのサイトにしたいのですが、ずっと優れたアイコンを持つように跳ね板が人々を作成57px PNG形式のアイコンが57pxに追加すると、リンゴのようなタッチicon.png名、表示されるし、サイトのルートフォルダにアップロード注:アップル自身が実際にいるので、実験に何を見たいの可能性がありますサイズは129 × 129pxのアイコンを使用して、あなたに最適だ(これは、デフォルトのiPhoneにスケール/ iPodのタッチ飛び板アイコンのサイズ) 。

    If you don’t have access to the root folder of your site, or you’d like to put the icon elsewhere, add the following line to the <head> of your site:もしあなたのサイトのルートフォルダへのアクセスを持っていないか、別の場所にアイコンを置くには、に次の行を追加したいのですが、サイトの<head>タグ:

    <link rel="apple-touch-icon" href="/path/to/file.png" /> (and upload the file.png to that folder). <link rel="apple-touch-icon" href="/path/to/file.png" /> (およびそのフォルダに) file.pngアップロードします。

  4. Now when someone adds your site, it will have a nice icon associated with it.お客様のサイトを追加するときに、それはいいのアイコンが関連付けられている。
  5. 飛び板は、 iPhoneとiPodタッチにサイトを追加
    click to enlargeクリックして拡大する

  6. Done!完了した!
  7. は、 iPhoneとiPodタッチの跳躍台とsimplehelp.net用のカスタムアイコンを
    click to enlargeクリックして拡大する

Related Posts: 関連記事:
  • How to customize the music icons (buttons) on your iPhone or iPod Touchどのように音楽のアイコンがあなたのiPhoneまたはiPodタッチ(ボタン)をカスタマイズする
  • How to reorder the icons on your iPhone or iPod Touch springboardどのようにあなたのiPhoneまたはiPodタッチスプリングボード上のアイコンを並べ替え
  • How to accurately relocate the cursor in Notes for your iPhone or iPod Touchどのように正確にiPhoneまたはiPodタッチのノートにカーソルを移転する
  • How to take screenshots of your iPhone or iPod Touch screenどのようにあなたのiPhoneまたはiPodタッチ画面のスクリーンショットを取るに
  • Screenshot Tour: Crash Bandicoot Nitro Kart 3D for iPhone/iPod Touchスクリーンショットツアー:ニトロカートクラッシュバンディクー3次元iPhone / iPodのタッチ
  • Get Simple Help tutorials just like this one in your email inbox every day - for free!お客様のメールの受信ボックスに毎日-無料で、この1つだけのような簡単なヘルプのチュートリアルを入手! Just enter your email address below:すぐ下にあなたのメールアドレスを入力してください:

    You can always opt out of this email subscription at any time.いつでも、いつでも、このメール購読のオプトアウトすることができます。


    Bookmark and Share ブックマークして共有する

    { 1 trackback }トラックバック 1

    iPhone/iPodTouch: Creiamo un'icona personalizzata per il nostro sito web | DelfinsBlog (Guido Arata) iPhone / iPodTouch : 1 Creiamo un'icona personalizzataイリノイノストロ食物ウェブ| DelfinsBlog (グイド新太)
    08.13.08 at 5:57 am 08.13.08で午前5時57分

    { 1 comment… read it below or 1のコメントを読む...または下に add one 1つ追加 }

    1 1 Jeffrey 10.08.08 at 7:20 am ジェフリー 10.08.08で、午前7:20

    How to create a custom iPhone and iPod touch icon for your web siteどのように自分のWebサイト用のカスタムiPhoneとiPodタッチのアイコンを作成する

    I am not sure what you are referring to.私はあなたに何を指していることではない。 Where is the ROOT?どこにルート語は何ですか? and WHAT Site.とはどのサイトです。 On my local computer?自分のローカルコンピュータでは? On a website?ウェブサイトでは? Is this for developers or just for anyone?この開発者のためまたは単に誰かのためですか?
    Thanksありがとう

    If you don’t have access to the root folder of your site, or you’d like to put the icon elsewhere, add the following line to the of your site:もしあなたのサイトのルートフォルダへのアクセスを持っていないか、別の場所にアイコンを置くには、あなたのサイトには、以下の行を追加してください:

    (and upload the file.png to that folder). (およびそのフォルダに) file.pngアップロードします。

    Leave a Commentコメントを残しなさい

    You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> これらのHTMLタグ属性:の<a href=""使用することができますtitle=""> <abbr title=""> <acronym title=""> <b>ダウンロード<blockquote cite=""> <cite>の<code> <del datetime="">の<em> <i> <q cite=""> <strike> <strong>