昨日は、次のように Visual Studio Code でサイト更新できるように設定しました。
今回は、ロゴの更新とfaviconの追加を行います。
ロゴの更新
あまりこだわるつもりはなかったのでタイポグラフィで行くことにしました。
次のサイトが具合が良かったです。フォントもいくつか選べます。store.jpが提供している無料サービスになります。
https://logo-maker.stores.jp/workspace/logo-maker.stores.jp
faviconの追加
ロゴを作ったときに、同じフォントで透過pngを1文字ずつ作りました。
それを3Dペイントで合成し、faviconにしました。
Windows10標準のペイントは透過pngに非対応だったので、3Dペイントを使っています。
3DペイントはWindows10に同梱されていた気がするのですが、入っていなかったのでMicrosoft Storeから入手しました。無料です。
faviconはブラウザや表示環境によってサイズや形式の種類が多く、嫌なものです。。。
次のサイトでオンライン無料サービスでいいものがあるか学びました。
kubogen.com
sdesignlabo.com
両方のサイトで紹介されている「Favicon Generator. For real.」を利用しました。
ある程度の種類を一発で作成できるところが気に入りました。
realfavicongenerator.net
少し手こずったのが、デフォルトブラウザにしているChromium版 Edgeでファビコンを表示させるところです。
結論からすると、下記のようにすることで表示できました。1行目ではChromium版 Edgeでfaviconを表示できませんでした。(IE11とChromeは1行目で表示できました。)
<link rel="shortcut icon" href="favicon/favicon.ico"><!-- for IE11, Chrome --> <link rel="icon" href="favicon/favicon-32x32.png"><!-- for Edge(Chromium) -->
