« デュアルブート優先起動の設定 | トップページ | IcoFxでアイコンを作る »

2011年8月21日 (日)

Favicon(ファビコン)を作ろう

ファビコンとは、ホームページを表示したときに左側に表示される小さなアイコンのことです。作り方は意外と簡単です。

  1. 画像を用意する。なるべく16×16ピクセル
    (少し大きく作っても、変換するときに小さくできます)
  2. アイコンファイルに変換する
    いろいろありますが、わたくしはこちらを使用 → IcoFX
    ( 作り方はこちら → IcoFxでアイコンを作る
  3. Webにアップロード
  4. <head>~</head>の間に以下のタグを追加

    <link rel="shortcut icon" href="アイコンファイルのURL" />

このサイト「ココログフリー」ではHTML編集ができないので、ファビコンを作ることができません。ほかの方のためにファビコン作りをしています。(9/16裏ワザを教えていただきFaviconを作りましたので追記しました。)

cherryblossomさくらのブログの場合

  • ファイルのアップロードは、「ファイルマネージャー」で。
  • アップロード先は、
    http://ドメイン名/sblo_files/ブログ名/image/ファビコンファイル名

cherryblossomさくらのブログ HTMLの編集は

  • 「デザイン」-「HTML」-「HTMLの追加」
  • HTML名を入力(何でもよい)
  • </head>の上に<link rel="shortcut icon" href="アイコンファイルのURL">挿入
  • 保存

 ※デフォルトのHTMLは編集できないので、別の名前を付けて保存する。今後修正する場合は、保存したHTML名をクリックする。

お気に入り登録すると、ページタイトルの横にファビコンが付きます。
(既に登録済みの方はもう一度登録すると新マークが付く)

変わらない場合は「更新」ボタンを押したり、キャッシュ・履歴をクリアしてみると良いですね。

bud------------------------------------------------------(9/4追記)

cherryblossomSo-netブログの場合

  • ICO形式のファイルがアップロードできないので、別の場所にICOファイルをアップしておく
  • たとえば、So-netの無料ホームページ:U-Page+

cherryblossomSo-netブログHTML編集は

  • 「デザイン」-「テンプレートの管理」-「HTMLの追加」
  • HTML名を入力(何でもよい)・・・チェックを入れる
  • <head>部分に標準のファビコンが指定されているのでURL部分を修正
     <link rel="shortcut icon" href="アイコンファイルのURL">
  • 保存

 ※今後修正する場合は、使用中のHTML名横〔編集〕をクリックする。

bud------------------------------------------------------(9/16追記)

cherryblossomココログフリーの場合

  • 「コントロールパネル」-「ファイル」でファイルマネージャーを開く
  • blog フォルダクリック
  • 参照でファビコンファイルを選択
  • アップロード(indesx.htmlと同じ場所にアップされる)

cherryblossomココログフリーでのHTML編集はできないので、サブタイトルにタグを書く

  • 「設定」
  • ブログのサブタイトルのところに以下のタグを入力
    <link rel="shortcut icon" href="アイコンファイルのURL">
  • 変更を保存
  • サイトに反映→反映

※index.htmlと同じ場所にアイコンファイルがアップされているので、ファイル名だけで良いかと思いましたが、別の記事をクリックすると表示されない現象が発生。きちんとURLを指定してやると、バッチリ表示されましたhappy01

|

« デュアルブート優先起動の設定 | トップページ | IcoFxでアイコンを作る »

et cetera」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/494923/41301873

この記事へのトラックバック一覧です: Favicon(ファビコン)を作ろう:

« デュアルブート優先起動の設定 | トップページ | IcoFxでアイコンを作る »