【2022年版】FC2ブログでオリジナルファビコンを設定する方法

【2022年版】FC2ブログでオリジナルファビコンを設定する方法

カスタマイズ HTML, CSS, JavaScript
2022/05/05
16
vanillaice (Akira)
vanillaice (Akira)
EducationInstructionHTMLTips

以前にもファビコン設定に関する記事を書いています。あれから早いもので2年が経過し、現時点で不要になったり、または再考したほうが良い点なども出てきました。というわけで2022年版 (ノ゚ェ゚)

FC2ブログで必要な記述は3つ

Wordpressなどでは「4つ」と書きますが、FC2ブログでは「3つ」
FC2ブログでは svgファイルjsonファイル のアップロードが許可されていませんので、それを除いての3つです。また、Windowsのスタート画面ピン留めも不要と判断して除いています。

svgファイルについて、現時点では各ベンダーの取り扱いにばらつきがありますが、今後は svgが一番便利 という方向に傾いていくと思いますので、FC2ブログでもsvg拡張子のアップロードが開放されると良いな、と思います (∵`)

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"><!-- iPhone用 -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"><!-- Android用 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico"><!-- 16px, 32px, 152px, 180px, 192px のマルチアイコン -->

これまでは小さな小さなファビコンを設定するために、20も30も画像をアホほど準備しなければいけない、という感じでした。2022年現時点では随分と整理され、個人的にはこれで十分だと思います。

上記の雛形内では画像アドレスを ルートパス で書いてありますけれども、FC2でこの方法は使えませんので、各URLの 書き換え必須 です。
* ルートパス = 最上位階層からのディレクトリを段階的に示すので、ルートディレクトリ(最上位階層)が共通でなければならない(FC2ブログの画像はルートが異なるため使えません)

ここからはそれぞれのファビコン画像に関するコツや注意点など。

iPhoneとAndroidでは形状を変える。背景をつける。

サンプルに利用する画像は以下の通りです。

線描画, 背景透過PNG
ベタ塗り, 背景透過PNG
四角形, 背景付きPNG
円形, 一部背景付き透過PNG

いい加減に作ってしまったので、円形の下部分が欠けてますがご容赦ください ^^;

透過の状態がわかるように、画像が表示されているボックスに背景色を付けています。それぞれの画像がそれぞれの環境でどのように表示されるか見ていきます。

ブラウザ タブ

特徴
  • 背景透過は有効
  • 個人のブラウザカスタマイズ状況によって、タブ自体の背景色がまちまちで模様が入ることもある
線描画
ベタ塗り
四角形
円形

背景透過画像の場合、ブラウザタブの色や背景によってはオブジェクト(この場合はハート)が不明瞭になります。予め画像の方に背景が付いている場合には、オブジェクトがタブと近似色であっても視認性を確保できます。ただしファビコン背景色がタブ背景色と同一またはその近似色の場合は、円になっている・いない等は不明になります。ファビコンで最も重要なのは「オブジェクト」である、と割り切ることも大事です。円にならなければ成り立たないデザインはできるだけ避けた方が良いでしょう。

iOS ホーム画面

特徴
  • 背景が透過されている場合は自動的に「黒」背景が追加される
  • 角丸(border-radius)強めの四角形で表示される
線描画
ベタ塗り
四角形
円形

iOSの場合は 背景付き四角形の一択 です。ファビコン側の背景色が「黒」の場合のみ対象外になりますが、iOS側の付け足し背景色がずっと黒とは限らない ので、付けておいた方が賢明です。でもまぁずっと黒だとは思うけど(笑)

iOSアイコンの角丸の状態についても、今は強めだとしても今後もっと弱いものに調整される可能性はあります。

Android ホーム画面

特徴
  • 背景透過は有効
  • ホームの背景によってはホーム上の各種アイコンが不明瞭になる
線描画
ベタ塗り
四角形
円形

iOSが自動的に黒背景を追加する理由は「ホームに設定された背景画像とアイコンとの視覚区分」です。その区分を行わないAndroidの場合は、ファビコンへの背景設定必須 と思った方が良いかもしれません。あるいはファビコンにドロップシャドウを付けておくとか。ドロップシャドウでの区分効果は薄いため、やはり背景確保がおすすめです。

また、角丸にしたい場合はファビコン背景側での操作が必要です。

Google 検索結果

特徴
  • 自動で「白」背景が付く
  • ダークモードに注意が必要
線描画
ベタ塗り
四角形
円形

説明便宜上「円形」のみファビコン背景色を変更しました。

検索結果側に自動で「白」の背景が付くわけですから、円形処理されていればサンプルのような形になります。「線描画」「ベタ塗り」は辺とオブジェクトがくっついていると見栄えが悪いのでバツにしました。また、円形のみならず角丸が付いているとダークモードでおかしな見た目になりますのでバツ。

検索結果については 背景色つき角丸なし四角形一択 と言って良いでしょう。

注意点を踏まえたおすすめ設定

あくまでも「FC2ブログ」を考えた場合です。svgのアップロードさえできれば割とどうにでもなる。でもFC2ではできないので、総合的には以下の形がおすすめです。

  1. 全て背景色付き角丸なし四角形にする
  2. 振り分ける

四角形を想定し、オブジェクトが明瞭に見える背景色をつける。背景に角丸をつけない。これが最もおすすめかつ最も簡単な方法です。

振り分ける場合は、

  • iOS用(apple-touch-icon-180x180) --- 背景色付き角丸無し「四角形」
  • Android用(android-chrome-192x192) --- 背景色付きで「四角形」または「角丸四角形」または「円形」
  • 検索結果, ブラウザタブ用(favicon.ico) --- 背景色付き角丸無し「四角形」

あくまでも「FC2ブログ」での個人的なおすすめであって、WEB全般に通づるものではないのでその点ご承知おきください。そして他にも色んな対策はあります。例えば背景色を「黒」にしておけば円形ファビコンでもiOSホーム画面で上手いこと表示される、とか。私の場合はそうしています(全て黒背景付き円形)。そして検索結果のダークモードについては変な見た目だけれども無視しています(笑)

マルチアイコン作成

<!-- 16px, 32px, 152px, 180px, 192px のマルチアイコン --> について。ディスプレイ毎に解像度が違い、高解像度ディスプレイ(高dpi)では大きめ画像が必要ですよ、という啓蒙を何度か行っています。

スマートフォンで画像がぼやける際の対処と画像容量削減

スマートフォンで画像がぼやける際の対処と画像容量削減

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・`) そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...

ファビコンにも同じことが言えます。マルチアイコンというのは、ディスプレイ解像度による出し分けを行うためのものです。通常ディスプレイなら 16 × 16 で、2倍の解像度なら 32 × 32 で、3倍なら〜 と、ディスプレイに見合ったサイズで表示させることができます。以下のサイトで簡単に作成できます。拡張子は .icon です。

必要なファイル

  • 16pxのpng
  • 32pxのpng
  • 152pxのpng
  • 180pxのpng
  • 192pxのpng
マルチアイコン作成。無料で透過マルチアイコンが作れます。

マルチアイコン作成。無料で透過マルチアイコンが作れます。

マルチアイコンが簡単に作れます。使い方はとってもシンプル。画像を指定するだけ。

5サイズで作成すれば万全ですが、面倒な方は以下のサイトで一括作成し、フォルダ内の favicon.ico ファイルをそのまま利用しても良いと思います。こちらで作成されるサイズは以下の通りです。

  • 16px
  • 24px
  • 32px
  • 48px
様々なファビコンを一括生成

様々なファビコンを一括生成

使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計な404 not foundを記録させない対策としても有効。

本記事に沿ったファビコン設定に必要なファイルはフォルダ内の

  • /apple-touch-icon-180x180.png
  • /android-chrome-192x192.png
  • /favicon.ico

です。FC2ブログにファイルアップロードをし、絶対パス(httpsから始まって拡張子まで省略なしのURL)を、雛形のURLと差し替えて記載します。ファイル名は書き換えずそのまま利用した方が管理しやすいと思います。

記述場所はテンプレートhtmlの </head> の直前に。記載位置は必ず守るようにしてください ね。

Related post

Comments  16

-
2022/05/23 (Mon) 20:43

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/05/29 (Sun) 22:11

To こんさん

お返事遅くなりごめんなさい。
画像については .png を .jpg に拡張子変更するだけで勝手に白背景が付くんですけどね。余白の調整などがあるのであまりおすすめはしない ^^;

Dexterの件。ぜんっっっっっっっっっっっっぜん、おもしろくなかった (;`ー´)o
旧Dexterの良さが全く活かされず、あの新キャラ(と言って良いかわからないあの人)はひたすら不快なだけだし、期待はずれにもほどがあった (∵`)
「期待はずれにもほどがある」の過去形って使い方おかしいですかね。あれ?どうなのかな、わからない ^^;
Huluの貴重なお試し期間をこのゴミ作品に費やすのはもったいないと思います(笑)

ウェントワース女子刑務所をおすすめしたいけど8シーズンあるから無理か ( ̄∀ ̄;)
あ、でもですね、サービスの垣根がちょっと低くなったというか、ウェントワースはamazonで見られるようになってたし、amazonでしか見られなかったはずのミスターメルセデスがHuluで見られるようにになってました。
総合的にやっぱりnetflixが一番良いような気がします。最近だとリンカーン弁護士(Boshのスピンオフ)のドラマ版が見られるようになりました(ただしBoshはamazonオリジナルなのでクロスオーバーができない…)

こん
2022/05/31 (Tue) 08:05

To vanillaice (Akira)さん

Akiraさん、お忙しいところ、お返事ありがとうございました^^。

>画像については .png を .jpg に拡張子変更するだけで勝手に白背景が付く

えええええっ!?(゜o゜) んも〜それ知ってたらあんなに悩まなくて済んだのに^^;。でもお勧めの方法ではないのですね?それならよかった( ̄▽ ̄) 。

それと〜Dexter、そんなに最悪だったんですか。それはがっかりしましたね〜。あたいも見るのやめよう。以前のイメージがめちゃよかったので、それを大切にすることにしますです。

おぉ〜ウェントワース女子刑務所、Amazonでも見られるようになったんですね〜。他のドラマのオススメもありがとうございます。どれもこれも面白そうで、これまた頭悩ませちゃう(爆。家の方もだいぶ落ち着いてきたので、ぼちぼちどこかと契約しますかね〜。

それではまた遊びに参りまするね(^^)/。こん

-
2022/06/28 (Tue) 07:17

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/07/05 (Tue) 18:33

To 暑中お見舞い 内緒さん

こんにちは。リビングと寝室のエアコンが同時にお亡くなりになるという悲劇に見舞われたワタクシです (;_;)
そして「地球滅亡前の最期に何を食べたいか」と問われ「小松菜」と答えた者でもあります(笑)
小松菜、大好きです。今私の中でトップ独走中の野菜、それが小松菜(昔はグリーンアスパラだった)

緑茶も飲んでますよ! でも基本は紅茶(ダージリン, 無糖)です。私はお茶漬けもダージリンです。これ言ったら他の方にひかれたけど紅茶だってお茶だし砂糖入れないので全然美味しいよ? (∵`)

えっと、日本でどうしても解せないこと。
何故こんなテクノロジー大国なのにセントラルヒーティングが普及していないのか、というより日本は夏暑いから全館空調って言うんですかね?(月に2度はこの愚痴を言っている気がする)

-
2022/07/05 (Tue) 19:12

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2022/07/28 (Thu) 11:34

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/07/29 (Fri) 11:19

To ファビコンの件 内緒さん

こんにちは ('0')/

ホントですね。
えっと、考えられる原因なんですが、ソースコード類を正しい記載している(いた)というのが大前提で、起こりうるとしたら「ドメインの切り替えや更新」などの作用かもしれません。これは割とあります。一時的に

> 「改善が必要なURL」が極端に増えたり〜

というのも参考にすると、通常のブログ運営(デフォルト, 無料, カスタムURLなし)ではURLに改善を求められることは無いので、もしかすると、という感じです。改善を要求されるのは他に既に記しましたが「カスタムURL」を用いている場合ですね。

なので一度、症状が出た月と更新月とを照らしてみてもらえないでしょうか。

-
2022/07/29 (Fri) 17:57

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/08/06 (Sat) 23:55

To search consoleの件 内緒さん

お返事またしても大変遅くなってごめんなさい。

まず、search consoleなんですけども、何か指摘をされた内容に対し、何も修正を加えないのに勝手に「修正済」とみなされることがありますよね。なんか勝手にデータが動いてるなぁ、みたいな。
新しく生まれ変わってもいますので、昔からあるそういった傾向というのはしばし強く出るかと思います。

で、今回のprefetchがどんな役割を持っていたかというと、ページ内にある「リンク」というのは全て「クリックされる可能性がある」ものですよね。その「遷移が予想されるページ」の中にある「画像」「JS」「スタイルシート」などを先回りしてダウンロードし、キャッシュとして保存します。当然キャッシュは表示が速いので、Core Web Vitals(LCP, FID, CLS)などにも(良い方の)影響を及ぼします。

何らかのASP(google adsense含む)や外部ウィジェット・プラグイン(拍手やアクセス解析等)を利用している場合、それらに何の工夫も無ければ(悪い方の)影響を及ぼします。

で、core web vitalsの中でも「CLS(Cumulative Layout Shift)」というのは、一番関連深いものを挙げると「画像」です。手っ取り早くは「画像の使用を極力抑える」ことになるのかな、と思います。絵文字も画像ですし、カウンターも文字一つ一つが独立した画像です。
現時点で内緒さんのページで「とても重たい」のはやはりページ下部の広告ですね ^^;
これどうにかしないと状況の改善は無いだろうと思います。JSのエラーはページをとても遅くします。一度チェックしてくださいね(amazonなどがタイムアウトエラーになっています)

モバイルのURLについては今後徐々に消えていきますので(デバイス自体が終焉を迎えるため)、放置で良いと思います。というか今特にどうこう、という逼迫した問題ではないので見守ってください ^^;

一応私のステイタスを掲載しておきます。prefetchについては内緒さんと全く同じ状態(内緒さんが処理を行う前の状態)です。
https://blog-imgs-150.fc2.com/v/a/n/vanillaice000/searchsonsole.png

-
2022/08/07 (Sun) 13:01

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/08/07 (Sun) 20:23

To サチコの件 内緒さん

こんばんは ('0')/
写真、ホントにそうですよね。写真があった方が絶対伝わりやすいし、多くの読者はそれを求めてると思うのだけれど、肖像権, 著作権云々とかありますもんね (∵`)

サチコさんも割と気まぐれなところあり、少し長い目で経過を見る感じで良いかもしれません :)

KrowNews
2022/08/18 (Thu) 03:38

Googleの検索結果とSearchConsoleのファビコンについて

いつも大変お世話になっております。KrowNewsです。
一点ご相談がありまして、最近、Googleの検索結果やSearchConsoleのファビコンが、オリジナルのファビコンからFC2のデフォルトのユニコーンに戻ってしまいました。
設定しているオリジナルのファビコンが表示されるように戻したいのですが、対処法をご存知でしたらご教授いただきたいです。お手隙の際にご回答いただけると幸いです。

参考:
Googleの検索結果のファビコンの部分のスクショ
https://blog-imgs-150.fc2.com/k/r/o/krownews/IMG_1358.jpg

SearchConsoleのファビコンの部分のスクショ
https://blog-imgs-150.fc2.com/k/r/o/krownews/20220818032927eff.png

-
2022/08/21 (Sun) 17:37

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2022/08/23 (Tue) 06:57

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

KrowNews
2022/08/26 (Fri) 09:27

いつも大変お世話になっております。KrowNewsです。
一点ご相談がありまして、最近、Googleの検索結果やSearchConsoleのファビコンが、オリジナルのファビコンからFC2のデフォルトのユニコーンに戻ってしまった件ですが、特に何かをしたというわけではないのですが、先ほど確認したらオリジナルのファビコンが表示されるようになっていました。
なぜだかはわかりませんが、デフォルトのユニコーンに戻ったりオリジナルのファビコンが表示されるようになったりというのが繰り返されているようです。とりあえず解決?したようなのでご報告させていただきます。お騒がせしました。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)