アトリエ・エクレア

2DCG&3DCG, プログラミング, 日記などを掲載してます。

Favicon の作り方 ( マルチアイコン )

Favicon の作り方 ( マルチアイコン )

マルチアイコンっていうのは一個のファイルでありながら、その中に複数の大きさのアイコンを持っていて、用途に合わせて適切な大きさのアイコンが使用されるようになっているんです。

自分も新たにアイコンを作り直したので、作り方も併せて記事にしました。

★これがマルチアイコンです

favi09.jpg・・・といっても、見た目は普通のアイコンです。

★ちなみに以前のアイコンがコレ

favi01.jpg

あの・・・突き立ててるのは親指です。(*´ω`*)中指じゃないよ。

(1) 絵を描く

favi02.jpg

とりあえず、photoshopなりGIMPなり、アイコンにする絵を描きます。
解説はphotoshopでいきます。
サイズは64×64で描いてます。

よく利用されるアイコンサイズはだいたい以下みたいです。 ※単位: px

  • 16x16 WEBのタイトルや、お気に入りなど
  • 24x24 Windows
  • 32x32 デスクトップショートカット
  • 48x48 Windowsエクスプローラーでアイコン表示
  • 64x64 Windows & Mac
  • 128x128 Mac
このうち128x128で作ってしまうと、16x16での表示を狙い通りに制御し難くなるので、64x64で作ります。
全部のサイズを用意しなくても、無い場合は近いものが拡大縮小されるみたいです。
全部を用意するとファイルサイズが大きくなります。
今回は128x128は捨てて、他の5つに対応するために64×64で描きました。

背景を無しにして透過状態にします。
いろいろなWEBサイトのタイトルバーにあるFaviconをみてもらうとわかると思いますが、背景が白のまま残ってるよりも、透過しているほうがちょっとかっこいいからです。

(2) 書き出し

favi03.jpg

64x64で絵を描いたら、あとは書き出しの設定だけで、他のサイズの書き出しも可能です。
ファイル → Webおよびデバイス用に保存 で、上のような画面が開きます。

favi04.jpg

透過を利用するので、右のほうにあるプリセットの項目でPNG-24を選択。
図の青枠で囲ったところにある、画像サイズで幅と高さを入力。
適用ボタンを忘れずに押す。

favi05.jpg

以上の操作を繰り返して、5つのサイズ(16x16,24x24,32x32,48x48,64x64)の画像を揃えます。

(3) マルチアイコン化

favi06.jpg

photoshopだけではマルチアイコンをデフォルトで作れないようなので、フリーソフトを利用させてもらいます。
ご登場いただくのは「 @icon変換 」です。
このソフトすごいです。手軽さでは最強かもしれません。
+.゜(*´∀`)b゜+.゜ 作者に感謝しながら使わせていただきます。

Link

ここからダウンロードしたら解凍するだけですぐに使えます。
インストール不要です。

favi07.jpg

@icon変換を起動します。
先ほど作った画像ファイル5つを全て選択して、@icon変換にドラッグ&ドロップします。

favi08.jpg

@icon変換に入った5つのファイルを全部選択します。
ファイル→マルチiconとして保存 を選んで、保存します。

favi09.jpg

+.゜(*´∀`)b゜+.゜ マルチアイコン完成!!

(4) WEBページに設置する

★ファイル名はなんでもいいみたいですけど、Wikiによれば、
” ルートディレクトリにfavicon.icoという名称のファイルを設置しておくと、HTML/XHTML中で指定が無くともFaviconとして認識するブラウザもある ”
とのことなので、favicon.icoでいいんじゃないかと思います。

★ファイルを置く場所も、基本的にはルートディレクトリでいいかと思います。
※ ちなみにFC2ブログでは直接ルートディレクトリには置くことはできません。FC2ホームページでは可能です。
FC2ブログでは、ファイルアップロード機能からアイコンファイルのアップロードを行い、そのときのアドレスを ”アイコンファイルへのパス” として使用します。

★head要素の中に以下のコード (2行目と3行目のみ) を書きます。


※ アイコンファイルへのパスのところには、アイコンファイルをアップロードした場所へのパスを入力します。
※ 1 行目と4行目のコメントアウトは要りません。
こうしないと、このページ自体に適用されてしまうため、コメントアウトしています。
2行目と3行目だけ書けばOKです。

(5) ブラウザのキャッシュをクリア

念のため、ブラウザのキャッシュをクリアして完了です。

※ Internet Explorer で、ローカル環境(デスクトップなど)で確認しても、反映はされなかったです。
他のブラウザで確認するか、実際にアップロードしてみると、IEでも反映されました。

おしまい。


コメントの投稿

非公開コメント

マイブログへようこそ♪
PLEASANT_DRAGON

2DCG&3DCG,プログラミング,
日記などを掲載中☆

(*´▽`*)コメント大歓迎です☆

最新記事
記事一覧

全ての記事を表示する

カテゴリ
SAI (0)
mi (2)
C (1)
C++ (1)
C# (0)
VBA (0)
月別アーカイブ
最新コメント
RSSリンクの表示
リンク
FC2ブログランキング

FC2Blog Ranking

ピックアップ商品1♪










カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ブログ内検索フォーム
プロフィール

エクレア

Author:エクレア


  • 2DCG&3DCGの創作活動をしています。

  • SF系のメカが大好物。

アクセスカウンター
Twitter
ピックアップ商品2♪