Windows10 無料でBlogger用ファビコン（半透過マルチアイコン）を作る方法
公開日： 2016年5月10日火曜日 Blogger Web windows10 アプリ
Bloggerのレイアウト設定の「ファビコン」が気になったので調べてみました。
試しに、Windows10 標準アプリのペイントを使って一個作ってみたのですが、イラスト周囲の余白部分を透明にするのにちょっとコツが必要だったので、やり方を共有したいと思います。
ファビコンとは
Webブラウザのアドレスバーで、サイト名の横に表示されているマークのこと。例えば、Yahoo!だと「Y!」が表示されていますよね。あれがFavicon（favorite icon；お気に入りアイコンの略）です。
自分のブログにオリジナルマークを表示できたら、いっそうブログへの愛着がわいて楽しくなりますよね。
「ペイント」をつかってオリジナルアイコンを作る方法
作成サイズは32ピクセル✕32ピクセル、画像フォーマットはPNGで保存しよう
-
Windowsアイコン横の検索バーに「ペイント」と入力し、「ペイント」アプリを起動させる
-
「ファイル」→「プロパティ」→「イメージのプロパティ」で32ピクセル✕32ピクセルに設定する
-
画面が小さくて作業しにくいので、600～800%程度にズームして作業を進める
-
「表示」→「縮小表示」で、別窓に32ピクセル✕32ピクセル表示のプレビューが表示されるので、確認しながらイラストを描く
-
細かい柄は潰れてしまうので、できるだけシンプルに描くのがコツ。「表示」→「グリッド線」でグリッド線を表示させると、境界線の微調整がしやすい
-
のちほど拡張子を変更させるが、とりあえず、アイコンデザインが完成したらPNGで保存しておく
無料のWebサービスを使ってアイコンデザインの背景を透過処理する
残念ながら、「ペイント」単体で周囲の余白部分のみを透過処理することができないようです。
代わりに、透過PNG画像作成ツール のようなサイトを使って、ソフトをインストールしないで、Web上で無料で透過処理を行います。
背景色と同じ色がアイコンデザインの内部に含まれている場合、そのまま透過処理を実施すると、中の色まで
一緒に透明になってしまいます（例：背景と数字の部分が白）。
そのため、透過させたい部分だけ、アイコンデザインで使用されていない色に変更してから透過処理を行ってください。
無料のWebサービスを使ってfavicon.icoを作り、Bloggerに設定してみよう
ファビコン favicon.icoを作ろう!を使えば、32x32ピクセルの原案を元にリサイズして、16x16と48x48ピクセルのマルチアイコン（.ico拡張子）が簡単に作れます。
それでは、さっそくBloggerダッシュボードの「レイアウト」→「ファビコン」でfavicon.icoをアップロードしてみましょう。
ファビコン設置後、直ぐに反映されない場合は、いったんWebブラウザを閉じて再起動してみてください。
ファビコンを更新した時は、キャッシュが残っていると変更前のファビコンが表示されてしまいます。その場合は、古いキャッシュを削除すると新しいファビコンが反映されます。
おまけ
WebブラウザからBloggerの自分のブログのショートカットを作成し、自作ファビコンを簡単に設定できます。
https://～のブログ管理画面のショートカットを作成することはできませんが、自分のブログから管理画面に移動することができるので、すぐにログインできて便利ですよ。
