コーディングの勉強

【ファビコンの設定方法】Webサイトのタブに独自の画像(アイコン)を設定しよう

こんにちは、mito(@mito_works)です。

今回はファビコン(favicon)の設定方法についてです。

mito
mito
ファビコン(favicon)と言われてもなんだそれ?という感じではないですか?私も”ファビコン”という名称を知らずどうやって検索したら良いのか悩んだ過去があります。
momo
momo
ファビコン(favicon)は、Webサイトをブラウザで開いた際のタブ部分の左に表示されるアイコンのことだよ!

それではいってみましょう〜!

タブに表示される画像(アイコン)とは何か?

Webサイトのタブに表示される小さな画像のこと。

chromeで表示した場合は、以下の画像のように表示されます。

momo
momo
小さいけれど存在感がある、サイトのトレードマークだね!

設定されているかいないかでサイトのイメージも変わります。

mito
mito
設定していると、タブだけでサイトを認識(判別)してもらえるのでユーザーにも優しい作りだと思います
momo
momo
目印になって分かりやすいね!

前提条件の確認

今回は、PCのWebブラウザ(chrome)で表示されるように作成していきます。

mito
mito
今回はこちらのサイトを具体例に作成していきます。

宮ノ杜健康院

画像の作成方法

元画像の作成

illustoratorを使い、作成していきます。(photoshopでもOKです)

https://realfavicongenerator.net/

サイズについては、以下ファビコンジェネレーターで260px×260pxを推奨しているのでそのサイズで作成していきます。

ファビコンは一番小さいもので16px × 16pxのサイズです。

そのため、複雑なデザインや色を避けてシンプルな線や色で作成する方が良いです。

一般的にはロゴマークを使用したり、コーポレートカラーを取り入れることが多いです。

mito
mito
今回はこちらの整体院のロゴマークでファビコンを作成していきます。

最後はpngで書き出します。

 

設定方法

htmlのheadタグのなかにコードを追加

pngのデータを使うので以下のようなコードをheadタグの中に追加します。

   <link rel="shortcut icon" type="image/png" href="images/fav-logo.png"/>

 

mito
mito
今回、画像はimagesフォルダに配置しました。

確認方法

まず、ローカル環境できちんと表示されるか確認します。

momo
momo
確認後、サーバーにアップするよ!

まとめ

表示自体はとても小さな画像ですが、設定するしないでサイトの印象が変わります。

mito
mito
表示面積が小さいので目立ちやすい色や太い線を使うことをオススメします!
【twitterカードの設定方法】twitterでOGPを設定してサイトやブログを見栄えよくシェアしよう! twitterでブログやサイトをシェアする際にURLではなく画像が埋め込まれると思います。 今回は...
ABOUT ME
mito
こんにちは!mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。