X で光るアイコンを、
作ってみた

光るアイコンの正体

最近のスマホやノートパソコンの画面は、普段の「白」より、もっと明るく光る力を持っています。

普通の画像は、白（だいたい 203 ニト）が上限らしいです。ニトって何。。

HDR の画像は、「ここは白の何倍も明るく」と指定できます。

光るアイコンは、背景を白の何倍もの明るさに指定した PNG です。

ファイルの中に「この画像は HDR です」という印が入っていて、対応した画面だけが、その明るさで表示します。

• 色の決まり：BT.2020（HDR 用の広い色）
• 明るさの決まり：PQ（1万ニトまで表せる、HDR 用の明るさの決まり）
• 印の入れ方：PNG の cICP（「BT.2020・PQ」を数字で書く）と iCCP（色の情報のファイル）

自分の画面で試す

このページにも、光る画像を置きました。

今は、どれも普通の白に見えるはずです。

「光らせる」を押して、左の「普通の白」より明るくなったら、その画面は HDR で光っています。

※ スクリーンショットには写りません。光っている部分は、普通の白に切りつめて保存されます。

※ 外付けのモニターなど、HDR に対応していない画面では、どれも普通の白と同じに見えます。

作ってみた

きっかけは、X で見かけたこの投稿です。

「X で一部の人のアイコンや動画が、照明をつけたように明るいのは、HDR だった」という内容です。

この投稿が引用している EianLu さんの投稿では、作り方を AI に渡すプロンプトの形で公開していました。

手順はこうです。

1. 背景を切り抜く。髪の毛のふちも、背景との混ざり具合から透明度を計算する。
2. 背景を白の 10 倍の明るさにする。人物は 1.5〜2 倍くらいに抑える。全体に同じ倍率は掛けない。
3. 400×400 に縮めて、256 色にする。
4. HDR の印を付ける。cICP と iCCP を入れる。

背景の色は、水色・黄色・緑がおすすめだそうです。

赤・ピンク・紫・青・オレンジは、明るさが足りなくなるとのこと。

人の目は緑を明るく感じるので、緑を含む色ほど、明るさをかせぎやすいんです。

名刺に使っている自分のイラストで、この手順どおりに作りました。

なのに、光らない

X に上げてみると、まったく光りません。

正直に書くと、ここでかなりハマりました。

そこで、すでに光っている人のアイコンと、自分のアイコンを、X が配っているファイルのまま見比べました。

光っている人	PNG のまま。HDR の色の情報（iCCP）も残っている
光っていない人 （調べた1件）	JPEG に変換されていて、色の情報は普通の sRGB

光っている人の PNG には、共通点がありました。

丸く切り抜かれて見えない四隅が、透明になっていたんです。

自分のアイコンの四隅を透明にして上げ直したら、ちゃんと光りました。

• 透明な部分がない PNG は、JPEG に変換されるようですJPEG になると、HDR の情報は消えます。どれだけ明るく作っても、普通の画像に戻ります。
• cICP は消されて、iCCP は残るX が配っているファイルを見ると、「HDR です」の数字の印（cICP）は消えていました。色の情報のファイル（iCCP）は残るので、こちらが欠かせません。

※ 2026年11月に、自分で上げて確かめた結果です。X が仕組みを公開しているわけではないので、「ようです」としています。

どこで光るのか

光るアイコンは、どこでも光るわけではありません。

自分の環境で確かめた結果です。

iPhone の X アプリ	光る。ただ、画像によっては、HDR の動画が画面に出てから光り出すこともあった
iPhone の Safari・Chrome（x.com）	光らなかった
Mac の Chrome（x.com）	光らなかった。スクロールすると、画面がチカチカすることがあった
Mac の Chrome（画像のファイルを直接開く）	光る（MacBook Pro の画面）
外付けのモニター	光らない（HDR に対応していない画面）

同じファイルでも、見るアプリと画面で、光ったり光らなかったりします。

何が言いたいかというと、光るかどうかは、ファイルだけでは決まらないということです。

見る画面、見るアプリ、そして X の処理。この3つがそろったときだけ光ります。

やるなら、気をつけたいこと

• とにかく、まぶしい白の 10 倍は、本当にまぶしいです。しばらく見ていると、ちいちゃんのかげおくりのように、目に残ります。見る人の目にやさしいとは言えません。
• 上げ方が決まっているパソコンのブラウザで x.com から上げます。スマホのアプリから上げると、HDR の情報が消えるそうです。上げるときに、拡大や位置の調整もしません。
• アイコンを変えると、審査が入ることがある認証済み（青いチェック）のアカウントは、アイコンを変えると一時的にチェックが外れて、再審査になることがあるそうです。
• いつまで光るか分からないX が正式に用意した機能ではありません。X の処理が変われば、すぐに光らなくなるかもしれません。

作るなら

自分で作らなくても、無料で作れるサイトがあります。

xhdr.app は、画像をブラウザの中だけで変換すると書かれていて、四隅の透明も最初から入っています（英語のサイトです）。

自分で作るなら、押さえるのは3つです。

1. 400×400、256 色の PNG にする。
2. HDR の印を入れる。cICP と、BT.2020・PQ の iCCP。
3. 丸の外の四隅を透明にする。これがないと、JPEG に変換されます。

目立ちたいときの小技としては、面白いです。

ただ、まぶしさだけは、ほどほどに。

使った技術

画像を作る	Python（Pillow・numpy）PNG を1つずつ組み立て（cICP・iCCP・PLTE・tRNS）256 色への減色と Floyd-Steinberg の誤差拡散
色と明るさ	BT.2020PQ（SMPTE ST 2084）1倍 = 203 ニト（ITU-R BT.2408）ICC プロファイル v4.4（cicp タグ入り）も自作
デモ	HTML・CSS（dynamic-range: high で画面を判定）JavaScript（押したときだけ画像を読み込む）