favicon(ファビコン)を作ろ♪

以前(…ってもう1年前やん…)ファビコンのことを記事にしたことがあるんですが、そのときはフォトショップでの作り方を説明してみました。
(そのときの記事はこちら

その最後に「Photoshopを使わずにfaviconを作る方法はまた後日」なんて書いて締めくくってあるのですが、その「後日」がち~っともなくて……。

ネタ切れの今日こそ、続きを書いてみたいと思います。

以前の記事と重複しますが、ファビコンっていうのは

ウェブサイトやウェブページに関連付けられたアイコンのことである。
対応しているウェブブラウザはお気に入りリストやアドレス表示欄、タブブラウザではタブに表示されたページタイトルの左側に読み込まれたアイコンを表示する。


というもので、
favicon00.jpg
(画像をクリックして大きくして見ていただかないとわからないみたいですが)こののようにそのサイトを表示したときに個別のアイコンを表示します。
こうやってタブをたくさん開いていても、例えば自分のブログのファビコンを変えておけば、一目でわかるわけです。

FC2の場合はデフォルトではたぶん赤のユニコーンの顔がファビコンになっていると思うのですが(共有テンプレートによってはあらかじめファビコンを組み込んでいるものもあります)、自分だけのオリジナルのファビコンを表示させてみたいと思いませんか?

簡単にできますのでやってみてください。

FC2以外でもテンプレートの編集ができるブログなら、ファビコンの設置はできるはずです。

では、作り方を説明します。
256Pixels
↑こちらでファビコンを作ります。

favicon01.jpg
「cheat by uploading a picture」の文字をクリックしてファビコンにしたい画像をアップロードします。

favicon02.jpg
「参照」をクリックして、画像を選択したら「upload image」をクリックします。

(画像サイズが大きすぎるとアップロードされないようで、何も表示されません。何も表示されない場合は画像のサイズを落としてからアップロードしてみてください。)

favicon03.jpg

青色の点線の枠内がファビコンになります。
好きな範囲を選択して「Crop picture」をクリックして確定させます。

favicon04.jpg

どんなふうにファビコンが表示されるか出てきますの、それでよければ「Submit to Challenge」をクリック。

favicon05.jpg

「Save Favicon!」をクリック。

favicon05-2.jpg

できあがったファビコンが表示されます。

favicon05-3.jpg

表示された画像を右クリックして「名前をつけて画像を保存」をクリックして、わかりやすい場所(デスクトップなど)に保存します。

favicon06.jpg

保存した画像を確認すると、ファイルの種類が「Icon」になっているはずです。
(「Icon」でないとファビコンで表示されません。)

favicon07.jpgこのアイコンをブログのイメージサーバーにアップロードしましょう。
(いつも通り画像をアップロードするのと同様の手順です。)

FC2の場合はアップロードが完了するとアップロードされたURLが表示されます。
またはファイルをクリックしてブラウザにアイコンを表示させ、そのURLをコピーします。

favicon08.jpg

これはFC2の場合ですが、「テンプレートの設定」をクリックして、テンプレートの管理画面を開きます。
他のブログの場合でもテンプレートの編集画面を開いてください。

favicon09.jpg
「HTMLの編集画面」に<head>と書かれた文字が割と最初の方にあります。
そのすぐ下にでも、次のタグを挿入します。
(本当は<head>から<head>までの間ならどこでもいいようです。)

<link rel="shortcut icon" href="http://blog-imgs-19.fc2.com/s/a/k/sakuraxren/1220937124.ico">
ただし、茶色の部分は先ほどアップロードしたURLを入れてください。

favicon10.jpgプレビューボタンをクリックしてファビコンが表示されるかどうか確認してみましょう。
表示されていればOKです。

更新ボタンを押して、テンプレートを更新しておきます。



ところが…、(プレビューではちゃんと表示されているのに)実際に見てみると、ファビコンが表示されない場合があります。
その場合はキャッシュをクリアしてからもう一度見てみてくださいね。
IEのバージョンによってはお気に入り登録しないと表示されないかもしれません。

わからない箇所などありましたら、お気軽にお声をかけてください。
補足説明させていただきます。



私は…今回プロフィール画像とおそろいのファビコンにしてみました♪



関連記事
TAG :
ジェネレーター
テンプレート

コメントの投稿

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ