【図解】Seesaaブログにファビコンを設定する方法

Seesaaブログにファビコンを設定する方法 Seesaaブログアフィリエイトとカスタマイズ

今回はシーサーブログにファビコンを設置する方法を紹介していきます。

ファビコンというのはサイトのシンボルマークとなるアイコンです。私のこのサイトの場合はこのように表示されてます。

WordPressサイトにファビコンを設置する手順1

このように自分のサイトを開いた時とか、スマホでホーム画面に追加した時、お気に入りやブックマークしてもらった時にはこのアイコンが表示されるようになっています。

Googleで検索した時(スマホで検索した時)に検索結果にファビコンも表示されてますので差別化するために重要な部分です。

著作情報
この記事を書いた人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

ファビコン設置の前準備。どんなサイズの画像を用意したらいい?

ファビコンを設置するためにはファビコンに使う画像を用意する必要があります。表示されるアイコンのサイズは「16px」×「16px」ですが、このサイズで用意する必要はありません。

縦横それぞれ152px以上の正方形の画像を用意しておいてください。

MEMO

自作は難しい、独自のものが良いとか、こだわりたい!というのであれば「ココナラ」で外注するのが早いです。

迷うようであれば、どんなアイコンを作成してもらえるか一度確認してみてください。

ココナラでアイコンを探してみる

ファビコン設置の手順

先にファビコンの設置の手順を簡単にまとめておきます。

  1. ファビコン用画像を用意する
  2. Seesaaブログのファビコンの設定で画像をアップロード

通常ファビコンの画像は「.ico」形式に変換が必要なのですが、Seesaaブログの場合は通常の画像(JPEGやPNG)をそのままアップロードで設定が可能です。

Seesaaブログの管理画面から「設定」⇒「ファビコン設定」をクリック。

Seesaaブログにファビコンを設置する手順4

ファビコンにしたい画像を選択してアップロード。

Seesaaブログにファビコンを設置する手順5

表示させたい画像の領域をドラッグアンドドロップで選択して「切り取りを実行」。

Seesaaブログにファビコンを設置する手順6

切り抜かれた画像の確認画面になるので問題なければ「保存」。

Seesaaブログにファビコンを設置する手順7

「ファビコン画像の追加/編集が完了しました。」と表示されたら設定は完了です。

Seesaaブログにファビコンを設置する手順8

PCやスマホでファビコンを設定したサイトを開くと開いたタブにファビコンが表示されます。

WordPressサイトにファビコンを設置する手順1

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント

  1. しげぞう より:

    ゆずMAN様

    返信ありがとうございます。解決に至らずすみません!私も確認してましたが、IEでの表示ができているのに、Chromeだと表示さませんね。ただ、別のブログではChromeで表示される所を考えるとHTMLの部分で何か相性の悪い記述があるのかも知れません。もし何か分かればブログの方にでもコメントさせて頂きますね。今後もどうぞよろしくお願い致します。

  2. ゆずMAN より:

    しげぞう様

    ファビコンはあいかわらず表示されませんが、IEでは表示されているようなので、
    とりあえず、これで良しとしておきます。

    コンテンツなどの充実に時間を割く方が肝心ですからね。
    ありがとうございました。

    カスタマイズでわからないことがあれば、また相談させていただきますm(__)m

  3. しげぞう より:

    ゆずMAN様

    返信ありがとうございます。原因なんでしょうね?多分、別のテンプレートではHTMLにコードを入れると反映されます、実際私のブログにコードをコピペして反映されたので。

    HTML的な部分でも問題はなさそうですが、時々Seesaaブログのシステム的な?部分で一時反映されないコードがあったりしますので、コードを一度外して保存。保存をしてから再度コードを入れて保存という最初に試した方法をもう1度試してもらえないでしょうか?

    また、HTMLやCSSのバックアップを取っておいて、別のデザイン(テンプレート)でも反映されるか確認してみるのも良いかもしれません。もう少し調べてみますので、また反映されない時はお手数ですが、コメント頂けると助かります。

  4. ゆずMAN より:

    しげぞう様

    たびたび、失礼いたします。
    ゴミ箱からも削除しましたが、表示されません。

  5. しげぞう より:

    ゆずMAN様

    返信ありがとうございます。了解しました。以下3点も確認をお願いします。

    1.削除した「Favicons」がゴミ箱からも削除されているか確認。
    2.GoogleChromeの再起動
    2.再度ブログを表示させて、「Ctrl」と「F5」を一緒に押してリロード。

    以上2点を確認しても反映されない場合にはまたコメント頂けると助かります。どうぞよろしくお願いします。

  6. ゆずMAN より:

    しげぞう様

    キャッシュの削除と、ディレクトリにある「Favicons」の削除を行いましたが、
    表示されません(泣)

  7. しげぞう より:

    ゆずMAN様

    返信ありがとうございます。Chromeでファビコンが表示されないというのは結構あるみたいですね。検索すると色々情報がありましたので、こちらも一度試してみると良いかも知れません。
    http://milk-pop.co/%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB/382/

    それでも反映されない場合にはまたコメント下さい。もう少し原因を探してますね!

  8. ゆずMAN より:

    追記します。

    IEなら表示されました!
    Google Chromeだと、表示されないようです。
    対処法はございますか?

  9. ゆずMAN より:

    しげぞう様

    たびたびのメールで失礼します。
    画像は、柚子なので、あっています。

    ただ、どこに挿入しても反映されないようです。

  10. しげぞう より:

    ゆずMAN様

    返信ありがとうございます。教えて頂いたURLに挿入されているコードを調べてそのままコピペして私の使っているSeesaaブログに貼り付けてみたのですが、フルーツ?みかん?のようなアイコンが表示されました。なので、コード自体は間違っていないと思います。旧システム、新システムでも両方ためしてみましたが、どちらも表示されました。

    コード自体が間違っていないので、再度ファビコンのコードを削除して保存し、今後は「/head」の直前ではなく、「head」の始まりの直後などに挿入して保存してみてもらえますか?貼り付け位置変えて試してみてそれでも表示されない場合にはお手数ですが再度コメント下さい。よろしくお願いします。

  11. ゆずMAN より:

    しげぞう様

    やってみましたが、変わりません。

    URLは、です。

    ご確認よろしくお願いします。

  12. しげぞう より:

    ゆずMAN様

    コメントありがとうございます。時々設置したコードが反映されない事があります。その場合はファビコンのコードを外して一度保存し、元の状態にしてから再度コードを入れて保存。それでブログを表示させて「Ctrl」と「F5」を一緒に押して確認してみて下さい。

    それでも反映されない場合にはお手数ですが、ブログのURLを教えてもらえると助かります。URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。

  13. ゆずMAN より:

    しげぞう様

    お世話になります。
    ファビコンの設置をしたのですが、表示されません。
    挿入場所もURLも間違いないのですが、原因として、考えられることはなにかありますでしょうか?