神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【Web制作】サイトでファビコンを設定するには?

2016.09.17
Web制作

 ファビコンというのは、パソコンでサイトを閲覧した時に、Webブラウザに出るマークのことです。
ちょうど↓のような感じ。
faviconこのファビコン、デフォルトでは何も表示されないのですが、サイトを制作する以上なにかしらあった方が
ちゃんと作られている感
がでます。w

作らないより作った方が完成度が高くなるなら、作っておいた方がいいよね?って感じでしょうか。
僕自身、いろんなサイトをパソコンで閲覧した時、ファビコンが設定されていないサイトを見つけると、ちょっとそれだけでマイナスに思えてしまったりします。

ってことで、今回はファビコンの設定方法についてご紹介したいと思います!

1. ファビコン用の画像を作成する

 まず初めに、ファビコン用の画像を画像作成ソフトで作成しましょう。
(ファイルの保存形式はJPGでもPNGでもOK)

画像の大きさは
32px × 32px
ぐらいがちょうどいいかと思います。

2. ファビコン用画像をサーバーにアップして、サイトのソースにコードを記述する

 ファビコン用画像ができたら、ご自身のサイトがアップされているサーバーにアップしましょう。

ファビコン用画像のアップが完了しましたら、ご自身のサイトの<head>~</head>内に以下のコードを記述します。

<link rel="shortcut icon" href="ファビコン用画像をアップしたところのURL">

上のコードを記述することで、ファビコンが表示されるようになります(^-^)

まとめ

 ファビコンは実際に表示するとなるとかなり小さく表示されるので、小さく表示されてもわかるようなデザインにする必要があります。
自分のサイトの特徴を入れつつ、小さく表示されてもわかるようなデザインにして、それをファビコンとして表示する…という流れで作業をされると良いかと思います(^^)

スポンサーリンク
検 索