faviconを使う方法

faviconとは

f:id:khirok:20200209204302p:plain

ブラウザタブの左側に付いているアイコンのことです。

公式サイトにアクセスする

https://www.favicon.cc/

f:id:khirok:20200209204959p:plain

イラストを書く or 画像をアップロードする

画像をアップロードする場合

「Import Image」をクリックします。

f:id:khirok:20200209212301p:plain

ファイルを選択して、Uploadボタンを押します。

f:id:khirok:20200209212447p:plain

 すると、ファビコンのタブにリアルタイムでアイコンが表示されていることが分かります。

f:id:khirok:20200209212634p:plain

 ダウンロードする

「Download Favicon」というボタンをクリックして、ファビコンを表示させたいフォルダに配置します。

f:id:khirok:20200209213132p:plain

読み込ませる

最後に、headタグ内に以下を記述します。

<link rel="shortcut icon" href="favicon (1).ico">

すると、タブの左側にファビコンが表示されます。

f:id:khirok:20200209213932p:plain

ブックマークをファビコンのみ表示させる方法

番外編ですが、Google Chromeの場合

ブックマークを編集で

f:id:khirok:20200209215309p:plain

名前を空欄にすることで

f:id:khirok:20200209215346p:plain

このように、ファビコンだけを表示させることができます。

f:id:khirok:20200209215442p:plain

アイコンだけで分かるTwitterなどは、このようにしておくのも良いかもしれませんね!

参考にしたサイト

NAVERまとめ

https://matome.naver.jp/odai/2142613537875885101