By U Zensen.

欲しいものはプログラミングで自分で作る。

以外と簡単!?ファビコンを設置する方法!!

2016 / 6 / 2 2016 / 8 / 7
雑記
ファビコンを設置しよう

はじめに!!

お疲れ様です。ぴーすけです。

WEBサイトを開いているとタブの横に画像が表示されると思います。これを「ファビコン」と言います。

今回はそんなファビコンの設定方法をご紹介します。

スポンサードリンク

ファビコンの画像の作り方!!

ファビコンを作成するにはこちらのサイトが簡単でおすすめです。

ファビコンは拡張子が「ico」の画像ファイルを作成する必要があります。それをやってくれるのが上記のサイトになります。

まずはファビコンに表示させたいデザインをした画像(png)を作成します。この時の画像はそこまで小さくなくて大丈夫です。私の場合は300x300位の画像を用意しました。

その後、先ほどのサイトにアップロードしてfavicon.icoを作成を押します。

画像をアップロード

その後、表示された画面でダウンロードを押すことで「favicon.ico」がダウンロードできます。

icoをダウンロード

ダウンロードした画像にノイズがなくちゃんとできていたら成功ですが、元画像の解像度が高すぎたり、低すぎたりするとうまく変換できていないことがあるので、その際変換前の画像の大きさや解像度を調整してみてください。

ファビコンの設定方法!!

ファビコンを設定するためには、ファビコン用の画像を用意して内に以下の記述をします。

html

<head> <link rel="shortcut icon" href="ファビコン用の画像のパス"> </head> //私の場合は以下 <head> <link rel="shortcut icon" href="http://byuzensen.link/wp-content/themes/ByUZensen/images/icon/favicon.ico" > </head>

まとめ!!

これを設定するだけで、ファビコンに画像が表示されます。

ファビコンがあるだけでタブの中やお気に入りの中からそのサイトが探しやすくなるので、絶対に設定したほうがいいですよ。

Pocket

コメント

コメントを残す