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」の詳細はこちら

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

    コメントを残す

    ■アフィリエイトでガッツリ稼ぐためのお役立ち情報まとめ

    Facebook Like Box 「いいね」応援感謝です