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

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

スマートフォンで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「データお預かり」アプリでバックアップ!確実にデータ移行する方法... auが提供で用意している、「データお預かり」というデータバックアップアプリをご存知でしょうか。 このアプリを経由すれば、無料でアドレス帳や写真などをauのクラウド上に預けておくことができます。 今回はauユーザーならぜひ利用した...
【ユーザーレビュー】一眼レフに匹敵する高画質なカメラアプリ... Camera+ 画像引用元:Camera+ 23歳 男性 会社員 iPhone X アプリの満足度:5点(5点満点) 撮影頻度の多い被写体:ペットの写真、花 iPhoneが一...
【女子におすすめ】写真をもっと可愛くするためのカメラアプリ... APUS Camera 画像引用元: APUS Camera - HD Camera, Editor, Collage Maker 35歳 女性 主婦 HUAWEI honor8 アプリの満...
結婚式に最適!人気のおすすめカメラアプリ【Android/iPhone対応】... 結婚式の形は多様化していますが、昔から変わらないことは『新郎新婦やゲストの写真を撮影し、思い出として残すこと』ですよね。 特に近年は、スマホの普及によってカメラが常に手元にある状態なので、さまざまなシーンを誰でも手軽に撮ることが可能で...