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

ファビコン画像の作成方法を、リクエスト頂きました(^^♪

ファビコンは、名前は知らなくても、インターネットをしている時
必ずお目にかかっているはず。

 

これです^^

image

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

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

 

 

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

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

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

ポイントは

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

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

 

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

 

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

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

 

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

ファビコン作成

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

 

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

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

image

 

 

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

image

 

 

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

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

image

 

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

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

image

 

 

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

image

 

 

背景に色を塗ります。

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

image

 

 

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

image

 

 

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

image

 

 

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

image

 

 

 

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

image

 

 

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

image

 

 

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

image

 

 

文字を入力します。

image

 

 

 

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

image

 

 

 

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

image

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

 

 

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

image

 

 

 

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

image

 

 

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

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

image

 

 

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

image

 

 

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

 

image

 

 

 

 

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

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

image

 

 

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

image

 

 

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

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

image

 

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

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

image

 

 

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

image

 

 

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

image

 

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

 

 

コメントを残す

サブコンテンツ

プロフィール

ikurademo

こんにちは!ikuraです。

こちらのブログでは、フリーで使えるGIMPを使ってネットビジネスのサイトに必要な画像編集のノウハウをお伝えしていきます(^^♪

 

→ 詳しいプロフィール

スカイプ無料相談受付中!

skypeside

ブログランキングに参加中♪

応援ありがとうございます♪

おきてがみ

ご訪問ありがとうございます♪

 

 

このページの先頭へ

pagepeel by webpicasso.de