faviconとかSVGとかGoogle検索とか

ファビリーコンピュータ


 faviconってのがありましてね。なんかファミコンみたいな響きですが、favorite iconの略で、ブラウザのタブやブックマークなんかに表示されるアイコンのことです。

20240829_01.png

 ウチのサイト(酔生夢死)でも一応は設定してありまして、上の画像で言うと、一番左上に表示されているのがFirefoxのアイコンで、下の方のタブに表示されているみかん星人がウチのアイコン(favicon)です。当時(十数年前?)、タブに表示されるfaviconは16*16のサイズだと聞いてポチポチとドット打ちをして作ったもので、まあ場末の個人サイトのfaviconなんてこんなんで十分だろと、個人的には満足していました。

 ところが先日、CafeLog版三日坊主日記のスマホでの表示を確認していたときに、スマホ(Android)のChromeではブックマークにウチのfaviconが表示されないことに気が付きました。他の有名サイト等のfaviconは表示されているので、favicon自体が表示されないというわけではない。こりゃどういうこっちゃと調べてみたんですが……どうにもよくわからない。私は今まで、複数サイズのアイコンをまとめたマルチアイコン(.ico)をサイトのトップ(ルート)に置いておけばいーんでしょと思ってまして、実際PCでは今のところ問題なさそうに見えるんですが、どうもAndroid(のChrome)ではそれだと読み取ってくれない模様。HTMLファイルに<link>タグでルートに置いてあるアイコンファイルを指定してやってもダメ。もうね、こういうどうでもいいようなことでトラぶって無駄に時間かかるの、ホントやめて欲しい。まあ、ネット関係と言うかHTML関係と言うか、あるいはプログラム関係とか、それを言うならPC関係全般がそんな感じなんで今さらですけども。

 結局、faviconをルート以外に置いてやって<link>タグで指定してやれば、認識してくれるようです。かと言っても、ウチのサイトの全HTMLに<link>タグを入れるってのも……まあ絶望するような作業量ではありませんけども、今後何か修正しなければ、なんてなったときに面倒だしねえ。JavaとかPerlで一括処理するようにしてもいいけども、頻繁に発生する作業ではないしなあ。サクラエディタのGrep置換だと改行をまたいだ処理は出来ないっぽいし。そんなわけで、基本的には今まで通りにルートにfavicon.icoを置いておき、追加で下位ディレクトリにもfavicon.icoを置いて、トップページやその他のメインとなるいくつかのページでは<link>タグでfaviconを指定してやる、なんて風にすることにしました。自分がスマホでテスト用にブックマークしたときの表示が気になっただけなんで、まあとりあえずはそれが解消されればヨシとしましょう。

SVGでfaviconを


 上でグダグダ書いてたfaviconなんですけども、何も使えるのはアイコンファイル(.ico)だけではなく、PNGとか、何ならSVGも使えるらしいのですよ。SVGってのは、えーと、Scalable Vector Graphicsの略で、テキストベースのベクタ形式画像です。扱ったことがない人だとホント何を言っているのかわからないと思いますが、拡縮しても画像が荒れないちょっと特殊な形式ぐらいの認識でいいと思います。faviconは、色々な環境に対応させようとすると、16*16、24*24、32*32、48*48、64*64、96*96、128*128、180*180、192*192、256*256、512*512等など、まあそれはもう数多くのサイズの画像を用意しなけりゃいかんことになってしまうんですが、SVGなら拡縮表示されても綺麗なままなので、一つ用意しておけばオールオッケー! 夢の画像形式だぜ! と、なるわけです。

 ほぼほぼ問題なくなってきたとは言え、まだSVGに対応していないブラウザもあるらしいですし、何より自分自身がSVGを扱い慣れていないので、まだウチのfaviconには採用しませんが、とりあえず元データをSVGで作っておけば今後役に立つ場面もあるかもしれん、ということで、SVG画像の作成に初挑戦してみました。ベクタ画像自体は、以前FlashをいじくっていたときにParaDraw(「All About」紹介ページ)で作成したことがあるので、まあ何とかなるじゃろ。

favicon_20240829.svg

 いつものアレ。アレって言うかみかん星人。Inkscape(「窓の杜」紹介ページ)で作成したSVG画像です。こんなんでもすげえ時間がかかってしまいましたが、ここは一応、こんなん楽勝でっせ! と見栄を張っておきます。

 さて、faviconをこの画像一枚で済ませられるなら便利(icoファイルのようにルートに置けばよいというわけではなく、全HTMLファイルに指定してやらなければいけないので結局手間はかかるが)ではあるんですが、気になるのは16*16なんかに縮小したときにどうなのかということ。もちろん縮小でも拡大でも綺麗に拡縮はされるんですが、あまりに小さすぎると細かい部分はさすがに潰れてしまうのではないだろうか。

favicon_20240829.svg
SVG 16*16
favicon16_4bit.png
PNG 16*16

 これは……う~ん、微妙。なんとなくみかん星人っぽく見えないこともないですが、さすがにこのサイズだとドット打ちしたPNG画像の方がマシに見える気がする。手足のない頭だけのみかん星人のSVG画像も用意して縮小表示させればいいのかもしれませんが、それだと結局複数のSVG画像をサイズ別に指定することになるんだよなあ。色々と難しいね。難しいから、放置で。

検索ヒットするじゃねーか


 CafeLog版三日坊主日記を公開してから十日ほど経ちまして、先日URL検査をしてみたところ、無事Googleに登録されたようです。まだ全ページではないようですが、日記のトップページやカテゴリページなんかは検索するとちゃんとヒットする。ああ、良かった。これで安心して以前のWordPressやさくらのブログだのを消せるわと思って早速消したんですが、消した後に、衝撃の事実に気がついてしまいました。

 アルファのクリスがレーザーガンを撃つアニメを載せてる記事(CafeLog版の記事)があるんですけども、その記事は検索で出るのかなーと何気なく「三日坊主日記 酔生夢死 あるふぁ」で検索してみたところ、WordPressとさくらのブログの記事がヒットしたんですよ。さくらのブログは前からでしょうけども、WordPressは登録されてなかったJYAN!? 自分が気がついてなかっただけで、個別記事は前から登録されていた……? 消すの早まっちゃった? いやいや、ないでしょ。この記事でこそないけども、以前検索しても出てこなかったし、そもそもGoogle Search ConsoleのURL検査で未登録だったもの。となると、ここ一ヶ月くらいの間に登録されたってこと? このタイミングで? Google空気読めよ! いや、ある意味読んでるのか? そんな嫌がらせみたいな空気の読み方しないで頂きたい。

 まあね、クローラーを手動で動かしてるわけがないので、単なる偶然なんでしょうけどもね、さすがにショックですよ。you は shock ですよ。ただまあ、もう削除してしまったというのはありますが、CafeLogに重大な欠陥でも判明しない限りは、さすがに今更WordPressに戻そうとかは思わないのでいいんですけどもね。いいんですけども!

 自分用にメモ。WordPress版三日坊主日記(https://thu.sakura.ne.jp/diary/以下)にアクセスした場合は、CafeLog版三日坊主日記のトップページにリダイレクト。各記事の分け方が異なるため、各記事へのリダイレクトは出来ず、トップページに飛ばしている。
コメント一覧
コメント投稿

名前

URL

メッセージ

- CafeLog -