飽き性な男のムダ話

飽き性な男のムダ話

飽き性な男のムダ話

Taku's illustration

Web・WP関連

【favicon】スマホでファビコンが表示されない!?iOS・Androidにも表示させる設定方法を徹底解説

こんにちは~Taku(@takumuda_1093)です。

皆さんはWebサイトやブログでfavicon(ファビコン)をしっかり設定しているでしょうか?
設定している方でも、スマートフォンのブラウザやホーム画面で正しく表示されていないことがあります。

今回は、スマホでもファビコンを表示させる設定方法を解説していきます。
記載する画像は主にiPhoneの内容になりますが、Android向けの設定方法も紹介しているので、ぜひ最後までお付き合い下さいね。

1.スマホでfaviconが表示されない!

筆者は現在3つのサイトを運営・公開しています。
各サイトのファビコンのデザインは以下の通りです。

最近、外出中でもスマホ(iPhone)でブログの記事を書いたり、サイトの確認や編集をすることが多くなりました。
そこで、すぐサイトにアクセスできるようにブラウザ(Safari)で「ブックマーク」を追加しました。

そして、しっかり追加できているか確認をしてみると…

なんだこれ!!頭文字アイコンになってるじゃあないか!!!
Taku
Taku

他のWebサイトのアイコンは綺麗にファビコンが表示されているのに、自分のサイトは全て頭文字のアイコンになっていました。

次にスマホのホーム画面からもアクセスできるように「ショートカット」を設定しました。
こちらも表示確認をしてみると…

だ、だせぇ!!こっちもファビコンが表示されてねーのか!!
Taku
Taku

サイトのメインビジュアル部分が中途半端にトリミングされたアイコンになっていました。

リュウイチ
リュウイチ
これはそういう仕様なんじゃあないのか?
う〜ん、でも他のサイトのアイコンはしっかり表示されているから…。
自分のサイトに原因があるっぽいね…。
Taku
Taku

とりあえず、何が原因で表示されないのか調べてみると、あることが分かってきました。

2.各OSにあわせて設定する必要がある

ファビコンの設定をするときは、以下がシンプルかつ基本的な書き方になります。

/* 基本的なfaviconの設定方法 */
<link rel="shortcut icon" href="favicon.ico">

上記の内容を記述することで、以下の画像のようにサイトのアイコンがタブなどに表示されます。

ただ、この記述だけではスマホのファビコンを表示させることができないようです。
また、iOSやAndroidなど、各OSに適した画像とコードを設定しないとファビコンは表示されません。

リュウイチ
リュウイチ
別に設定をしないといけないのは少し面倒だな。
確かに…。
でも、やるっきゃないね…。
Taku
Taku

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のファビコン設定もしていくよ!
Taku
Taku

②Androidの設定

次にAndroidのファビコンも設定していきましょう。

Androidでファビコンを表示させるには「android-touch-icon.png」というファイル名の画像を作成する必要があります。

サイズは「192×192」のサイズで作成して下さい。

こちらはiPhone版とは違い、png画像の透過部分は綺麗に表示されます。
なので背景は透過させて作成しても問題ありません。

作成した画像はサーバーのルートディレクトリにアップして下さい。

画像のアップが完了したら、以下のコードをHTMLの上部にある<head>タグの中に記述していきます。

/* iOSでファビコンを表示させる記述 */
<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">

こちらも作業後に表示確認をするとしっかり表示されていました。

●ホーム画面一覧

リュウイチ
リュウイチ
背景が透明になっているとかっこよく見えるな。
確かに!!
Androidの方は、pngの透過が綺麗に反映されるのが良いよね!
Taku
Taku

③余裕があればMacやWindows用の画像も作ってみよう

スマホだけではなく、MacやWindowsのホームのショートカットアイコンも設定ができます。

ですが、スマホ中心のこの時代、わざわざパソコンでショートカットを作成してアクセスする人は少なかと思います。

なので、余裕がある方は画像を作成してみて下さい。
今回の記事ではスマホでファビコンを表示させる方法を解説しているので、詳しい説明は割愛します。

4.ジェネレータからも簡単に画像作成ができる

「画像の作り方はわかったけど、知識がなくてよく分からない…。」
そう思っている方もいるのではないでしょうか?

そんな場合は、以下のサイトから簡単にファビコンを作成できます。
言語が英語のサイトで、ややとっつきにくい感じがするかもしれませんが、操作はとても簡単です。

画像はもちろん、実際にコーディングするコードも同時に作成してくれるので、Web知識がない方でも簡単に記述することができます。

https://realfavicongenerator.net/

このサイトは、初心者向けに紹介をしました。
ですが、ある程度知識がある方は、ジェネレータに頼らず自分で作成することを強くおすすめします。

イラレやフォトショなんかを使える人は、自力で作って欲しいな!
自分で作成できれば、細かいデザインもこだわることができるからね!
Taku
Taku
リュウイチ
リュウイチ
お前みたいにデザインを仕事にしてる人ならなおさらだな。

5.最後に

この記事ではスマホでもファビコンを表示させる方法を紹介しました。

ぶっちゃけ、かなりのアクセス数がある人気サイトでない限り、ユーザーからブックマークやショートカットを追加してもらえることはないかもしれません。

ですが、設定することに越したことはないですよね。
何よりも、こういった細かな作業がサイトの質を上げることに繋がるので、ぜひ設定してみて下さい!

最後まで読んでいただきありがとうございました!

この記事へコメントする

メールアドレスが公開されることはありません。

CAPTCHA


PROFILE

プロフィール

プロフィール画像

Taku

社会人2年目のWebデザイナー

専門学校でWebやグラフィックの技術を2年間学び、
印刷会社のデザイナーとして就職。

しかし、Webのスキルアップを目指して
半年で退職。現在はWeb制作会社に転職。

保育園児の頃からイラストを描くことが大好き。
オリジナルキャラクターのイラストを描いている。

ハマって得た "ムダ知識" も、
誰かの役に立つはずだと信じてブログを開設。

好きになると誰よりも詳しくなるタイプだが、
冷めるのも凄まじく早いのが欠点。