スマホのブックマークアイコン用画像を指定する方法

スマホのブックマークアイコン用画像を指定する方法

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

スマートフォンでWEBページを閲覧する時、iPhoneであれば、かなりの確率でSafariブラウザを利用すると思いますが、毎回立ち上げるページであれば、ホーム画面にアプリのようなアイコンとして置いてあると便利だという事は知る人ぞ知る機能だと思います。

ホーム画面にブックマークをセットする手順

1. 画面下部のボタンをタッチ。

image06

2. ホーム画面に追加をタッチ。

image04

3. 自由に名前を付けて登録できます。

image05

4. 見事、ホーム画面にアイコンがセットされました。

image08

簡単な操作で、アクセス効率アップです。

タッチアイコンを自由に設定する方法

今回はショーケース・ティービーのWEBページで操作した所、WEBサイトにセットされているファビコンがアイコンとして登録されてしまいました。

実はこれを任意画像でセットするlinkタグもあるのです。

サイト主であれば、柔軟に画像を登録できるのであれば、設定を行わない手はないという事ですね。

やり方はものすごく簡単な方法で実現できます。

このタグをheadタグ内に記述するだけなんですね。

このままだと3D効果(光っているエフェクトと影)がつくのでフラットデザインにしたい場合は

とします。

しかも、この方法はAndroidも対応できるので、めちゃくちゃ便利です。

「apple-touch-icon」という名称から、iPhoneしか対応していないかと思ってたんですが、Android(GalaxyS3で検証)でもセットできたので、標準機能という事で理解できました。

「たくさん画像を作るの面倒だよ」という方は iconifierのサイトに152×152ピクセルのPNG画像をセットすれば全部自動で作ってくれます。

注意点

色々なサイトに書かれている、apple-touch-icon機能の注意点として、画像の設置場所にBasic認証が掛かっていると、画像が正常に取得できないのですが、僕が調べた所もう一つ注意点がありました。

それは

「URL指定の場合http://とhttps://の違いに注意」

ということです。

注意点としては、http://***/というサイトであれば、画像のURLはhttpでアクセスする必要があり、通常httpサイトでhttpsなどのjsやcssを読み込む際はエラーにはならず問題なく読み込まれるのですが、この機能における画像だけは、ポート番号をあわせる必要があるようです。

ご注意ください。

アクセス解析の流用

この機能が使われたかどうかは現時点では、知るすべがありません。
ユーザーが任意にホーム画面に設置するため、設置履歴が残らないというのが欠点かもしれません。

ただ、画像のアクセス履歴を解析して、ホーム画面への設置情報をロギングすると、アイコンの成果が終えるかもしれませんね。

また、ページ内でランダムに出し分けることでA/Bテストなども行えてもしかするとこれってマーケティング・リサーチ向きなんではないか?と考えてしまいました。

どこかで似たようなサービスがあったような気がしますが、気が向けばそういうサービスを作ってみたいと思います。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

楽天モバイルでiPhoneに機種変更|SIMだけ利用も端末セット購入も完全ガイド... 格安SIMでも人気・知名度共に高い楽天モバイル。キャリアから乗り換えようと考えている方も多いようですね! 「格安SIMに乗り換えてもiPhoneを使いたい!」そう考えている方も多いのではないでしょうか? 楽天モバイルに乗り換えて...
ワイモバイルの機種変更で最新スマホを安くゲットする方法... ワイモバイルで機種変更をすると頭金を払わなければいけない、指定のオプションに入らなければいけないなど言われたことはありませんか? ショップで機種変更をしようとすると、普通に機種変更をするよりも余分にお金や手間がかかってしまうことがたく...
【2018年9月】UQモバイルのキャンペーンとキャッシュバックのもらい方... 2018年9月のUQモバイルのキャッシュバックキャンペーンについて解説します。 キャンペーン内容や条件は申し込みサイトごとに異なるので、あなたにとって最もお得になるページから申し込んでくださいね! 1 UQモバイルのキャッシュバック...
ソフトバンクのウルトラギガモンスター+の全て|新料金プランの真実... 昨今の格安SIMの加速度的な普及が裏付けるように、モバイル業界では大手キャリアの料金プランが高額過ぎると疑問視されており、時の官房長官までがそのことに言及する事態となっています。 それを受けてドコモ、auが新料金プランを発表し、ソフト...