t11hi

hene

Vuepress に favicon を設定

favicon 設定

このブログに favicon 設定していなかったので、 非デザイナーのためのいい感じの favicon 作成術 - Qiita を参考に設定してみました!

デザインを作成

グラフィックデザインを無料で簡単作成 でデザインを作成しました。

デザイン

こんな感じです。

できたやつ

作った画像を丸く切り抜く

画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNS のプロフィール写真などにどうぞ。

次にこちらで、丸く切り抜きました。

丸く切り取ったやつ

ファビコンの作成

ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます

最後にこちらで、favicon.png -> favicon.ico にしました。

VuePress の設定

ico ファイルを置く

src/.vuepress/public/favicon.icoico ファイルを置く。

config.js を変更

src/.vuepress/config.js

module.exports = {
  head: [["link", { rel: "icon", href: "/favicon.ico" }]]
};

設定後

設定するだけで、ちゃんとしたブログに見えるので、早く設定しておけばよかった・・・

After

参考