今日は少し時間があったので、空いた時間でファビコン作成してみました。
ご存じの通り、ファビコンは「Favorite icon」の略ですね。
タブブラウザのタブに表示されますので、思った以上に見られる事が多くなってる思います。
きっかけ
このブログは、おすすめ情報ブログ ENJILOG（エンジログ）のENJIさんが作られたStinger3という人気のテーマを利用させて頂いています。
このSteinger3。
人気なだけあって、カスタマイズの情報なども多くて非常に使いやすいんですが、
その分、他の人とサイトイメージがダダ被りに。
（現状は、ほぼデフォルトのままなので特に。ｗｗｗ）
つい先ほどもネットを巡回している時に、被ったブログを見つけました。
という訳で、そろそろカスタマイズでも初めてみようかと思い立ち、
まずは、ブログのシンボルであるファビコン(favicon)から替えてみる事にしました。
ファビコン サイズは色々ある
作成前に、基礎知識として、どのサイズで作れば良いかを押さえておきましょう。
【ブラウザ】
- 16×16px ： ブックマーク、タブブラウザのタブなど（普通はこれ）
- 32×32px ： IEの「よくアクセスするサイト」など（新しいタブ）
【Windowsのサイトのショートカットに対応する場合】
- 16×16px ： 小アイコン、一覧
- 48×48px ： 中アイコン
- 128×128px ： 大アイコン
- 256×256px ： 特大アイコン
※環境によって異なるかもしれません。ｗｗｗ
【iPhone、Androidのウェブクリップアイコンに対応する場合】
ホーム画面やsafariの「お気に入り」に表示されるアイコンですね。
- 144×144px 以上
※１サイズ用意しておけば、デバイス側で自動的に調整されるみたいです。
どのサイズにすれば良いの？
使われる頻度からいえば、ブラウザ対応には16×16pxで良いと思いますが、
色んな環境に対応したい場合は、マルチアイコン化（複数サイズを１ファイル内に保持する形式）すればＯＫです。
ちなみにStinger3は通常のファビコンとウェブクリップアイコンを別々のファイルで保持しています。
という訳で今回は
- ファビコン（マルチアイコン）
- ウェブクリップアイコン
の２種類を作りたいと思います。
ファビコンの作り方
まずは画像の準備ですね。
今回は、ファビコン用に以下の7種類を用意しました。
また、マルチアイコン用に次の画像を準備しました。
といっても、ファビコン用は一番大きい画像を作成し、サイズ変更が出来るツールを使って、徐々に小さくしていけばＯＫです。
※ 今回は、paint.netというツールを利用して、元画像、サイズ変更を行っています。
※ なお、paint.netは、
“自動選択やヒストグラム補正などの高度な機能をもつフリーのレタッチソフト。”
です。
画像のアイコン化
ファビコン用の画像は、アイコン化する必要があります。
といっても無料のWebサービスも多いので、好みのサービスを利用すれば良いと思います。
今回は、下記のウェブサービスを利用させて頂きました。
無料で半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。
このサイトにファイルをアップロードして、アイコン作成をクリックすると、背景色の選択が表示されます。
今回は「透明」を選択。
※元画像の背景が透明で無い場合、何を選んでも良いと思います。
後はアイコンダウンロードをクリックすれば、勝手にファビコンを作成し、ダウンロードしてくれます。
サイトに設定して完成！
今回はソースの改変は面倒だったので、Stingerの記述は変えず、ファイル名を合せて対応しました。
最後はStinger3のImagesフォルダアップロードして完成です。
ブラウザのタブは、こんな感じ。
Androidだと、こんな感じ。
どうやら、ファビコンの方が選択されるようですね。
最後に、iphoneの場合は、こんな感じです。
こちらは「apple-touch-icon-precomposed.png」の方が選択されています。
っと、こんな感じでファビコンの変更は完了です。＾＾
