【favicon】スマホでファビコンが表示されない！？iOS・Androidにも表示させる設定方法を徹底解説
こんにちは～Taku(@takumuda_1093)です。
皆さんはWebサイトやブログでfavicon(ファビコン)をしっかり設定しているでしょうか？
設定している方でも、スマートフォンのブラウザやホーム画面で正しく表示されていないことがあります。
今回は、スマホでもファビコンを表示させる設定方法を解説していきます。
記載する画像は主にiPhoneの内容になりますが、Android向けの設定方法も紹介しているので、ぜひ最後までお付き合い下さいね。
1.スマホでfaviconが表示されない！
筆者は現在３つのサイトを運営・公開しています。
各サイトのファビコンのデザインは以下の通りです。
最近、外出中でもスマホ(iPhone)でブログの記事を書いたり、サイトの確認や編集をすることが多くなりました。
そこで、すぐサイトにアクセスできるようにブラウザ(Safari)で「ブックマーク」を追加しました。
そして、しっかり追加できているか確認をしてみると…
他のWebサイトのアイコンは綺麗にファビコンが表示されているのに、自分のサイトは全て頭文字のアイコンになっていました。
次にスマホのホーム画面からもアクセスできるように「ショートカット」を設定しました。
こちらも表示確認をしてみると…
サイトのメインビジュアル部分が中途半端にトリミングされたアイコンになっていました。
自分のサイトに原因があるっぽいね…。
とりあえず、何が原因で表示されないのか調べてみると、あることが分かってきました。
2.各OSにあわせて設定する必要がある
ファビコンの設定をするときは、以下がシンプルかつ基本的な書き方になります。
/* 基本的なfaviconの設定方法 */
<link rel="shortcut icon" href="favicon.ico">上記の内容を記述することで、以下の画像のようにサイトのアイコンがタブなどに表示されます。
ただ、この記述だけではスマホのファビコンを表示させることができないようです。
また、iOSやAndroidなど、各OSに適した画像とコードを設定しないとファビコンは表示されません。
でも、やるっきゃないね…。
3.実際に設定していこう
ここからは、各OSにあわせた画像作成とコードの記述方法を解説します。
①iPhoneの設定
まずは、iPhoneでファビコンを表示させていきましょう。
iPhoneでファビコンを表示させるには「apple-touch-icon.png」というファイル名の画像を作成する必要があります。
サイズは「180×180」のサイズで作成して下さい。
画像形式はpngですが、背景は透過せず真っ黒な状態になってしまいます。
なので、背景は透過しない状態で作成した方が綺麗に表示されます。
作成した画像はサーバーのルートディレクトリにアップして下さい。
（ルートディレクトリは、indexファイルがある階層のことです。）
画像のアップが完了したら、以下のコードをHTMLの上部にある<head>タグの中に記述していきます。
ちなみに、「index.html」の<head>内に記述しますが、WordPressサイトの場合は「header.php」の<head>内に記述することが多いです。
/* iOSでファビコンを表示させる記述 */
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">一通り作業をして再度表示確認をするとしっかり表示されていました。
●ブックマーク一覧
●ホーム画面一覧
この調子でAndroidのファビコン設定もしていくよ！
②Androidの設定
次にAndroidのファビコンも設定していきましょう。
Androidでファビコンを表示させるには「android-touch-icon.png」というファイル名の画像を作成する必要があります。
サイズは「192×192」のサイズで作成して下さい。
こちらはiPhone版とは違い、png画像の透過部分は綺麗に表示されます。
なので背景は透過させて作成しても問題ありません。
作成した画像はサーバーのルートディレクトリにアップして下さい。
画像のアップが完了したら、以下のコードをHTMLの上部にある<head>タグの中に記述していきます。
/* Androidでファビコンを表示させる記述 */
<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">
こちらも作業後に表示確認をするとしっかり表示されていました。
●ホーム画面一覧
Androidの方は、pngの透過が綺麗に反映されるのが良いよね！
③余裕があればMacやWindows用の画像も作ってみよう
スマホだけではなく、MacやWindowsのホームのショートカットアイコンも設定ができます。
ですが、スマホ中心のこの時代、わざわざパソコンでショートカットを作成してアクセスする人は少なかと思います。
なので、余裕がある方は画像を作成してみて下さい。
今回の記事ではスマホでファビコンを表示させる方法を解説しているので、詳しい説明は割愛します。
4.ジェネレータからも簡単に画像作成ができる
「画像の作り方はわかったけど、知識がなくてよく分からない…。」
そう思っている方もいるのではないでしょうか？
そんな場合は、以下のサイトから簡単にファビコンを作成できます。
言語が英語のサイトで、ややとっつきにくい感じがするかもしれませんが、操作はとても簡単です。
画像はもちろん、実際にコーディングするコードも同時に作成してくれるので、Web知識がない方でも簡単に記述することができます。
https://realfavicongenerator.net/
このサイトは、初心者向けに紹介をしました。
ですが、ある程度知識がある方は、ジェネレータに頼らず自分で作成することを強くおすすめします。
自分で作成できれば、細かいデザインもこだわることができるからね！
5.最後に
この記事ではスマホでもファビコンを表示させる方法を紹介しました。
ぶっちゃけ、かなりのアクセス数がある人気サイトでない限り、ユーザーからブックマークやショートカットを追加してもらえることはないかもしれません。
ですが、設定することに越したことはないですよね。
何よりも、こういった細かな作業がサイトの質を上げることに繋がるので、ぜひ設定してみて下さい！
最後まで読んでいただきありがとうございました！
この記事へコメントする
SEARCH
検索
REQUEST
ご依頼募集中
ILLUSTRATION
イラストサイト
SPONSOR LINK
スポンサーリンク
PROFILE
プロフィール
Taku
創作中心のフリーイラストレーター。
専門学校でWebやグラフィックの技術を2年間学び、
印刷会社のグラフィックデザイナーとして就職。
Web技術のスキルアップを目指して
半年で退職し、Web制作会社でデザイナーとして2年間奮闘。
現在はフリーのイラストレーターとして
日々活動している。
現在イラスト・画像作成のご依頼を募集しております。
ご興味がある方はご依頼募集サイトから詳細をご覧下さい。
コメント一覧
コメント失礼いたします。
「②Androidの設定」の項目において、HTMLのコメントが「/* iOSでファビコンを表示させる記述 */」と記載されていますが、おそらく「iOS」は書き間違いではないでしょうか？
racさん
コメント頂きありがとうございます。
また、HTMLのコメントアウト部分のご指摘を頂きありがとうございます。
内容を確認したところ、確かに間違っておりました。
現在は修正済みとなっております。
内容に不備があり申し訳ございません。
大変助かりました。
今後とも宜しくお願い致します。