スポンサーリンク

Chromeやスマホで微妙に表示されないファビコンの対応方法:ファビコンの作り方と設定方法

スポンサーリンク

Chromeのタブでこのサイトのファビコンが微妙に表示されていなかった。ちなみに、Microsoft Edge では表示されている。※キャッシュを削除しても現象変わらず。

今回、対応したので、その方法を図解する。ズバリ、favicon.ico をサイトのルートに配置する方法だ。

毎度のことながら、「私はこうやったらできたよ」というレベルなのであしからず。

最後の最後によく分からないオチがついたので、それもチェケラッチョ・ハゲラッチョ!

スポンサーリンク

当方の状況

  • WordPressにてサイト作成
  • テーマ:Luxeritas(設定方法などはこちらの記事
  • レンタルサーバー: MixHost
  • FTPツール:FileZilla(インストール方法などはこちらの記事
  • Windows10
  • スマホ:Android OS, ブラウザ:Chrome, Sleipnir

不具合の説明

ファビコンが表示される時とされない時がある。

デスクトップの Chrome ブラウザ:✕

デスクトップの Chrome ブラウザ
デスクトップの Chrome ブラウザ

なぜかWordPress のダッシュボードにはファビコンが効いていて表示されるが、肝心のサイトには表示されない。

デスクトップの Edge ブラウザ:○

デスクトップの Edge ブラウザ
デスクトップの Edge ブラウザ

Android の Chrome ブラウザ:✕

Android の Chrome ブラウザ
Android の Chrome ブラウザ

赤丸で囲んだ所にファビコンが出ない。

Android の Sleipnir ブラウザ:✕

Android の Sleipnir ブラウザ
Android の Sleipnir ブラウザ

赤丸で囲んだ所にファビコンが出ない。

Android の Chrome 検索結果:○

Android の Chrome 検索結果
Android の Chrome 検索結果

検索結果には表示されている。

不具合発生時にやっていたこと

Luxeritas  でのサイトアイコン設定
Luxeritas でのサイトアイコン設定

WordPress の Luxeritas テーマの [カスタマイズ(外観)] メニュー > [サイト情報 / サイトアイコン] で設定できるサイトアイコンに [siteicon.png] というような名称の画像を設定していた。

もう一箇所、関係あるのか不明だが、[Luxeritas] > [カスタマイズ] > [SEO] タブにある、[構造化データの設定] の [サイトロゴ]にも設定していた。

 Luxeritas  での構造化データのサイトロゴ
Luxeritas での構造化データのサイトロゴ

原因

不明。私の設定方法が悪いのかもしれない。何か予期しない原因があるかもしれないが、追求しないでおく。

対処方法

以前、まだブログがない時代にホームページを少し運営していた頃、ファビコンの設定は、favicon.ico をサイトのトップに置けばよかったことを思い出したので、その方法で行うことにする。

Android の Chrome や Sleipnir も、正しいものがあれば、それを利用して勝手に表示してくれるはずだ。

拡張子 *.ico

拡張子 *.ico は マイクロソフトがWindowsで使っているアイコン用画像フォーマット(favicon を最初にやり始めたのも Internet Explorer だったしな)。

*.ico は、32×32、16×16 などの大きさの異なる複数の画像を格納することができるらしい。出典:WikiPedia

アイコン画像を作れる方は、ファビコンにしたい画像で [favicon.ico] というファイル名のものを作れば良い。私は、作り方がよく分からなかったので、ググったら、「X-icon editor」という Web サービスがあり、それを使うことにした。

X-icon editorでファビコンを作る

X-icon editor の使い方を簡単にメモしておく。

[Import] ボタンを押す

 X-icon editor [Import]
X-icon editor [Import]

[Upload] ボタンを押下

X-icon editor [Upload]
X-icon editor [Upload]

ファイルを選択する

ファイルを選択する
ファイルを選択する

選択領域を調整する

選択領域を調整
選択領域を調整

[OK] ボタンを押下

[OK] ボタンを押下
[OK] ボタンを押下

[Export] ボタンを押下

 X-icon editor  [Export]
X-icon editor [Export]

[Export your icon] ボタンを押下

ボタンを押す前に、以下の link タグをテキストエディタなどにコピペしておく。

<link rel="shortcut icon" href="favicon.ico"/>

ボタンを押すと、ローカルに保存できる。

↓gzip で最小サイズに圧縮せいと言われているようだが、私は特に何もしないでこのまま使うことにした。

X-icon editor [Export your icon]

できあがった favicon.ico をサイトのルートに転送する

できあがった favicon.ico をサイトのルートに転送する
できあがった favicon.ico をサイトのルートに転送する

私は、FTP 転送に FileZilla を使用している。左のペインから右のペインへドラッグ&ドロップで転送できる。

※「favicon.ico」ファイル名を変更するようなことをしてはいけない。大文字小文字も。

FileZillaのインストール方法と使い方はこちら↓

ヘッダに追記する

ヘッダに追記する
ヘッダに追記する

[Luxeritas] > [子テーマの編集] > [Headタグ] に、先程の一行を追加し、[保存] ボタンを押す。

修正結果

デスクトップの Chrome ブラウザ:○

デスクトップの Chrome
デスクトップの Chrome

Android の Chrome ブラウザ:○

 Android の Chrome
Android の Chrome

Android の Sleipnir ブラウザ:▲

なぜ、背景がこのような色になってしまったのだろうか・・・Sleipnir が勝手にやっているとしか思えないので、追求しないことにした。このままとする。

以上です。

スポンサーリンク