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

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

ファビコンイメージ

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

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

はじめに

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

概略

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

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

アイコンファイルの準備

アイコン画像の作成

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

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

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

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

画像のicoファイル化

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

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

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

ファイルのアップロード

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

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

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

コントロールパネル

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

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

ファイルタブ

ファイルアップロード

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

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

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

ファイルマネージャ

アップロードの確認

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

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

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

ブラウザ表示の確認

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

ブラウザの確認

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

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

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

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

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



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

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略