以前の「Faviconの設定」の中で2種類のサイズのFavicon以外に、スマートフォン用に「touch-icon」の設定も少し説明しました。
yachin29.hatenablog.com
ここ数年スマートフォン利用者数が急激に伸び、今までのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースが増えています。
なので、スマートフォンサイトを制作する場合には必ずスマートフォンのホーム画面に登録出来る「タッチアイコン」をファビコン同様作っておく必要があります。
ただ「タッチアイコン」をホーム画面に登録すると、デフォルトの設定ではページタイトルの中身がタッチアイコンの下に表示され、場合によっては文字が見切れてしまうので（半角13文字｛全角6文字｝まで）タッチアイコン用のタイトルを別に指定しましょう。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル"> <title>タッチアイコンに任意のタイトルを表示させる</title> <link rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"> <link rel="apple-touch-icon" href="touch-icon.png"> </head>
