Skip to main content
ユーザーが通知シェードやロック画面でアプリを認識できるように、プッシュ通知アイコンを設定します。Android、iOS、Webはそれぞれ異なるアイコンソースを使用します。通知に添付する大きな画像については、画像とリッチメディアを参照してください。
小さなバッジアイコン、大きなアイコン、画像を含むプッシュ通知

小さなバッジアイコン、大きなアイコン、画像を含むAndroid Chrome Webプッシュ通知の例。

Android通知アイコン

Android(AmazonおよびHuaweiデバイスを含む)は、の通知アイコンをサポートしています。Android 8.0+(API 26+)では、通知カテゴリとメーカーのUIも通知の外観に影響します。 Androidは、アイコンの代わりに人物のプロフィール画像を表示できる会話通知もサポートしています。
小さなアイコン、大きなアイコン、アクセントカラーの配置を示すAndroid通知

小さな通知アイコン

小さな通知アイコンは必須です。ステータスバーにモノクロのシルエットとして表示されます。カスタムの小さなアイコンを提供しない場合、OneSignalはデフォルトのベルアイコンを使用します。通知上のアイコンの配置は、Android 17(API 37)で変更されます。通知上のランチャーアイコンを参照してください。 Androidは、色データではなくアイコンのアルファチャンネルを使用して小さな通知アイコンをレンダリングします。Android 12(API 31)以降、システムは設定した通知アクセントカラーでそのシルエットに色合いを付けます。色を設定しない場合は、システムテーマカラーが使用されます。Android通知デザインを参照してください。 要件:
  • 透明な背景モノクロのシルエットアイコンを使用します
  • 形状が透明度で定義されるようにアイコンを設計し、色では定義しません
  • グラデーション、影、マルチカラーアートワークは避けてください
  • 非常に小さいサイズでもデザインをシンプルで認識可能に保ちます
一般的なアプローチは、透明な背景に白いアートワークです。Androidは白い色自体ではなくアルファマスクを使用します。
単色の背景やフルカラーアートワークを持つアイコンは、多くの場合、白い四角、クリップされた形状、または予期しないシルエットとしてレンダリングされます。Androidは小さな通知アイコンの色を無視し、アルファチャンネルとシステムまたはアプリの色合いから外観を導き出します。
標準のAndroidでフルカラーの小さなアイコンを強制することはできません。Android 12(API 31)以降では、カスタム通知レイアウトでもシステムで色付けされた小さなアイコンが引き続き表示されます。一部のメーカーはアルファチャンネルを無視してフルカラー画像を表示しますが、これに依存しないでください。常に準拠したアルファチャンネルアイコンを同梱してください。

通知上のランチャーアイコン(Android 17)

Android 17(API 37)以降、Androidは小さなアイコンの代わりにアプリのランチャーアイコンを通知に表示します。小さなアイコンは引き続きステータスバーに表示されます。これはすべての通知に適用されるAndroidシステムの動作であり、正確な外観はデバイスメーカーによって異なる場合があります。 代わりに通知上に小さなアイコンを表示するには、AndroidのEXTRA_PREFER_SMALL_ICONエクストラを設定します。OneSignal SDKはデフォルトではこのエクストラを設定しません。通知サービス拡張に追加してください。クラスに@Keepアノテーションを付け、そのページに示されているとおりにマニフェストに登録してください。
この文字列キーはどのcompileSdkバージョンでも機能します。Android 16(API 36)以下はこのエクストラを無視するため、無条件に設定しても安全です。

小さなアイコンのアクセントカラー

Android 12(API 31)以降が小さなアイコンの色付けに使用する通知アクセントカラーを設定できます。これはAndroidのNotification.colorsetColor)に対応します。これは、Androidが優先度の高い進行中のタスク用に予約している通知背景の色付け(setColorized)とは異なります。 アクセントカラーは、チャンネルのプロパティではなく、通知ごとのプロパティです。Android通知カテゴリは、サウンド、重要度、バイブレーション、LEDカラー、バッジを制御します。カテゴリにはアクセントカラーの設定がなく、通知がどのカテゴリで表示されるかに関係なくアクセントカラーが適用されます。
Android 17(API 37)以降では、ランチャーアイコンが表示されている場合、通知上にアクセントカラーが表示されないことがあります。ステータスバーの小さなアイコンには引き続き色合いが適用されます。
小さなアイコンのアクセントカラーを示すAndroid通知
SDKは次の順序でアクセントカラーを解決します。最初に見つかった値が優先されます:
  1. メッセージごとメッセージの作成 APIのandroid_accent_color(Google Android)またはhuawei_accent_color(Huawei)パラメータ、あるいはMessages > Push > New Push > Platform Settings > Google Android OptionsAccent colorフィールド。
  2. リソースによるアプリのデフォルトonesignal_notification_accent_color文字列リソース。
  3. マニフェストによるアプリのデフォルトAndroidManifest.xmlcom.onesignal.NotificationAccentColor.DEFAULTメタデータエントリ。
#なしのARGB 16進数値を使用します(例:FF00FF00)。Android Asset Studioで色をプレビューできます。 リソースでデフォルトの色を設定するには、res/values/strings.xmlファイルに次の行を追加します。ダークモードで異なる色にするには、同じキーをres/values-night/strings.xmlにも追加します。
代わりにマニフェストでデフォルトを設定するには、<application>タグ内に次を追加します:
表示時に完全に制御するには、通知サービス拡張からnotification.setExtenderbuilder.setColor()を使用して色を設定します。エクステンダーはSDKが上記の値を適用した後に実行されるため、それらすべてを上書きします。

大きな通知アイコン

大きなアイコンはオプションです。通知の右側に表示されます。Androidのデザインガイダンスでは、送信者の写真、サードパーティソースのロゴ、意味のあるシンボルなど、画像が通知コンテンツを補強する場合にのみ使用することとされています。大きなアイコンを2つ目のアプリアイコンやブランディングのために使用しないでください。The large iconを参照してください。
  • 推奨サイズ:256×256ピクセル
  • 形式:PNGまたはJPG
  • 色は許可されています。アルファのみは必須ではありません。
大きなアイコンを設定しない場合、標準のAndroidではそのスロットは空のままです。一部のメーカーは代わりにアプリのランチャーアイコンを表示します。

Androidデフォルトアイコンの追加方法

すべてのAndroidベースのアプリ(Google Play、Amazon、Huawei)にデフォルトアイコンを設定してください。まずAndroid SDKセットアップ(またはクロスプラットフォームのセットアップ)を完了してください。プロジェクトのリソースディレクトリ(またはExpoの場合はプラグイン設定)にファイルを追加し、再ビルドしてリリースします。ファイルが欠落しているか名前が正しくないことが、レンダリングが壊れる最も一般的な原因です。 デフォルトアイコンはアプリバイナリ内に同梱されます。OneSignalダッシュボードにアップロードされることはありません。リリース後は、新しいアイコン名に依存する通知を送信する前に、ほとんどのユーザーが更新するまで待ってください。
1

小さな通知アイコンの生成

Android Asset Studio – 通知アイコンを使用して、透明な背景にシルエットを生成してください。小さなアイコンの要件に従ってください。アイコンに名前を付ける: ic_stat_onesignal_default
2

必要な小さなアイコンのサイズを作成

小さなアイコンのすべての密度バリアントを含めてください。いずれかのサイズが欠落していると、Androidがシステムのデフォルトアイコンにフォールバックする可能性があります。これらのサイズは各密度で24dpであり、Androidのステータスバーアイコンのサイズです。
3

大きな通知アイコンの生成(オプション)

256×256のPNGまたはJPGを使用します。色は許可されています。必要なサイズは1つのみです。必須のファイル名: ic_onesignal_large_icon_default.png
4

正しいプロジェクトパスにアイコンを配置

欠落しているフォルダーは作成してください。小さなアイコンの各密度をそれぞれのdrawableフォルダーに配置します。大きなアイコンは、XXXHDPIの小さなアイコンの隣のdrawable-xxxhdpi/に配置します。2つのファイルはフォルダーを共有し、異なる名前を使用します。
小さなアイコンic_stat_onesignal_default):
  • res/drawable-mdpi/(24×24)
  • res/drawable-hdpi/(36×36)
  • res/drawable-xhdpi/(48×48)
  • res/drawable-xxhdpi/(72×72)
  • res/drawable-xxxhdpi/(96×96)
大きなアイコンic_onesignal_large_icon_default.png、256×256):
  • res/drawable-xxxhdpi/
プロジェクトは次のようになるはずです(SDKによって異なります):
drawableフォルダー内のアイコンファイルを示すAndroidプロジェクトのディレクトリ構造

drawableフォルダーにアイコンファイルが配置されたAndroid Nativeプロジェクト

Androidアプリがデフォルトの通知アイコンで設定されました。単色の四角やOneSignalのベルが表示される場合は、FAQを参照してください。

iOS通知アイコン

iOSの通知は常にアプリアイコンを使用します。システムは各通知の先頭にそのアイコンの大きなバージョンを表示し、アプリアイコンアセットからスケーリングします。メッセージごとに変更することはできません。変更するには、アプリアイコンを更新して新しいアプリバージョンを配信してください。Human Interface Guidelines: Notificationsを参照してください。
APNsペイロードにはalertbadgesoundがあります。カスタム通知アイコン用のフィールドはありません。Appleはaps辞書内のカスタムキーを無視します。これは標準のプッシュ通知と重要な通知(Critical Alerts)に適用されます。ライブアクティビティのUIは、ActivityKitを通じて独自の画像を表示できます。これは通知アイコンの代替ではありません。

コミュニケーション通知

iOS 15以降、Appleはメッセージングおよび通話アプリ向けにコミュニケーション通知をサポートしています。INSendMessageIntentまたはINStartCallIntentをドネートすると、システムは大きなアプリアイコンの代わりに送信者または発信者のアバターINImage)を表示できます。アプリアイコンは、そのアバター上に小さなバッジとして引き続き表示されます。 これには、コミュニケーション通知のCapability、SiriKitインテント、および通知コンテンツを更新するためのNotification Service Extensionが必要です。汎用の通知では利用できません。

Web通知アイコン

Webプッシュ通知は、送信時に提供されるアイコン、またはサイト設定でデフォルトとして設定されたアイコンを表示します。アイコンが提供されていない場合は、デフォルトのベルアイコンが使用されます。
  • サポートされる形式:PNG、JPG、GIF(アニメーションなし)
  • アイコンは正方形である必要があります。推奨サイズは256×256ピクセルです。web.devはAndroidで64dpとしているため、通常の最小サイズは192×192以上です。256×256は、Chrome、Firefox、Edge、Safari全体で最も一貫性のあるサイズです。
  • ブラウザとオペレーティングシステムは、アイコンのトリミングとスケーリングをそれぞれ異なる方法で行います。ChromeとFirefoxは、プラットフォームの通知UIが存在する場合はそれを使用します。
Settings > Push & In-App > WebDefault Icon URLを設定します。Web SDKセットアップを参照してください。 また、ダッシュボードまたはREST APIを使用して、通知ごとにアイコンを上書きすることもできます。デフォルト以外のアイコンで通知を送信するを参照してください。

Android Webプッシュバッジアイコン

Androidでは、完全な通知を表示するスペースがない場合、Chrome Webプッシュはステータスバーに小さなバッジアイコンを表示できます。OneSignalはこれをchrome_web_badgeで送信し、これはNotifications APIのbadgeオプションにマップされます。Android版Chromeはこのバッジを使用します。バッジを設定しない場合、Chromeはブラウザアイコンを使用します。他のブラウザは通常、ブラウザアイコンを表示します。Notification: badgeを参照してください。 これはアプリアイコンのバッジ(ドットや数字)ではありません。それらについては、バッジを参照してください。 バッジはモノクロアイコンとして扱ってください。MDNには、Androidが画像を自動的にマスクすると記載されています。透明な背景に正方形のPNGシルエットを使用してください(Androidの小さなアイコンと同じルール)。テキスト、細かいディテール、フルカラーアートワークは避けてください。 MDNは、画像が4倍でも耐えられるように約96×96ピクセルを推奨しています。72×72が通常の最小サイズです(3倍で24dp)。より大きな画像は縮小されます。
Webプッシュバッジアイコンを表示するAndroidステータスバー

Androidステータスバーにバッジアイコンが表示される例。

デフォルト以外のアイコンで通知を送信する

OneSignalダッシュボードまたはREST APIからプッシュを送信する際、Android、Amazon、Huawei、およびWebプッシュのデフォルトアイコンを上書きできます。iOS通知のアイコンは上書きできません。

REST APIパラメータ

Android、Amazon、Huawei:
string
ファイル拡張子なしのアイコンリソース名。画像は、デフォルトの小さなアイコンと同じプロジェクトフォルダーに存在する必要があります。リモートURLはサポートされていません。Androidデフォルトアイコンの追加方法を参照してください。Amazonの場合はadm_small_iconを使用します。Huaweiの場合はhuawei_small_iconを使用します。例:"small_icon": "my_custom_icon"
string
ファイル拡張子なしのアイコンリソース名、またはリモートURL。リソース名を使用する場合、画像はデフォルトの大きなアイコンと同じプロジェクトフォルダーに存在する必要があります。Androidデフォルトアイコンの追加方法を参照してください。Amazonの場合はadm_large_iconを使用します。Huaweiの場合はhuawei_large_iconを使用します。例:"large_icon": "my_custom_icon"
Webプッシュ:
string
画像リソースへの直接URL。Firefoxの場合はfirefox_iconを使用します。例:"chrome_web_icon": "https://example.com/my_custom_icon.png"
string
Chrome Web通知のAndroidステータスバーバッジとして使用される画像リソースへの直接URL。例:"chrome_web_badge": "https://example.com/badge.png"

ダッシュボード

Messages > Push > New PushまたはTemplatesで、プラットフォーム固有のオプションを開きます。 Android、Amazon、Huaweiの場合、ファイルがデフォルトアイコンと同じプロジェクトパスに存在する場合は、ファイル拡張子なしでアイコン名を設定します。大きな通知アイコンの場合は、直接URLを指定することもできます。
Androidプラットフォーム設定のアイコン上書きフィールドを表示するOneSignalダッシュボード

デフォルトアイコンを上書きする場所のOneSignalダッシュボード。

FAQ

Androidの小さなアイコンが白またはグレーの四角として表示されるのはなぜですか?

画像に適切な透明度がありません。Androidはアルファチャンネルのみを使用して小さな通知アイコンをレンダリングします。単色の背景を持つ完全に不透明なピクセルは、塗りつぶされた四角として表示されます。Android Asset Studioを使用して、透明な背景にモノクロのシルエットとしてアイコンを再生成してください。

カスタムアイコンの代わりにOneSignalのベルアイコンが表示されるのはなぜですか?

小さなアイコンの必要な密度バリアントが1つ以上欠落しているか、間違ったdrawableディレクトリに配置されているか、名前が正しくありません。正確なファイル名ic_stat_onesignal_defaultで5つのサイズ(MDPIからXXXHDPI)すべてを含めてください。正しいパスについては、Androidデフォルトアイコンの追加方法を参照してください。

通知に小さなアイコンではなくアプリアイコンが表示されるのはなぜですか?

Android 17(API 37)以降、Androidはデフォルトで通知にアプリのランチャーアイコンを表示します。小さなアイコンは引き続きステータスバーに表示されます。通知上に小さなアイコンを表示するには、通知サービス拡張でEXTRA_PREFER_SMALL_ICONエクストラを設定します。通知上のランチャーアイコンを参照してください。

メッセージごとにiOSの通知アイコンを変更できますか?

いいえ。iOSはプッシュ通知に常にアプリアイコンを使用します。APNsペイロードにはアイコンフィールドがありません。アイコンを変更するには、アプリアイコンアセットを更新して新しいアプリバージョンをリリースする必要があります。メッセージングおよび通話アプリは、コミュニケーション通知を採用することでのみ送信者のアバターを表示できます。

Webプッシュアイコンはどのくらいのサイズにすべきですか?

256×256ピクセルの正方形のPNG、JPG、またはアニメーションなしのGIFを使用してください。ブラウザやオペレーティングシステムによってアイコンのトリミングやスケーリングが異なる場合がありますが、256×256はChrome、Firefox、Edge、Safari全体で最も一貫性のあるサイズです。

Androidの小さなアイコンにURLを使用できますか?

いいえ。Androidの小さなアイコンは、アプリにバンドルされたローカルリソースファイルである必要があります。リモートURLをサポートするのは大きなアイコンのみです。

Expoで通知アイコンを追加するにはどうすればよいですか?

onesignal-expo-pluginを使用して、96×96の小さなアイコンPNGと256×256の大きなアイコンPNGをapp.jsonまたはapp.config.jsで指定します。プラグインはビルド時に密度バリアントを生成します。設定については、Expoタブを参照してください。

デフォルトアイコンをOneSignalダッシュボードにアップロードしますか?

いいえ。デフォルトの通知アイコンはOneSignalにアップロードするのではなく、アプリバイナリ内にバンドルされています。プロジェクトのリソースディレクトリ(またはExpoの場合はプラグイン設定)に追加すると、OneSignal SDKが自動的に使用します。OneSignalダッシュボードでは、AndroidおよびWebプッシュのメッセージごとにアイコンを上書きすることのみ可能です。

関連ページ

画像とリッチメディア

プッシュ通知に大きな画像、GIF、動画を添付します。

Android SDKセットアップ

Android SDKをインストールし、drawableフォルダーにデフォルトの通知アイコンを追加します。

React Native / Expo SDKセットアップ

OneSignal ExpoプラグインでsmallIconslargeIconsを設定します。

Android通知カテゴリ

サウンド、バイブレーション、重要度のためのAndroid通知チャンネルを作成・管理します。

Web SDKセットアップ

Settings > Push & In-App > WebでDefault Icon URLを設定します。

メッセージ作成API

REST APIを使用してカスタムアイコン付きのプッシュ通知を送信します。