ブログのシンボル「ファビコン画像」を作成しましょ♪

ファビコン画像の作成方法を、リクエスト頂きました(^^♪ファビコンは、名前は知らなくても、インターネットをしている時 必ずお目にかかっているはず。

スポンサーリンク

 

これです＾＾

ファビコンの正式名称は、favorite icon（フェイバリット・アイコン）

日本語で言うと、お気に入りアイコンという意味です。

 

 

なぜ、ファビコンを設定するの？

 

自分のブログを、ブックマークしてもらった場合、
ブックマークの一覧から、サイトの名前を探さなくても
アイコンを見ただけで見分けがつくので、便利！

 

上のようにタブにもファビコンが表示されるので
何個もタブを開いてしまった時も、誰のブログかわかりやすい。

自分のブログをさりげなくアピールして
クリック率アップさせちゃいましょ♪

 

自分のブログのシンボルマークをつけるって、ワクワクしませんか？

あなたも、ぜひチャレンジしてみてください(^^)/

 

GIMPでファビコン画像を作成する場合の注意点と手順をお話しますネ！

 

シンプルなデザインにすること。

ブラウザのタブに表示したりするので、細かい画像だと
何かわからなくなってしまいます。

 

自分のブログのイメージカラーでアルファベットやひらがななど
一文字にしてみる。

自分のアバターを使う、ブログのイメージにつながるシルエット・画像を
考えてみる。

ポイントは

なるべくシンプルなものに♪

正方形に入るような画像を♪

 

右側のサイドバーに私が今まで作成したサイトの事例があります。
ファビコンも設定していますので、よかったら参考にしてくださいネ。

 

ファビコンのファイル形式に気をつけよう！

GIMPで作成したファイルは、PNG形式で保存します。
PNG形式でも対応しているブラウザはありますが、
どのブラウザでも表示できるように
PNG形式のファイルをico形式に変換します。

 

ということてで早速作成していきましょう(^^)/

 

スポンサーリンク

 

ファビコン作成

画像サイズを64px×64pxに設定する

 動画でも説明しています(^^♪

 

今回は、アルファベット一文字をファビコンにしてみます。

「ファイル」→「新しい画像」をクリックします。

 

 

キャンバスのサイズは、幅64px高さ64pxにし、「OK」をクリックします。

 

 

キャンバスが小さくて作業しづらい場合は、表示を拡大しましょう。

画面左下に、ズームを変更できるボタンがあります。

 

私のPCでは、表示が化けていますが(^-^;

①の▼ボタンをクリック
②200%をクリックします。

 

 

拡大されました～(^^)/

 

画像の背景に色を入れる

背景に色を塗ります。

①右側のツールバーで背景が選ばれているのを確認します。
②左側のツールバーで「塗りつぶし」ボタンをクリックします。
③塗りたい色を選ぶために「描画色」のボタンをクリックします。

 

 

塗りたい色を選択して、「OK」をクリックします。

 

 

キャンバスの中でクリックすると、色が入りますよ～。

 

スポンサーリンク

 

画像に文字を入れる

今度は、文字を入れていきましょう(^^)/
「テキスト」ツールをクリックします。

 

 

 

キャンバスの上で斜めにドラッグし、テキストボックスを作成します。

 

 

文字の色選びましょう。赤枠のボタンをクリックします。

 

 

文字色にしたい色を選択し「OK」をクリックします。

 

 

文字を入力します。

 

 

 

フォントを変更します。
文字をドラッグして選択します。

 

 

 

ツールオプションで①のボタンをクリックすると、
GIMPで使用できるフォントの一覧が表示されます。
好きなフォントを見つけてネ！

気に入ったフォントがない場合は、インターネットで無料のフォントを見つけることもできますよ(^^)/
こちらの記事を参考に探してみてくださいネ！

 

スポンサーリンク

 

文字のサイズを変更する

横道にそれました<(_ _)>
今度は、文字のサイズを変更しましょう！
左側のツールオプションか画面に出てくるミニツールバーでも設定できますよ＾＾

 

 

 

サイズが決まったら、現在のテキストボックスの幅を狭くしておきましょう。

 

文字を移動させる

今度は文字の位置を設定します。

①右側のバーで「テキスト」レイヤーが選ばれているのを確認します。
②左側のツールボックスから「移動」ツールをクリックします。
③ツールオプションで「アクティブなレイヤーを移動」をクリックします。

 

 

点線の中でドラッグして、ちょうどいい位置に移動させましょう(^^)/

 

 

画像をGIMPの形式で保存する

200%に拡大していると粗さが目立つ場合は
表示を100%に戻して、表示を確認してみましょう。

 

 

 

 

 

ここまでできたら、後から修正が簡単にできるようにGIMP形式で保存します。

「ファイル」→「名前を付けて保存」をクリックします。

 

 

①ファイル名を入力します。
②保存する場所を選択します。（今回は、デスクトップにしています）
③「保存」をクリックします。

 

 

ファビコン用にPNG形式で保存する

今度は、ファビコンに変換するためにPNG形式で保存します。

「ファイル」→「名前を付けてエクスポート」をクリックします。

 

①ファイル名を入力します。（拡張子がPNGになっていることを確認します）
PNGになってない場合は、このウィンドウの左下の青丸で囲っているボタンをクリックすると
一覧から、PNG形式が選択できます。

②保存場所を選択します。（今回はデスクトップにしています。）
③「エクスポート」をクリックします。

 

 

こちらのウィンドウはなにも変更しなくて大丈夫です。
「エクスポート」をクリックします。

 

 

ファビコン.pngで、ファビコン.icoに変換します。
もし、ここで見て修正したい場合は、右側の「ファビコン.xcf」で修正しましょう(^^)/

 

画像をファビコンファイルに変換してくれるサイトの使い方と
WordPressのブログにプラグインを使用して、ファビコンに設定する方法は
こちらの記事を参考にしてくださいネ！

 

スポンサーリンク