apple touch Iconの文字を短くする方法

サイトを運営していると、iphoneユーザにapple touch iconをホーム画面に追加して手軽にチェックしてほしいときってありますよね?

そんなときに、apple touch iconを追加しますが、問題はapple touch iconってhtmlのtitleを見てしまいますよね?

これだとアイコンの下の説明が飛び出てしまい

◯◯…..と表示されます。

そこで、apple touch icon専用のタグが存在します。

やり方はこちらになります。

Apple touch icon名を指定する方法

<meta name="apple-mobile-web-app-title" content="ラボログ">

文字数制限

表示する文字数には上限があります。

英語なら11文字、日本語なら6文字までが表示される最大の文字数だそうです。

文字数が長いサイトの場合は工夫する必要がありますね

参考リンク

https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/