Favicon(ファビコン)を無料で簡単に設置する方法

Favicon(ファビコン)とはお気に入りアイコンのことを言います。

独自ドメインで運営しているサイトのほとんどが設置してますね。

 

 

ヘッダー画像(ヘッドコピー)とFavicon画像はある意味サイトの顔の役割を

持っていますので、時間をかけてじっくり作りこみたいパーツです。

 

 

私のブログ、サイトのほとんどが、この自転車に乗っているイラスト

をファビコンとして使っています。

 

image

 

 

Favicon Manager WordPress Pluginという Favicon を設置できるプラグインもありますが、

ワードプレス以外のHTMLサイトでも使いたいので、今回はタグ記入だけでファビコンを

表示させる方法を説明します。

 

 

ファビコンで使用されるicoデーターを作成するには、今までツールが必要でしたが

favicon.icoを簡単に作ることができるサイトを見つけたので紹介します。

 

10 Favicon Japan

image

 

 

Faviconの設置方法はとっても簡単です。

 

準備作業

favicon.icoは正方形で作られます。

ファビコンに使用する画像はあらかじめ正方形に整形してから

favicon.icoを作成するようにしましょう。

 

 

手順1

ファビコンに使用する画像を選択し「faviconを作成する」ボタンをクリック。

(※画像の種類はGIF、JPG、PNGのみ対応しています。)

image

 

手順2

作られるファビコンをプレビューすることができます。

確認してOKだったら「Downloadボタン」をクリックし保存します。

image

 

手順3

保存したfavicon.icoをサーバーにアップロードしてください。

Favionを表示させたいページの<head>タグの中に下記のタグを挿入してください。

 

<link rel="shortcut icon" href="アップロードしたファビコンのアドレス">

 

 

このブログの場合、アップロードしたファビコンのアドレスは

「http://miraihayarou.xsrv.jp/down/ymo.ico」ですから

 

<head>タグの中に下記のタグを書きこみました。

<link rel="shortcut icon" href="http://miraihayarou.xsrv.jp/down/ymo.ico">

 

 

ワードプレスを使っている人は

管理画面の「外観」⇒「テーマ編集」⇒「heder.php」を開き

</head>の前に先ほどのタグを書き込み、ファイル更新で完了です。

 

image

 

メインブログ以外のサテライトブログとして使う無料ブログでも

html編集画面でタグを入れるだけでファビコンを表示させることができます。

 

 

細かい地味な作業ですが、やっておくと自分のブログだということが

お気に入り画面でも確認できますし、あとあと便利ですよ。

 

 

サイト(ブログ)を作る=ファビコンを設置する

是非、習慣することをおススメします。

この記事が気に入ったら
いいね ! しよう

当ブログは「ALPHA WordPress Theme」を使っています

当ブログは未来派野郎hiroと吉田デザイン:吉田元一氏との共同販売のワードプレステンプレート「ALPHA WordPress Theme」を使っています。初心者からプロまで、思い通りのサイトを直感的に構築できます。

「ALPHA WordPress Theme」の詳細はこちら

●未来派野郎hiro販売商品

ALPHA WordPress Theme
WordPressがはじめてという方でも直感的な操作でプロ顔負けのシックなサイトを作ることができます。
税金対策ストラテジー「NTS」
アフィリエイトに特化した税理士Kが教える確定申告・節税マニュアル。上位版がおススメです!
YouTube Adds pro
YouTube動画の表現力を最大限に引き出すWordPressプラグイン。未来派製作販売商品です。

2 Responses to “Favicon(ファビコン)を無料で簡単に設置する方法”

コメントを残す