質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.87%

AndoroidとiPhoneで表示するファビコンを切り替えたい。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,137

yusuke_k

score 8

ファビコンジェネレーターというサイト
http://realfavicongenerator.net/
でファビコンを作ってみました。

「favicons」というフォルダには

バージョンアップ後の「favicons」

android-chrome-192x192.png
apple-touch-icon.png
browserconfig.xml
favicon.ico
favicon-16x16.png
favicon-32x32.png
manifest.json
mstile-150x150.png
safari-pinned-tab.svg

の9つのファイルが入っており、

以下のソースをhead内に組み込むことでファビコンが表示できるようになります。
(PCとスマホのハイブリッドサイトのスマホ側のソースなので
ディレクトリ指定はいじってあります。これも原因なのでしょうか・・・?)

バージョンアップ後のソース

<link rel="icon" type="image/png" href="../favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../favicons/manifest.json">
<link rel="mask-icon" href="../favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../favicons/favicon.ico">
<meta name="msapplication-config" content="../favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">


いつもはこのサイトで角丸のファビコンを作っているのですが、
「丸いファビコンで」という要望があり
ファビコンを角丸ではなく丸型のものにしようと試みました。

透過の丸いpng画像をアップロードすれば簡単!・・・とはなりませんでした。
このファビコンジェネレーターがバージョンアップする以前に作ったサイトでは
上手くいったのですが、、、

ちなみにバージョンアップする以前の「favicons」の中身はもっと大容量で
現在のバージョンの9つのファイルに加えて、

バージョンアップ以前の「favicons」

android-chrome-36x36.png
android-chrome-48x48.png
android-chrome-72x72.png
android-chrome-96x96.png
android-chrome-144x144.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180.png
apple-touch-icon-precomposed.png
favicon-96x96.png
mstile-70x70.png
mstile-144x144.png
mstile-310x150.png
mstile-150x310.png

があり、
ソースコードは以下のようになっていました。

バージョンアップ以前のソース

<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="favicons/manifest.json">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="favicons/mstile-144x144.png">
<meta name="msapplication-config" content="favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">


バージョンアップする前と後で効率化が図られたということでしょうか?

バージョンアップ以前に作成したサイトのファビコンもそうだったことから
iPhoneでは黒い角丸の背景に丸いアイコンが出来るということで納得してもらえました。

しかしAudoroidでは以前のサイトのファビコンは丸く切り取られたものだったのですが、
今回はなぜかiPhone用のファビコンと同じものが出てきてしまいました。
以前作ったものが今は作れない、、、は通りません、、、

android-chrome-192x192.pngの背景だけをピンクに変えたものに作り直しても
背景が黒かったのでAndoroidとiPhoneの切り替えがうまくいっていないのだと思うのですが…

バージョンアップ後の「manifest.json」

{
    "name": "\u30c7\u30a4\u30b5\u30fc\u30d3\u30b9\u3000\u3044\u308d\u306f\u3000\u82a5\u898b",
    "icons": [
        {
            "src": "favicons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png"
        }
    ],
    "theme_color": "#c7abab",
    "display": "standalone"
}


これで切り替えを行っているのだと思いますが、正直調べても全然分かりません。

むしろなんて調べれば求めてる答えにたどり着くのかすら分かりません、、、
キャッシュの削除も試したり、一度ダウンロードしたファビコンを確かめたりしても
まったく改善しません。

もしかしたら私は見当違いをしているのかもしれません。

どなたかファビコンに詳しい方、ヒントだけでもいただけないでしょうか?
納期が近づいてきていてかなりピンチです、、、助けてください、、、

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • t_obara

    2016/09/21 22:54

    サーバ側のアクセスログを確認すると良いのではないでしょうか。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.87%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる