ホームページのお気に入りマークの作り方
ブログを始め、誰でも気軽に作れるようになったウェブサイト。
はまれば面白くなって、どんどんサイトを飾りたくなってきます。
今回はアドレスの横や、お気に入りなどで表示されるマーク
favicon（ファビコン）の作り方を紹介。
FC2ブログで表示させることを中心に書いています。
フォトショップなどのソフトがなくても作ることが出来ますよ。
Step.1 favicon（ファビコン）の作り方
ブラウザで表示されるファビコンの大きさは16×16ピクセル。
また、ショートカット表示では32×32ピクセルです。
ピクセルという単語が分からない方は、マス目の数と思っていいです。
お絵かきロジックの初心者サイズですね。
今回は、16×16ピクセルサイズのファビコンを作ります。
先ずはこの16×16ピクセルサイズの画像を用意します。
（画像は拡大しています。）
注意点としては透明は一つの色として扱うこと。
よく分かんない人は、正方形のマークを作ると無難です。
画像の作り方、描き方は人それぞれ。
グラデーションなどは慣れていないと難しいと思います。
（私もカラーピッカーからグラデーションは無理。
Photoshopなどで画像を縮小するなどを行っています。）
画像編集ソフトがない場合は
お絵かきロジックの解答を参考にするなど
２色とかに色数を減らしてみるといいかもしれない。
今回は、手持ちの画像をアップロードして
自動縮小の機能がある
favicon.ico Generator さんで解説しています。Step.2 アイコンファイルの作成
作った画像を保存し、.icoファイルに変換します。
アイコン変換用のソフトが無い方は、サイトがあるので利用しましょう。
favicon.ico Generator 
http://www.favicon.cc/
サイト内にある Import Image ボタンをクリックして
ファイルを選択⇒Upload
サイト内に、アップロードした画像が表示されます。ここで最終調整。
大きなエディターなので、編集しやすいですね。
フォトショップを持ってない、使いたい画像が無い場合
このサイトで１から作ることも出来ます。
先ほどの注意点「透明は色として扱う」
アップロードされた画像の透明と思ってた部分が白だった場合
transparent（透明）を選択して修正しましょう。
サイトでは透明色は黄色とグレーの斜線ですね。
エディターの下にある Preview を確認して
「これでよし」となったら Download Favicon をクリック
アイコンデータがダウンロードされます。
Step.3 アイコンをアップロード・HTMLの編集
このアイコンデータを自分のサイトにアップロードします
FC2ブログの場合は、画像などをアップロードするのと同じ手順です。
アップロードが完了したら以下のソースをコピー
<link rel="shortcut icon" href="○○○">
○○○にはアップロードした画像のURLを入れてください。
このソースをテンプレート設定⇒HTML編集に貼り付けます。
公式テンプレートなどを借りて利用している場合も
カスタマイズＯＫであれば大丈夫ですよ。
ズラッと出てきたソースの中で、最初の方に
<link rel…
<link rel…
<link rel…
といった列が見当たらないでしょうか？
あれば、先ほどのソースをその列に加わるように貼り付け。
見当たらない、自作のホームページに貼り付けるなどの場合は
</head>
の上に貼り付けるといいと思います。
貼り付け完了後、エディター下の更新ボタンを押してブログの確認をします。
サイト名の頭についていたマークが変わりました。
※icoファイルは、ブラウザの種類によっては上手く表示されない場合があるそうです。
その時はfavicon.icoを一番上の階層にアップロードするといいみたいです。
ちなみに、表示されていないタブのFC2さんのファビコンですが
透明色と白を上手く使い分けているのが分かりますね。
FC2さんの場合、オブジェクトのマークなので
白い枠でも違和感は無いと思います。
ですが、私のような角を丸くしたマークで白を残してしまうと
四隅にゴミが付いているように見えてしまいます。
ファビコンのメリット
お気に入りされた時、ファビコンはサイト名と併せて表示されます。
お気に入りフォルダを見て頂ければ分かると思いますが
ファビコンの有るサイトと無いサイトでは
有るサイトの方が先ず目に付きます。
FC2ブログでは、最初からユニコーンのアイコンが出てきますが
このままでは、設定していない他の方のブログに紛れてしまいます。
分かりやすいマークを設定しておくと、お気に入りしてくれた方が
サイトを探す時に、見付けやすくなるんですね。
その他、ファビコン作成のサイト
今回はファビコンの作成にあたって
favicon.ico Generator さんのサイトを紹介しましたがこの他にも、ファビコン制作サイトがありますのでご紹介。
Favicon Japan!! -ファビコン作成方法-英語が苦手という方はこちらのサイトを。
トップページには色々なファビコンが並んでいるので
作るときの参考にもいいかも。
favikonエディターは無いです。
画像をアップロードして、ささっと作れるサイト。
英語表記ですが、シンプルなサイト構成なので使いやすい。
PROJECT FONDUE - Favicon Editor大きなエディターで、調整しやすい。
描画エディターの横にプレビューもあるので
確認しながら作業が簡単に出来る。
初めて作るので、上手くいかない。
なんて方は、お絵かきロジックの解答を参考にするなど
２色とかに色数を減らしてみるといいかもしれない。
ファビコン作成サイトは、探せばまだまだありますが
今回はこの辺りにしておきます。
ブログランキングに参加しています。
ブログランキングについて
テーマ : 初心者にも理解できる豆知識（ｿﾙﾃｨ的） ジャンル : コンピュータ
无域屋【むのくにや】
Chill's store
