WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法

WordPressは、カスタマイズからサイトアイコンを簡単に設定できますが、iPhone用アイコンだと透過部分が黒くなってしまうというデメリットがあります。
そんなデメリットを、疑似的に解決してしまおうという方法を見つけましたので紹介いたします。

初めにお断りしておくと、今回の解決法は完全な解決策にはなりませんので予めご了承ください。

WordPressのサイトアイコン設定

みなさんご存知の通り、サイトアイコンの設定はカスタマイズからおこないます。

ファビコンとiPhoneアイコンを同時に設定できてとても便利ですよね。

この場合は拡張子はicoではなくpngで設定することになるのですが、周りを透過させた画像を使うとiPhone用アイコンだけ黒くなってしまいます。

アイコンを編集しよう

編集というほどでもないですが、単純に周りを白く塗りつぶせば黒くなる問題は解決できます。
ですが、今回は白ではなくグレーで塗りつぶすところがポイントです。

カラーは#f2f2f2を使います。
アイコンができたらカスタマイズからアップロードしなおします。

キャッシュを削除しよう

キャッシュが残っているとアイコンは黒いままなので、設定から削除します。

設定 ⇒ Safari

履歴とWebサイトデータを消去

履歴とデータを消去

アイコンの再度確認してみよう

ホーム画面にサイトを登録しなおします。

若干グレーっぽさはありますが、そこまで目立つことはないかと思います。

今回のポイントはここです！

モバイルSafariでお気に入り登録したサイトは、画面上部の検索窓をタップするとアイコンが表示されます。
今回のポイントはここなのですが、背景がグレーなので疑似的に透過アイコンのように表示することができるのです。

ど……どうでしょうか？……苦し紛れ感が否めませんが、「いいかも！」と思っていただけた方はお試しください！