Favicon（ファビコン）を作ろう
ファビコンとは、ホームページを表示したときに左側に表示される小さなアイコンのことです。作り方は意外と簡単です。
- 画像を用意する。なるべく16×16ピクセル
（少し大きく作っても、変換するときに小さくできます） - アイコンファイルに変換する
いろいろありますが、わたくしはこちらを使用 → IcoFX
（ 作り方はこちら → IcoFxでアイコンを作る） - Webにアップロード
- <head>～</head>の間に以下のタグを追加
<link rel="shortcut icon" href="アイコンファイルのURL" />
このサイト「ココログフリー」ではHTML編集ができないので、ファビコンを作ることができません。ほかの方のためにファビコン作りをしています。（9/16裏ワザを教えていただきFaviconを作りましたので追記しました。）
さくらのブログの場合
- ファイルのアップロードは、「ファイルマネージャー」で。
- アップロード先は、
http://ドメイン名/sblo_files/ブログ名/image/ファビコンファイル名
さくらのブログ HTMLの編集は
- 「デザイン」－「HTML」－「HTMLの追加」
- HTML名を入力（何でもよい）
- </head>の上に<link rel="shortcut icon" href="アイコンファイルのURL">挿入
- 保存
※デフォルトのHTMLは編集できないので、別の名前を付けて保存する。今後修正する場合は、保存したHTML名をクリックする。
お気に入り登録すると、ページタイトルの横にファビコンが付きます。
(既に登録済みの方はもう一度登録すると新マークが付く）
変わらない場合は「更新」ボタンを押したり、キャッシュ・履歴をクリアしてみると良いですね。
------------------------------------------------------（9/4追記）
So-netブログの場合
- ICO形式のファイルがアップロードできないので、別の場所にICOファイルをアップしておく
- たとえば、So-netの無料ホームページ：U-Page+
So-netブログHTML編集は
- 「デザイン」－「テンプレートの管理」－「HTMLの追加」
- HTML名を入力（何でもよい）・・・チェックを入れる
- <head>部分に標準のファビコンが指定されているのでURL部分を修正
<link rel="shortcut icon" href="アイコンファイルのURL"> - 保存
※今後修正する場合は、使用中のHTML名横〔編集〕をクリックする。
------------------------------------------------------（9/16追記）
ココログフリーの場合
- 「コントロールパネル」－「ファイル」でファイルマネージャーを開く
- blog フォルダクリック
- 参照でファビコンファイルを選択
- アップロード（indesx.htmlと同じ場所にアップされる）
ココログフリーでのHTML編集はできないので、サブタイトルにタグを書く
- 「設定」
- ブログのサブタイトルのところに以下のタグを入力
<link rel="shortcut icon" href="アイコンファイルのURL"> - 変更を保存
- サイトに反映→反映
※index.htmlと同じ場所にアイコンファイルがアップされているので、ファイル名だけで良いかと思いましたが、別の記事をクリックすると表示されない現象が発生。きちんとURLを指定してやると、バッチリ表示されました
| 固定リンク | コメント (0) | トラックバック (0)
最近のコメント