普段何気なくブックマークを見ているとリンク名称の脇にアイコンがありますよね。いつか設置しようと思いながらいつもいつも先送りになってしまうアイコン。「ファビコン」ですがインターネット上のサービスを使えば簡単に作成する事ができますので紹介します。
コンテンツ
ファビコンって何?聞いたこと無いんだけど・・・。
「Favorite icon(お気に入りのアイコン)」という言葉から来る造語です。ホームページにアイキャッチのために設置するアイコンと思って下さい。主に、ブラウザのお気に入りや タブ、スマートフォンでホームページを”ホーム画面”に置いた際に表示されるアイコンなどを指します。
上の画像はアフィリエイトをはじめてみようのファビコンですが、「ア」をモチーフにした簡単なものです。一番小さなもので16×16ピクセルのもので作らなければいけないのであまり難しいデザインはできません。割り切りとバランスが大切です。
ファビコン作成手順
元になる画像ファイルを作り、それを縮小して読めるか確認するを繰り返すだけです。私はgimpで元データを作成し作業を行いました。手順としては以下のとおりです。
- 48×48ピクセルで元データを作成する
- 32×32ピクセルに縮小し、読めるかを確認する
- 16×16ピクセルに縮小し、読めるかを確認する
- インターネット上のサービスでfavicon.icoを作成する(ファイル名はfavicon.ico固定です)
- ftpでWebサイトのルートにアップロードする
元データの作成
gimpで画像を新規作成しました。48×48ピクセルで背景は透明を選んでおくと良いと思います。
文字の追加で「ア」を追加。フォントサイズを微修正し色を緑にしたものをpng形式で出力します。それを次々縮小し32×32ピクセルと16×16ピクセルを作成します。サイズ感は以下のとおりです。
48×48ピクセル | ![]() |
32×32ピクセル | ![]() |
16×16ピクセル | ![]() |
インターネットサービスでfavicon.icoを作成する
今回「ファビコン favicon.icoを作ろう!」さんのサービスを使ってfavicon.icoを作成しました。
それぞれのサイズの画像ファイルを選択し、[favicon.ico 作成]ボタンをクリックするとアイコンのファイルが作成されます。
ftpでWebサイトのルートにアップロード
ftpでWebサイトのルートフォルダーに favicon.ico をアップロードします。
Webサイトにブラウザからアクセスするとファビコンが反映されます。ごくまれに反映されない場合がありますが、その時はキャッシュをクリアしてからWebサイトにブラウザからアクセスして下さい。
ここまでやったらスマホ用のアイコンもですよね。すみませんそれは別記事でまとめます。
この記事へのコメントはありません。