ホームーページのアイコンを作るヒントをご紹介します。
アイコン作成サイト
アイコンを簡単に作るためのオンラインサイトはたくさんあります。
大きく分けて２タイプあります。
- 画像をアップロードして、アイコンに適した形式、サイズに変換してくれるサイト
- 画像を描き、それをダウンロード可能なサイト
1 のタイプのサイトは、もしあなたが、アイコンのもとの画像を持っているのでしたら、大変便利です。しかし当然ながら元の画像を持っていないのならば利用することができません。
画像をアイコン形式に変換するサイト
2 のタイプのサイトでは非常に簡単なドロー (描画) ツールを備えており、アイコンを描いたらそれをダウンロードできるタイプです。自分でゼロから描くことになるので、ちょっと手間なのですが思い通りになんでも描くことができます。
アイコンを描いてダウンロードするサイト
- favicon.cc おすすめ
アイコンファイルの形式
アイコンファイルの形式は次のようにします。
ファイル形式
アイコンは次の３形式のいずれかであることを確認してください。括弧内は MIME タイプです。
- PNG (image/png)
- GIF (image/gif)
- ICO (image/vnd.microsoft.icon)
サイズ
サイズは 16×16 です。
ファイル名
ファイル名は “favicon” にしてください。つまりファイル形式にあわせて、次の三種類いずれかの名前にしてください。
- favicon.png
- favicon.gif
- favicon.ico
アイコンファイルのリンク
上記の方法でアイコンを作成して、ファイルをサイトのルート直下に配置すれば、基本的にブラウザが勝手に持って行きます。
しかし、下記のいずれかの方法で、ファイル形式にあわせて HTML のヘッダ内にアイコンファイルへのリンクを設定しておくと良いでしょう。
- <link rel=”ico” type=”image/png” href=”http://example.com/favicon.png”>
- <link rel=”ico” type=”image/gif” href=”http://example.com/favicon.gif”>
- <link rel=”ico” type=”image/vnd.microsoft.ico” href=”http://example.com/favicon.ico”>
上記、example.com の部分はあなたのホームページのドメイン名に合わせて書き換えてください。
アイコン作成のコツ
ブラウザのブックマークアイコンは、たとえ大手企業でもあまり凝らずにシンプルなアイコンを設定する傾向があります。
ですから、あまり費用をかけなくてもあなたの会社のブランドカラーを基調にしたり、ロゴを入れ込むなどしてアイコンを作れば十分である場合が多いといえます。
そこでデザインの素人でもある程度見栄えのするアイコンを作成するコツをご紹介します。
ひとことでいうと、少し小さめで、角を丸くするということです。
本来 16×16 なのですが、これを 15×15 で作成します。そして、角を１ピクセル透明に設定します。
試しに、上記で紹介した favicon.cc にてアイコンを作成する際、16×16 全部の塗りつぶしをした場合と、15×15 で角を 1 ピクセル削った場合の比較を示します。
|
| 図1. 小さめで角を丸くした場合 |
|
図2. 16×16 をいっぱいに塗りつぶした場合 |
