BLOG

備忘録的にまとめていきます

スマホのファビコンが表示されないから表示させる!(iOS、Andoroid)

自分のサイトをホーム画面に、しかしiPhoneでfaviconが表示されない!

なんかこうなる…

ちなみに、faviconってのはこれです。ホームページのアイコンみたいなのです。

faviconを作って、以下のコードを<meta>タグ内に設定すれば出ます。

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

ちなみにfavicon.icoの作り方は下記のウェブサービスを使うといいです。

ファビコン favicon.icoを作ろう!

このfaviconを設定するとSafariの「ホーム画面に追加」でアプリみたいに並ぶはずなのに出ないのです(泣)なぜだ!?

調べてみるといつものfaviconの書き方にプラスで書き加えないと出ないことが判明。

iOSの場合

下記のコードを<head>内に記述すればいいです。iOS専用のコードです。pngで制作します。名称も必ず「apple-touch-icon.png」で設定してください。サイズは他にも色々な大きさがあるらしいですが180*180がベストらしいです。180pxで制作しましょう。

<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">

はい、できた!

Safari>下のバー真ん中の四角いアイコン>「ホーム画面に追加」

出来た〜!(理想は背景が透明だけど、iOSの仕様でぐぬぬ…)

Andoroidの場合

Andoroidの場合、特に設定せずとも出るようですがまれに出ない機種もあるらしいです。AndroidのVerの影響かもしれませんが、たしかに出ない機種がありましたが、下記を設定したら出ました。念の為設定しておいたほうが無難かもしれません。ちなみにサイズは192*192が基本らしいです。192pxで制作しましょう。iOS同様名称もandroid-touch-icon.pngで設定しておいたほうが無難かもしれません。

<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">

はい、できた!

Andoroidoは背景透明でいいかんじ

コメントを残す

*