ファビコンって何
ホームページを開いた時にファビコンを表示させたくて、jpgファイルをpngの透過ができるweb上で使えるもので準備して、表示させたら…。
なにこれ？下地がグレーじゃなくて白いじゃん？透過したはずだよね？
カッコ悪い、なんだこれは？？なんで～ ？？
ファビコンとは
検索してよく出てくるのは、透過のファイルはpngで作ればよくて～みたいなのばっかりで、なぜpngで透過してあるはずなのに、jpgで白くしてある状態のような表示になってしまうのかが分からない。
ファビコンとは下の画像で赤丸つけている小さいアイコン的なものですね。
Google Chrome のタブ
Microsoft Edge のタブ
なんども検索し直してそれらしきものを発見。
どうもMicrosoft Edgeブラウザの設定でhtmlの設定(？)がよろしくないらしい。
OSがWindows10なので、ブラウザはMicrosoft Edgeを主に使っているのですが、試しにGoogle Chromeで開いたら、ちゃんと透過なってます。
なんだよ～、なんで同じじゃないの？
そんなこと言っても表示はならないので、またまた検索して解決方法を探します。
これで表示
- 拡張子を変更する
試してみたのは拡張子を変更すること。
Windows10でファイルの拡張子が表示ならない場合は、
［ファイル名の拡張子]にチェックを入れる
拡張子の表示/非表示が切り替えできます。
Microsoft Edge で透過pngのファビコンを透過で表示させるには(○○○はファイル名が入ります)
○○○.png ⇒ ○○○.ico
- htmlファイルに追加
ホームページのindex.htmlファイルを開き<head>内に
<link rel=”icon” type=”image/vnd.microsoft.icon” href=”○○○.ico“>
一行追加します。
Microsoft Edge と Google Chrome で開くと表示OK～
あ、Google Chromeはpngファイルで表示大丈夫なんでした(汗)
Microsoft Edge使い慣れていて不便も感じていませんでしたが。
まとめ
分からないことばっかりで、ホントに少しずつですが前にすすめているかな。
