KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

faviconとsvgと背景と

reactでfavicon.icoに任意のpngを上書きすると

ブラウザでのiconを変えられる

苦戦したのでここに記す

supported by : 電気屋の後輩のイラレマン

f:id:kei_s_lifehack:20200627155613p:plain

01 Dark Mode, glay

cons

普通に黒のアイコンにしていると,chormeのtabを 黒にしている人に何も見えない

www.apple.com

Appleの灰色にしてみたが,whiteでくっきりしない

try

もっと黒くしてみよう!!

02 darker glay

100ほど黒くしてもらった.

f:id:kei_s_lifehack:20200627155929p:plain

f:id:kei_s_lifehack:20200627155939p:plain

cons

それでも白背景で見やすくない!

try

ではビジネスカラーの青を混ぜてみよう!

03 add blue

cons

WindowsのThemeが青の時に見づらい....

try

背景白にする

04 bg-white

白背景を入れてもらった

f:id:kei_s_lifehack:20200627160857p:plain

google document の色だよ

cons

ちょっとダサくなった?

try

f:id:kei_s_lifehack:20200627161205p:plain

f:id:kei_s_lifehack:20200627161227p:plain

qiitaのように,logo自体を透過にしてみる

05 transplante logo bg-blue

cons

くらい Windows Themeが青の時に無になる

( ˙-˙ )

f:id:kei_s_lifehack:20200627163656p:plain

06 bg-lightblue-color-white

f:id:kei_s_lifehack:20200627164548p:plain

これはロゴと背景の境界が曖昧になる

05で決定した.

conclude

f:id:kei_s_lifehack:20200627165100p:plain

f:id:kei_s_lifehack:20200627165219p:plain

f:id:kei_s_lifehack:20200627165953p:plain

青テーマは,chromeのsetting, history すら対応してないから諦めます

番外編 IEとedge

Edgeでは透過のファヴィコンは読まれません

今回は対応をしません

https://minosystem.jp/works/edge%E3%81%A7%E3%83%95%E3%82%A1%E3%83%93%E3%82%B3%E3%83%B3%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E4%B8%8D%E5%85%B7%E5%90%88%E3%81%AE%E4%BF%AE%E6%AD%A3/