頑張らない!でも諦めない!必死にならずにええかげん

ブックマークアイコン(ファビコン)をココログで表示する方法

      2014/11/22

ココログでブックマークアイコン(ファビコン)を追加する方法が、
検索であまり出てこなかったこともあって、
簡単に表示ができたので投稿しておきます。

01_ファビコンイメージ

ファビコンイメージ

本投稿は以下投稿の詳細ページになります。

 

もしお時間があれば本編もどうぞ。

はじめに

他の無料ブログで試した際にちょっと苦労したこともあり、
ココログでブックマークアイコン(ファビコン)を表示する方法を投稿しておきます。

概略

アイコン画像の作成
アイコン画像からのicoファイル生成
icoファイルのアップロード

正直ココログの仕様が一番ベーシックで、
簡単だったという事実にちょっとココログを見直してしまいました^^

アイコンファイルの準備

アイコン画像の作成

まずアイコンに割り当てたい画像を用意する必要があります。

画像の作成方法等に関しては以下の投稿を参照願います。

 

Internet Explorerによる表示を除けば、
16pxサイズのGIFやPNG画像を用意し、
割り当てることで表示が可能なのですが、
多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。

その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。

画像のicoファイル化

今回は、以下の画像を利用してicoファイルを生成しています。
logo_p01-16px_orange logo_p01-32px_orange logo_p01-48px_orange

この3サイズの画像をico作成サイトにて、icoファイル化を行います。

 

実際のアイコン(ico)ファイルは以下のファイルです。
テスト確認用などにはご利用いただいて構いません。
favicon_screen

ファイルのアップロード

ココログではブログのトップディレクトリに対して、
ファイルマネージャからファイルをアップロードすることができます。

コントロールパネルの表示

管理画面のトップからコントロールパネルをクリックします。

02_コントロールパネル

コントロールパネル

ファイルマネージャの表示

コントロールパネルでファイルタブをクリックします。

03_ファイルタブ

ファイルタブ

ファイルアップロード

ファイルマネージャで以下の3点を確認して、
ファイルをアップロードします。

  • 現在のフォルダ: 「ホーム/」と表示されている。
  • アップロードするファイルのファイル名が「favicon.ico」になっている。
  • 新しいフォルダの作成でフォルダ名が「空白」になっている。

確認して問題がなければ[アップロード]をクリックして、
ファイルのアップロードを行います。

04_ファイルマネージャ

ファイルマネージャ

アップロードの確認

アップロードが完了したら、アップロードされたファイル名が、
「favicon.ico」と表示されていることを確認する。

05_アップロードファイル名確認

アップロードファイル名確認

以上で設定は完了です。
ブラウザで確認すると、ファビコンが表示されているはずです。

ブラウザ表示の確認

各社ブラウザの表示を確認すると、
アイコンが表示されています。

06_ブラウザの確認

ブラウザの確認

以上で設定は終了です。
表示できた方も表示できなかった方もお疲れ様でした。

最近ブログで主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、
この投稿でご紹介しています。

 

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

プロモーション(btm)

Google or AdMax Promotion (it)

 - ココログ, 無料ブログ , , , , ,

  関連記事

eye_wordpress.com
ブックマークアイコン(ファビコン)をwordpress.comで表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_ninja
Google Analyticsアクセス解析を忍者ブログで利用する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_biglobe_webry
ブックマークアイコン(ファビコン)をウェブリブログで表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_yaplog
Google™ Analyticsアクセス解析をyaplogで利用する方法(サイドバー)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_dti
Google Analyticsアクセス解析をdtiブログで利用する方法(プラグイン)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_a8_funblog
Google Analyticsアクセス解析をファン(A8)ブログで利用する上の規約確認

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_yaplog
ブックマークアイコン(ファビコン)をyaplogで表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Seesaa™ブログでテンプレートをコピー(複製)する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Google™AdSense広告をSeesaaブログに設置する方法(モバイルは無理)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Seesaa™ブログに設置したGoogle™AdSense広告のレイアウトをセンタリングする

Google or AdMax Promotion(it) 禁断の機能がau公式 …