Vuepress に favicon を設定
favicon 設定
このブログに favicon 設定していなかったので、 非デザイナーのためのいい感じの favicon 作成術 - Qiita を参考に設定してみました。
デザインを作成
グラフィックデザインを無料で簡単作成 でデザインを作成しました。
こんな感じになりました。
作った画像を丸く切り抜く
画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNS のプロフィール写真などにどうぞ。
次にこちらで、丸く切り抜きました。
ファビコンの作成
ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます
最後にこちらで、favicon.png -> favicon.ico に変更。
VuePress の設定
ico ファイルを置く
src/.vuepress/public/favicon.ico に ico ファイルを置く。
config.js を変更
src/.vuepress/config.js
module.exports = {
head: [["link", { rel: "icon", href: "/favicon.ico" }]]
};
設定後
設定するだけで、ちゃんとしたブログに見えるので、早く設定しておけばよかった・・・
