単純Favicon作成方法手順

2012年頃には「２万個以上のPNG形式画像のアイコンを見つけることができるPNG Factory」の日本語紹介記事もあったりして、アイコンはレディー・メードの時代になっているようです。

ともあれ、それはそれ、これはこれ。

専門家が使用する高価有償のAdobe・Illustratorでデザインして、Photoshopで縮小・・・という流れが理想なのでしょうが、ここでは、多くの素人でも作れる方法を記録してみます。

無償ソフト（Windouws系）で最も単純なファビコン（16×16px）の作成方法

原図は懐かしい「ペイント」で作成して、ｂｍｐ→ico、またはpngで保存。

補助として、ウェブ上にある最もシンプルな「画像→アイコン変換ツール」を利用する。

という流れに・・・

ちなみに、icoはMicrosoft Windowsにおける画像ファイルフォーマット。したがって、ウィンドウズの定番「ペイント」で開くことができます。

ほかのグラフィックソフトウェアで編集・出力が可能なのは、GIMP、CorelDRAW、IrfanView、Paint.NET（プラグインが必要）とのこと。Jtrimなどでは開きません。

一方、アイコンをドット絵として作成する専用ソフトもあります。「無料アイコン（ico）作成ソフト」

ここで紹介されているソフトは、全て自分のパソコンにダウンロードするモノ。
「アイコン・エディタ」６つと「アイコン・画像変換ソフト」６つの合計12点。国産、海外製といろいろです。

たとえば「Dot Work」ではテキスト入力すると綺麗なドット絵になります。「ペイント」も使い慣れればうまくいきそうです。

Dot Work　　　　　　　　　　　　Paint（Win)

---

１．ペイントを起動

「ホーム」→「イメージ内サイズ変更」をクリック

「ピクセルで320×320」にして「OK」

「表示」で「ルーラー・グリッド線などにチェックを入れる。

ペイントの100％表示では、グリッドのマス目一つが10pxとなります。

ペイントは800％まで拡大できますので、1pxのグリッドマス目も表示できます。

手間がかかりますが、この１pxでドット描写修正するときめ細やかな画像になりそうです。

２．アイコン画像を作成（10倍のサイズで）

ここでは「文字」をテーマにします。たとえば「MTOS　編集者」。

画面320ｐｘ角に２段にして入力してみます。

文字寸法の目安

• 文字の１ポイントは約0.353㎜
• 2・54㎜＝１インチ＝72ポイント
• 96dpiのデスクトップ画像なら１インチ96ドット
• 72ポイント＝96px
• １ポイント＝0.75px／1.33ポイント＝１px

320pxの幅に４文字入るとすると、72ポイントほどにして「Ａ」ボタンでテキストを入力します。一旦文字を任意の場所に置きます。

「四角形選択」で文字を囲んで、ポイントをつまみほしい寸法に拡大。

位置を整えます。「四角形選択」で何回でも調整できます。


２．アイコン画像を縮小（10％や50％で）

「サイズ変更」でパーセンテージを選んで10％（32×32px）やさらに50％（16×16px）に縮小。

「ファイル」の「名前を付けて保存」でBMPを選択。

「ファイルの種類」に「24ビット ビットマップ」を選択。

※ここで ファイル名の拡張子を .ico にしてしまいます。

Bloggerでは「アップロードはJPG、GIF、PNG 形式のファイルを使用してください。」とあるのですが、ICOでもアップロードできるようです。

←こちらは32pxのアイコン。何とか認識できますのでデスクトップのアイコンには使えます。

←こちら16pxのアイコン・・・やはりテキスト２段の７文字は小さすぎますね。

←といって漢字の「編」だけでももう一つくっきりしません。

←ひらがなかカタカナの一文字が「ブラウザのタブ」にはよろしいようで。「hei・ico」


◆　ムーバブル・タイプにアップする場合の注意

理由はわかりませんが、上の流れで作成した「hei・ico」をアップロードすると「.bmp」に自動的に変更されてしまいます。

そこで、「画像→アイコン変換ツール」を利用して、さらにicoに変換。これをアップロードすると「.icon」のまま保存されました。

実際にアップした例はこちら （ただし、認証が必要な会員制。ブログの一般公開には矛盾_(._.)_）