絵心なくても文字だけでできる簡単favicon講座

元気になってきたので、一昨日くらいからまるで仕事のようにブログのカスタマイズに熱中しています。ご飯を食べているときと飲み物をいれているとき以外はパソコンの前で座りっぱなしです。朝９時に会社について、終電で帰ってくる夫を待っている間、ずーっとカスタマイズをやっています。
こんなに体力と集中力が持つってことは復帰もばっちりね！でも、無理をしないようにしないと、また倒れることになりかねないのに気をつけないといけません。ブログのカスタマイズに熱中しすぎて、復帰の期間が延びたらしゃれになりません…。
今回は、faviconを設定してみることにしました。faviconというのは、ブラウザのURLの横に表示されているアレです。

ブックマークで区別するときにも分かりやすいし、何より見たときにかわいいし、ずっと欲しいと思っていたのです。でも、絵心もアイデアもない私は「そんな複雑なもの私にはできないわ」と敬遠していたのでした。しかし、今こそやってみるときだ！
さっそく、私のWebコンサルタント、夫に相談します。
「ねえねえ、faviconを作りたいんだけど」
「えー！アレはきちんと作ろうと思うと面倒なんやで」
なんでも、普通にブラウザに表示される16×１６だけ用意するばいいのかと思いきや、最近のIEのブックマークやデスクトップにドラッグしたときに表示される32×32や、48×48も用意しなくてはいけないとのこと。そりゃ、確かに面倒そうです。ってきり、チャチャっと16×16で何かを作ればいいだけかと思ってたよ…。
「で、どういうのにしたいの？」
「そこから相談にのって欲しいんやけど」
キレイなものを鑑賞するのは好きですが、キレイなものを作り出すのは苦手な私だから、そこが一番重要なんです。
「オペレーションはするけど、コンサルテーションはしないよ」
ガーン！確かに、外注にコンサルまでやってもらうと時間はくうし、お金はかかるし、外注の工数もかかって大変だだけどさ。夫はオペレショーンだけのはずの現場に行ってる（たぶん）のに、コンサルまでして大変そうだけどさ。
「でも、私の貧弱なアイディアだと「法」って文字をタイトルと同じ文字が白、バックグラウンドがピンクで表示するくらいしか思いつかないの…」
「…。それは貧弱なアイディアだな、っていえばいいわけ？。こう、どっか他のウェブサイトで参考にしたいところとかないの」
インスパイアってやつですか。いろいろ探索してみたのですが、どういうサイトが一発で分かるのが私は一番嬉しくて、このサイトだとやっぱり伝えたいことって、それはやっぱり「法務」だと思うので「法」の文字が一番だと思うんです。理系女子っていうのは、その付属要素というか元来の属性みたいなもので。「法」と「理」をくっつけたものも考えたけど、いくら何でも日本語二文字はキツすぎるし。そういうわけで夫に頼らずに自分で作ってみることにしました。
題して、「絵心なくても文字だけでつくる簡単favicon講座」です。
まずはアイコンファイルを作らなくてはいけません。夫に「faviconで検索したら、faviconのアイコンファイルを作るプログラムとかひっかかるんじゃないの」と言われたので、faviconで検索したら、Favicon Japan!がひっかかりました。なんと、Webサイトに適当なサイズの画像をアップしたらfavicon用のアイコンファイルを作成してくれるようです。適当なサイズの画像で文字だけのものなら自分だけでなんとかなりそうです。
これだ！こういうのを待ってたんだよ！
ただ、夫指摘の32×32などは作ってくれないようなので、もうちょっと検索して英語だけど32×32を作ってくれるFavicon from Picsを使うことにしました。日本語のナビゲーションがよいなどのこだわりがなければ、こちらがよさそうです。
次は適当なサイズの画像ファイルの作成ですが、これはPowerPointとMacintosh用のSnapNDragを使用することにしました。SnapNDragは、画面に表示中のスクリーンショットの全部や一部を保存するソフトウェアです。よく分からないですがWindowsならWinShotあたりを使うものでしょうか。
適当にPowerPointで正方形を描き、その中に文字を書き、背景や文字を好きなフォントと色に変更します。フォントは重要なのでぜひともオシャレでかわいいフォントにしましょう。32×32も作るので、少し大きめに作っておきましす。ちなみに、PowerPoint正方形を描くときは長方形ツールで長方形を描くときにShiftキーを押します。なぜか結構みんな知らないTipsです。
文字や背景をWeb上に存在する好きな色に変更するにはMacintoshでは、DigitalColor Meterを使うと夫に教わりました。Macintoshだと標準で、ApplicationのUtilitiesフォルダの中に入っています。画面上の選択した箇所の色情報を、PowerPointが対応しているRGBの8進数やCMYK、HTML等に書くためのRGBの16進数で表示してくれます。Windowsでは、パワースポイトを使うことになるのでしょうか。DigitalColor Meterを起動してカーソルをおもむろに、Webサイト上などのコピりたい色におくだけでRGBの8進数の値が出てきます。
PowerPointで好きな色でフォントの色を変更するには、フォントの色をクリックして、「その他のフォントの色」を選択し、さっきの8進数のRGBの値を入力します。長方形は少し複雑で、長方形を右クリックし、「オブジェクトの書式設定」をクリック、色で「その他の色」を選択し、同じくさっきの8進数のRGBの値を入力します。ちなみに、ここで「RGBつまみ」を「HSBつまみ」に変更して、彩度や明度を変更すると選択したものよりちょっとだけ暗い色やちょっとだけ明るい色が作れると夫に教わりました。夫にはこの機能を使って、このサイトのリンクの文字色を少し暗くしてみやすくしてもらいました。ありがとう〜。
このPowerPointで描いた正方形を、SnapNDragのSelectionボタンで選択して、ファインダーに表示されたキャプチャーされた画像をデスクトップ等にドラッグ＆ドロップすれば画像ファイルの出来上がりです。え？どうやってきちんと正方形にキャプチャーするのか？
気合いです。
目視で枠線を含まないように選択します。「そんないい加減なこと許せない」と思った貴方はまるで夫のようですね。私のやり方は向かないようです…。残念です。このような重要な事項を教えるのが遅いですか。申し訳ないです。でも、画像を大きくつくれば多少周りを選択してしまっても、faviconに変換するときに無視されてきちんと正方形になるのではないかと思うのでお試しください…。
出来たファイルをアイコンファイルに変換します。Favicon from Picsでファイルを選択し、Generate Favicon.icoをクリックします。プレビューを確認して、Downloadをクリックすればアイコンファイルfavicon.icoがダウンロードされます。
次は、この画像ファイルをサーバーにアップロードします。FTPソフトや、Movable Typeをお使いなら「ファイルのアップロード」あたりからアップロードしてください。
そして、最後にすべてのページにタグを設定します。ファビコンフォルダまでのURLはご自分の環境に併せて設定してください。

<link rel=”shortcut icon” href=”ファビコンフォルダまでのURL/favicon.ico”>

Movable Typeだとすべてのテンプレートに以下の設定をすることになると思います。

<link rel=”shortcut icon” href=”<$MTBlogURL$>/favicon.ico”>

以上で、faviconの設定が完了です。
どうですか？ブラウザでの見た目が見違えりませんか？