Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

ファビコンを作成・設定する3つの手順

ファビコンを作成・設定する3つの手順

ファビコンは小さなものですが、意外と目につきますよね。ブラウザを何枚も出したときはタイトルが見えなくなるのでファビコンが目立ちますし、お気に入りにも表示されるので自分のサイトを目立たせるにはオリジナルのファビコンを設定したいものです。

そこで当ブログで作成した手順を紹介します。と言ってもさほど難しいことはなく、やり方さえ分かればすぐに終わります。ちなみにぼくの愛用ソフトは「GIMP(ギンプ)」です。
理由?高性能だからです(嘘。無料だからです放心状態の顔)。

ファビコン画像を作る

まずやることはファビコンの画像を作成することです。どっかのサイトからイラストをダウンロードしてもいいですし、自分で作成しても問題ありません。小さな画像なので細かいものは表現できません。なので自分で作るのもありです。

ちなみにこのブログのファビコンは「超」シンプルです。「も」しもドロップシッピングの「も」です。単純なので1~2分でできました。作成はGIMPなので、同じように作りたい人はGIMPをダウンロードしてくださいね、タダなので。

GIMPのダウンロードはこちら←公式サイトですが英語のサイトを見ただけでクラッとする人はこちらからどうぞ。

GIMPでファビコン画像を作る

GIMPを起動したら、まず上部のメニューの「ファイル」から「新しい画像」をクリックします。

gimpメニュー

このような画面が出てくるので、キャンバスサイズを「幅32px高さ32px」にして「OK」をクリックします。

新しい画像を作成

表示されるファビコンのサイズは「16×16」なので、「16×16」の画像を一つ作っておけばほとんど問題はないようです。「32×32」にする理由は、デスクトップにショートカットアイコンを作成するときにこのサイズが使われるからです。

ショートカットアイコン

まぁほとんど出番はないと思うので「16×16」の画像だけでも大丈夫だと思います。「OK」をクリックしたら真ん中に小さなキャンバスが現れますが、いくらなんでも小さすぎるので左下にある拡大・縮小するとこで400%にします。「100%」の横の三角をクリックするとできます。

拡大縮小

これでキャンバスが拡大されて作業できるようになりましたね。今回は青背景に「も」の字を入れるだけの単純なファビコンなので、一から作っていきます。なにかのイラストを使いたい場合は、今までの作業を飛ばしていきなりGIMPに画像をドロップしてくださいね。

ではまず背景をもしもっぽい青に変えるために、ツールボックスの塗りつぶしを選択します。

塗りつぶし

そしてその下にある黒と白のカラーパレットの黒いほうをクリックして、塗りつぶす色を選択します。

色を選択

もしもっぽい色を作って選択しOKをクリック。そして画像のどこでもいいのでクリックすると背景色を塗ることができます。

塗りつぶし後

次は文字を入力するためにツールボックスにある「A」というのをクリックします。これは文字を画像に入れるツールで、今回はキャンバスいっぱいに描きたいのでキャンバスいっぱいにドラッグします。

テキストツール

そして「も」と入力し、入力した文字をドラッグします。すると黄色くなり選択されます。これは選択された部分をエディットできるよという意味で、すぐ上の小さな窓にある数種類のエディットを選択した文字に施すことができます。

フォントを「Meiryo Bold」にし、サイズは31px、文字の色は白に変えました。

テキストエディット

次は入力した文字をいい感じのとこに移動します。それには移動ツールを使います。

移動ツール

右側にあるレイヤーが並んでるところの「も」を入力したレイヤーをクリックして選択し、レイヤーの「文字が書かれている部分」をドラッグ&ドロップしてベストポジションに移動させます。文字の書いてない部分でドラッグ&ドロップしてしまうと、背景が移動してしまうので注意が必要です。間違って動いちゃった場合は、メニューの編集から「レイヤーを移動 を元に戻す」をクリックすれば戻ります。

レイヤーセレクト

こんな感じになりました。

完成

左下の拡大・縮小するとこで100%に戻して確認してみましょう。

画像をファビコンで使えるように保存する

できた画像を今度はファビコンに使えるような状態で保存します。具体的には「.ico」という拡張子で保存するわけですが、実は「.png」でも「.jpg」でもいいんです。でもウインドウズの機能的なことなのか詳しいことは分かりませんが、表示されない可能性があるようなんですね。

なので、様々な環境で表示されるために「.ico」という拡張子にすると考えればいいのではないかと思います。現在のGIMP2.8では、GIMP自体で「.ico」にエクスポートすることができます。ウェブ上に「.ico」に変換するサイトもありますが、GIMPがあれば問題ありません。が、ちょっとしたコツがあります。

詳細はぼくの無知さによって分からないのですが(すみません…疲れた顔)「できた画像を.pngで保存し、それを.icoに変換する」という手順が必要になります。なのでまずは画像をドキュメントでもデスクトップでもいいので.pngで保存します。

手順はメニューの「ファイル」から「名前を付けて保存」を選択します。別ウインドウが出てくるので「favicon.png」という名称にして保存をクリックします。すると次のようなウインドウが出てきます。

エクスポート

そしたら「エクスポートダイアログを呼び出す」をクリック。次の画面では何も変更せずに「エクスポート」、さらにさらに別の画面が出てきますが、何も変更せず「エクスポート」をクリックします。これで.png形式で画像を保存することができました。

今度はそれをGIMPで「.ico」に変換しなければいけません。でもめっちゃ簡単です。今の画像は保存したので、GIMPの画面の右上にある「×」で一度閉じます。「画像 ‘[名称未設定]‘ の変更を保存しますか?」と出ますが、すでに保存されているので「保存しない」をクリックします。これでGIMPが起動した直後の状態に戻ります。

そこに先ほど保存した「favicon.png」をドロップしてください。して「ファイル」から「名前を付けて保存」を選択し、ファイル名を「favicon.ico」に変え保存をクリック。すると先ほどと同じ画面が出てくるので、同じく「エクスポートダイアログを呼び出す」をクリックします。

次の画面が.icoに変換する画面で、ファイル名は「favicon.ico」になっているのでそのままにして、右下にある「エクスポートされたすべての画像」というメニューをクリックします。すると様々な拡張子を選択できるようになるので、その中から「Microsoft Windows アイコン (*.ico)」というのを選択しエクスポートをクリック。

拡張子を選択

するとこのような画面が出てきます。

icoにエクスポート

どうやら色に関することのようですが、良く分からないので魂が抜けた顔デフォルトのまま「エクスポート」をクリックすると完成です。デスクトップにしろマイドキュメントにしろ、保存した場所に「favicon.ico」というのがあるのが確認できるはずです。

ファビコン画像を設定する

できた画像をファビコンとして設定するには、ヘッダー内にそれを表す記述をしなければいけません。ワードプレスやHTMLサイトなど、サイトの作り方によって方法は変わりますがとにかくヘッダー内にファビコンを表示させる記述をすればいいわけです。

記述内容は次の通りです。

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

typeによってMIMEタイプを指定し、hrefでファイルの位置を指定します。hrefだけは自分の環境に合わせてください。

ワードプレスの場合はheader.phpに記述してもいいですし、function.phpに記述するなら次のようにすればいいと思います。

function blog_favicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/images/favicon.ico">'."\n";
}
add_action('wp_head', 'blog_favicon');

この場合は、管理画面から画像をアップするのではなく、FTPソフトなどで使用しているテーマのイメージフォルダにアップする必要があります。

ファビコンが表示されない時の対処法

ファビコンが表示されない時は

  1. 設定が間違っている
  2. 画像がファビコン用になっていない
  3. ブラウザのキャッシュ

あたりが考えられます。

設定は実際にサイトを表示させてから、右クリックでソースを表示させてヘッダー内を確認すればOK。画像に関しては「.ico」になってるけど実はファビコンに使えない画像になってることも考えられます。上記はGIMPで変換する方法を紹介しましたが、上手くいかないならこちらの「アイコン変換ツール」などで変換してみてください。

意外とはまりがちなのが三つ目のキャッシュです。まず先にすることは「リロード」。それでもだめならブラウザのキャッシュを一度削除すると表示されることがあります。IEで説明すると、ブラウザを開いて右上にある歯車の形をした「ツール」をクリックし「インターネットオプション」をクリックします。全般というタブの中に「閲覧の履歴」という項目があり「削除(D)…」というのがあるのでクリックします。

インターネットオプション

すると次のような画面が出てきますので「インターネット一時ファイル」「履歴」にチェックをつけて削除をクリックします。

インターネットオプション項目選択

その後、一度ブラウザを閉じてから再びチェックしてみてください。意外とこのパターンは多く思わぬ落とし穴になっている可能性があります。実際ぼくもこれが原因で、30分以上無駄な時間を使ってしまいましたよ…ショックを受けた顔。(こちらのサイトを参考にさせていただきました。ありがとうございます喜ぶ顔faviconの作り方

3つ確認して合ってるはずなのに表示されね~!驚愕する顔って時は、1日放置すれば表示されることもあります(実際ぼくもなった…)。画像もばっちり「.ico」で問題ないし、アップする場所も何度も確認、さらにアップされている画像を一度ダウンロードして確認しても合ってるし、ソースを確認しても間違いない、さらにキャッシュも消した(つもり)。それでも表示されないなら時間が解決してくれますよ、きっと。キャッシュが残ってたりするのかな…?理由はよくわからなかったのですが、そういうこともありました。

まとめ

非常に長い説明になりましたが、実はやっていることはさほど難しいことはなく、時間にしても10分ぐらいでできてしまう内容。でも分からない人にとっては未知なのでなにかの参考になればと思います。「画像を作る」「アップして設定する」「表示を確認する」の三つの手順であなたのショップにもファビコンが設置されて、見栄えも良くなるハズです。

もしもドロップシッピングで稼ぐためのブログページトップへ戻る