ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

空いた時間でファビコン作成してみた。

      2014/07/12

fav256

今日は少し時間があったので、空いた時間でファビコン作成してみました。

 

ご存じの通り、ファビコンは「Favorite icon」の略ですね。

タブブラウザのタブに表示されますので、思った以上に見られる事が多くなってる思います。

 

SPONSERD LINK

きっかけ

このブログは、おすすめ情報ブログ ENJILOG(エンジログ)のENJIさんが作られたStinger3という人気のテーマを利用させて頂いています。

 

このSteinger3。

人気なだけあって、カスタマイズの情報なども多くて非常に使いやすいんですが、

その分、他の人とサイトイメージがダダ被りに。

(現状は、ほぼデフォルトのままなので特に。www)

 

つい先ほどもネットを巡回している時に、被ったブログを見つけました。

 

という訳で、そろそろカスタマイズでも初めてみようかと思い立ち、

まずは、ブログのシンボルであるファビコン(favicon)から替えてみる事にしました。

 

ファビコン サイズは色々ある

作成前に、基礎知識として、どのサイズで作れば良いかを押さえておきましょう。

【ブラウザ】

  • 16×16px : ブックマーク、タブブラウザのタブなど(普通はこれ)
  • 32×32px : IEの「よくアクセスするサイト」など(新しいタブ)

【Windowsのサイトのショートカットに対応する場合】

  • 16×16px : 小アイコン、一覧
  • 48×48px : 中アイコン
  • 128×128px : 大アイコン
  • 256×256px : 特大アイコン

※環境によって異なるかもしれません。www

【iPhone、Androidのウェブクリップアイコンに対応する場合】
ホーム画面やsafariの「お気に入り」に表示されるアイコンですね。

  • 144×144px 以上

※1サイズ用意しておけば、デバイス側で自動的に調整されるみたいです。

 

どのサイズにすれば良いの?

使われる頻度からいえば、ブラウザ対応には16×16pxで良いと思いますが、

色んな環境に対応したい場合は、マルチアイコン化(複数サイズを1ファイル内に保持する形式)すればOKです。

 

ちなみにStinger3は通常のファビコンとウェブクリップアイコンを別々のファイルで保持しています。

 

という訳で今回は

  • ファビコン(マルチアイコン)
  • ウェブクリップアイコン

の2種類を作りたいと思います。

 

ファビコンの作り方

まずは画像の準備ですね。
今回は、ファビコン用に以下の7種類を用意しました。

fav256 fav128 fav64 fav48 fav32 fav24 fav16

 

また、マルチアイコン用に次の画像を準備しました。

apple-touch-icon-precomposed

といっても、ファビコン用は一番大きい画像を作成し、サイズ変更が出来るツールを使って、徐々に小さくしていけばOKです。

※ 今回は、paint.netというツールを利用して、元画像、サイズ変更を行っています。
※ なお、paint.netは、

“自動選択やヒストグラム補正などの高度な機能をもつフリーのレタッチソフト。”

です。

paint.net – 窓の杜ライブラリ

 

画像のアイコン化

ファビコン用の画像は、アイコン化する必要があります。

といっても無料のWebサービスも多いので、好みのサービスを利用すれば良いと思います。

今回は、下記のウェブサービスを利用させて頂きました。

 

無料で半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。

favicon-creater

このサイトにファイルをアップロードして、アイコン作成をクリックすると、背景色の選択が表示されます。

favicon=creater2

今回は「透明」を選択。

※元画像の背景が透明で無い場合、何を選んでも良いと思います。

 

後はアイコンダウンロードをクリックすれば、勝手にファビコンを作成し、ダウンロードしてくれます。

 

サイトに設定して完成!

今回はソースの改変は面倒だったので、Stingerの記述は変えず、ファイル名を合せて対応しました。

最後はStinger3のImagesフォルダアップロードして完成です。

 

ブラウザのタブは、こんな感じ。

favicon-new

 

Androidだと、こんな感じ。

favicon-Android-home

どうやら、ファビコンの方が選択されるようですね。

最後に、iphoneの場合は、こんな感じです。

favicon-iphone-home

こちらは「apple-touch-icon-precomposed.png」の方が選択されています。

 

っと、こんな感じでファビコンの変更は完了です。^^

 

SPONSERD LINK

 - ブログカスタマイズ ,

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 470 follow us in feedly
SPONSERD LINK

  関連記事