恐竜がわらった

80年代のゲーセンの思い出、地元広島のこと、テレビで気になったこと、ちょっとお得な情報まで！

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ファビコン作ってみました

ファビコンを作ってみました♪

ファミコンやファミコン互換機のことではありません(^_^;)

ファビコンはブラウザ上にウェブページを表示したときにタイトルのタブに表示されてるアイコンのことです。

私のブログは、以前
過去のファビコン

こんな表示でしたが、

現在は

こんな風に表示されていると思います。

つい先日まで、このアイコンはブログでは変えられないんだろうな、と勝手に思ってました。

ところが簡単に変えられることを知り、今のファビコンになりました。

・ファビコンの設定

このファビコン、変更は難しくないので、ご存じない方のため説明しますね。

１．画像を決める
私は今回、プロフィールに使用しているキャラをそのままファビコン化したのですが、決まっていなくても、直接作成することができます。

２．ファビコンに変換する
できた画像をアイコン形式（．ｉｃｏ）で保存します。

３．自分のブログサイトにアイコン画像をアップロードする
通常のブログ作成時に行っている画像のアップロードでＯＫです。

４．ブログにファビコンのリンク設定を行う
<head>から</head>タグの間にファビコンのリンクを記述すれば完了です。

では、具体的にいきましょう。

１．画像を決める
まず、ファビコンにしたい画像が決まっている場合、

例として、先日の東京五輪の画像をファビコン化することにします。

元の画像

これを以下のサイトで変換します。

ＦＡＶＩＣＯＮ．ＣＣ（英語のサイトです(^_^;)）
http://www.favicon.cc/

以下の画面が出ます。

右側の「ファイルを選択」ボタンをクリックし、画像を指定します。

「Upload」ボタンをクリックします。

東京五輪の画像を選択すると、こんな感じになります。

※画像が決まっていない場合、左の「Create New Favicon」ボタンをクリックし、編集画面を表示します。

編集画面のすぐ下に、リアルタイムでイメージ画像が表示されています。

このイメージを確認しながら、編集画面で加筆・修正します。

「transparent」を選択すると、背景が透明になります。
「pick existing color」は、画像の色を選択できます。

２．ファビコンに変換する

画像編集が完成したら、

上の「Download Favicon」ボタンをクリックし、PCに保存します。

３．自分のブログサイトにアイコン画像をアップロードする
通常のブログ作成時に行っている要領で画像をアップロードします。
完了したら、このURLをコピーしておきます（下の４でURLが必要です）。

４．ブログにファビコンのリンク設定を行う
※ブログによって、若干表現の違いはありますが、大体同じですので、ご自分のブログの
設定に読み替えてください。

ブログのデザイン画面から、テンプレートを指定している画面に移動します。
例）デザイン→テンプレートの設定、等

現在設定中のテンプレートの「編集」を指定します。

HTMLの編集画面にします。

<head>から</head>タグの間に以下の記述を追加します。

※間違えた場合、すぐ戻せるように＜／head＞のすぐ上に追加すると分かりやすいと思います。

テンプレートの修正が終わったら、保存し、ブログを表示します。

ファビコンが表示されます。

文章で書くと長くなりましたが、実際やってみると案外スムーズに行くと思います(^^)

ブログランキング参加中です！よろしければクリックお願いしますm(__)m