【マークアップ】ファビコンしようぜ！

こんばんは、ニラです。

マルチタスクしすぎた男の末路

いきなりですが、皆さん。今、ブラウザのタブはどのくらい開いていますか？自分がやらなきゃいけないことが多いほど、開くタブが多くなりがちだと思います。(ど偏見)

多すぎてタブが下の画像のようになってませんか？

この画像は、わざとやっていますが、実際に僕もこのくらいの数のタブを開いたことあります。

こうなってくると、自分が今どのタブを開いているかは、ギリギリわかると思います。でも、他のタブに移動するときに、全部デフォルトのファビコンだと、すごく混乱すると思います。

せめて自分で作ったサイトは、ファビコンの差別化をしたいものです。

ファビコンってなんでしょう？家庭用ゲームみたいな名前してますよね。

これですこれです。ファビコンって言ったら基本これのことを指します。今回はこのファビコンの変え方について説明したいと思います。

ファビコンを変更してみましょう！

自分が作ったHTMLには、head要素があるはずです。その中に、

See the Pen Untitled by horii kouta (@nira12) on CodePen.

こう書いてみましょう。hrefの中には、設定したい画像を書きましょう。

これで、ファビコンは変更できると思います。簡単ですね。しかし、現実はそう甘くありません。

ファビコンを設定してみたものの、下の画像のようになってませんか？

わかりにくいですが、用意した画像が無理やり縦に引き伸ばされています。比較対象がなかったら、僕も気づかないかもしれませんね。

そんな時は、こちらへアクセスしてみてください。

用意したpng画像をアップロードしたら、拡張子が「.ico」に変更されたものがサイト内に作成されます。その画像をダウンロードしましょう。

ダウンロードしたico画像を、さっき書いたlink要素に書き換えてください。そうすれば、理想のファビコンができ上がると思います。

ファビコンを設定すると、「自分のサイト」感が倍増しますよね！

みんなも、自分だけのファビコンを作って設定してみましょう。

❤︎

2022/09/09

nira-012.mahora94

◀︎

next...

prev...

▶︎

Artist

nira-012.mahora94

よろしくお願いします