CSSfacebookTweethatenaline2019.06.10レシピ画像スマホ向けのファビコンを設定するスマホでブックマークがホーム画面に追加されたときに表示されるファビコンの設定方法を解説します。この記事のポイントiOS向け/Android向けのファビコンの形式とサイズを確認する通常ファビコン/iOS向け/Android向けをそれぞれ設置するどこにどのファビコンが表示されるかが分かる目次スマホ向けのファビコンについて環境別に表示の確認をするスマホ向けのファビコンについてファビコンは通常のWebサイトとは別に、スマホ向けの指定をすることができます。スマホ向けのファビコンを設定すると、「お気に入り」としてホーム画面に設定したときなどに表示されます。iPhoneのホーム画面にアイコンが表示されるファビコンはiOS向けとAndroid向けに分けて設定することができます。今回は3種類のファビコン画像を用意して設定を解説します。192px通常のファビコン(PC版ブラウザ用)は「.ico」ですが、他の2つは「.png」で用意します。これらの画像をhead要素内にlink要素を使って設置します。1行目は通常のファビコン、2行目はiOS向けファビコン、3行目はAndroid向けファビコンです。sizes="192x192">環境別に表示の確認をする環境別にブラウザの表示を確認してみましょう。SafariiPhoneのSafariでは、ファビコンはブックマーク一覧に表示されます。ここに表示されるのはiOS向けファビコンではなく、通常のファビコンです。iPhoneのSafariのブックマーク画面iOS向けファビコンが表示されるのは、ホーム画面にショートカットリンクを設定したときです。ChromeChromeではタブとブックマークの2箇所でiOS向けファビコンが表示されます。ChromeAndroidのChromeでは、Android向けファビコンが表示されます。ChromeのタブAndroidのホーム今回は環境ごとに表示されるファビコンの違いが分かりやすくなるよう色を分けていますが、通常は同じデザインのファビコンをサイズ&形式違いで3種類用意して設置します。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。