多くのサイトがブックマーク時に表示されるファビコンを設定しています。iPhoneのホーム画面にブックマークしたときに表示するアイコンデザインも設定してみてはいかがでしょう。クリエイティブなデザインアイコンを利用することで、その他サイトとの差別化を図ることができます。
海外デザインブログDesignWoopで、ユニークなデザインが魅力的なiOSアプリ用アイコンデザインをまとめたエントリー「20 Stunning App Icon Designs」が公開されていたので、今回はこちらをベースに、アイコンの設定方法もいっしょにご紹介します。
詳細は以下から。
iOSアプリアイコンの設定方法
アップルの各デバイスによってアイコンの解像度は異なります。まずは一度サイズを確認しておきましょう。Retinaディスプレイの場合、通常アイコンの２倍サイズが必要になる点がポイントになります。
| デバイス | iPhone & iPod Touch(Retinaディスプレイ) | iPhone & iPod Touch | iPad(Retinaディスプレイ) | iPad |
|---|---|---|---|---|
| サイズ | 114x114px | 57x58px | 144x144px | 72x72px |
ポイント HTMLファイルへの追記方法
まずHTMLファイルにファビコンを加えるには以下のコードを追記します。
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
次にiOS用アプリを追記してみましょう。設定するときのポイントとしてrelリンクにはapple-touch-iconを記述し、57x57pxなど詳細なサイズを書き足しておきましょう。
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
ポイント スペシャルエフェクト
アイコンの周りをデコレーションするドロップシャドウや、光の反射エフェクトなどは自動的に追加されます。エフェクトを必要としない場合は、relリンクに-precomposedを追加しましょう。
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114x114-precomposed.png" />
ポイント Androidやその他の端末は？/strong>
iOS用アイコン素材は、Android 2.2以降の機種やBlackberry v6.0以降の端末でも同様に表示される仕組みとなっています。異なる端末用にアイコンデザインを新たに作成し、用意する必要はありません。
デザインの参考にしたい、ユニークなiOSアプリアイコンデザインまとめ
参照元リンク : 20 Stunning App Icon Designs – DesignWoop
参照元リンク : Creating Home Screen Icons for iOS and Android Devices – Designmodo