faviconをデフォルトから変更しました。
favicon（ファビコン）とは
faviconとは、webブラウザのタブやiPhoneのホーム画面などに表示される、
サイトアイコンのことです。
デフォルトのままだと、Vueアイコンとなりダサいので、設定しました。
faviconの変更方法
/public/favicon.ico を好きなアイコンに置き換える。だけです^^;
他にも方法があるみたい（アイコンのパスを指定したり）ですが、
個人ブログを運営するぶんには、上記の方法で特に問題は感じていません。
動的にfaviconを変更したいときには他の方法を検討する必要があるかと思います。
Vue.jsでFaviconを動的に変更する
zenn.dev
追記
「public/img/icons」フォルダがある場合、上記の変更方法を実施しても
faviconが反映されないそうです。
調べたところ、「public/img/icons」フォルダを消すのが手っ取り早い解決方法のようです。
下記サイト等を確認しました。
Vue CLI 3でfaviconが変わらないときの対処法 | IT資格マニアのエンジニア技術ブログ×英語
今回はVue CLI 3でfaviconが変わらないときの対処法についてご紹介いたします。 Vue CLI 3でfaviconが変わらないときの対処法 Vue CLI 3でfavi...
chico-shikaku.com
余談～favicon作成～
faviconはWindowsの標準アプリ「ペイント3D」を使いました。
透過にPowerPointを使いました。
PowerPointでの透過方法
PowerPointを使った画像の透過はとっても簡単&お手軽なので紹介します。
- 画像をPowerPointに貼り付け
- 画像をクリック（選択状態にする）
- 「図の形式」タブの「色」をクリック
- 「透明色を指定」をクリック
- 画像の透明にしたい箇所をクリック
最後に
ブログページはWordPressを用いているため、WPは別にfaviconの設定が必要です。
Cocoon管理者様のサイトを参考に、WPのfaviconを設定しました。
サイトアイコンを設定する方法（ファビコン、アップルタッチアイコン等の設定）
テーマ用のファビコン、アップルタッチアイコン、マイクロソフトメトロスタイルの、タイル表示に使用するアイコンの設定です。
wp-cocoon.com
こちらも、とても簡単に設定できました！
コメント