« 2012年になりました | トップページ | 仮面ライダー40周年 記念マーク柄ネクタイ »

2012年1月 2日 (月)

ココログでiPhone・Safari用ブックマークアイコンとPC用ファビコンを作ってみた

iPhone、iPad、iPod touchを使っていてSafariからブックマークをホーム画面に追加すると、サイトのキャプチャーがアイコンになります。

しかし、ホーム画面にアイコンが増えてくると、ブックマークが見つけにくくなってしまう・・・

どうせならパッと見てわかりやすい方がいいので、ブックマークアイコンを作ってみました。

今日はそのやり方を忘れないよう、ここにメモっておくことに。


まずは、アイコン用の画像を用意します。

57×57ピクセル以上の正方形の画像が必要ですが、あまり画像サイズを大きくしすぎない方がいいかも。
ファイル形式は、jpg、gif、png、bmpのどれでもOK。

画像が準備できたらアイコン画像に変換します。

今回は iPhone Style Icon Generator というサイトを使いました。

Iconcra01

画面を下の方へスクロールすると UPLOAD ボタンがあるので、クリックしてアイコン用の画像を指定します。

画像がアップロードされるとアイコン加工のオプション画面が表示されるので、お好みでオプションを選びます。
Iconcra02
iPhoneスタイルのツヤ出し効果を付けたい場合は、ここでNO Glassを選びます。

NO Glassを選んでも自動的にiPhoneスタイルのツヤがいい感じで付きますが、ここでiPhone Styleを選んじゃうとちょっとひかりすぎる感じになるかな。

iPhoneスタイル以外のつや出し効果を付けるなら、ここで選択します。

下へスクロールすると、ツヤ出しレベルや影付き、変換後のアイコンサイズなどを指定できます。
Iconcra03
ここでは、次の通り指定しました。
 Level of Glass Reflection : Normal
 Icon Shadow : None
 Resize and Crop : Auto Resize
 Export Icon Dimensions : 128×128
 Export File Type : PNG
 Sharpen and Contrast : Level+3


アイコンの影はNoneでも、普通のアイコンみたいにうっすらと影が付きます。
ここで影を付ける選択をすると、むしろ影がつき過ぎてしまう。

アイコンのサイズは57×57ピクセルでOKですが、気休めに大きくしてみただけ。

ファイル形式は、後で作るファビコンと違う画像にするので、ブックマーク用のアイコンはPNG形式に。

全て指定したら CONTINUE をクリック。

すると、アイコンのイメージが表示されますが、実際にiPhoneでホーム画面に置いた時とちょっと違う。
Iconcra04
画像の横の
Click here to download the icon
をクリックすると、生成されたアイコンがダウンロードされます。

ついでにパソコンのブラウザで見たときのファビコンも作ってみました。

ファビコン用の正方形の画像を用意して、同じように変換。
このとき、出力のファイルサイズを32×32ピクセル、ファイル形式をICOにしました。

実際のファビコンは16×16ピクセルになります。

ここで作ったファイルを、ココログの管理画面からアップロードします。

アップロードしたら、ブログタブ - 設定タブ - 基本情報の『ブログの基本情報』画面で、ブログのサブタイトル(キャッチフレーズ)に次の記述をします。

アイコン用:
<link rel="apple-touch-icon" href="ファイルが置いてあるパス/ファイル名">
ファビコン用:
<link rel="shortcut icon" href="ファイルが置いてあるパス/favicon.ico">

Iconcra05

これでサイトに反映させればOK。

すでにパソコンでご覧の方はファビコンが表示されていると思いますが、ちょっと見にくいかな。

iPhone用のアイコンはいい感じ。
もちろん、iPadやiPod touchでも同じようになります。

|

« 2012年になりました | トップページ | 仮面ライダー40周年 記念マーク柄ネクタイ »

パソコン・インターネット」カテゴリの記事

更新履歴・お知らせ」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



« 2012年になりました | トップページ | 仮面ライダー40周年 記念マーク柄ネクタイ »