faviconとは、タブに現れるサイトの小さいアイコンのこと。
小っちゃくても、その存在は大きいです。
Webサイトを作ったら、顔とも言えるfaviconをぜひ設定しましょう！
今回は、Photoshopを使ったICOファイル作成から、実際にWebサイトのfaviconに設定する手順を詳しく見ていきます。
【目次】
1. Photoshopでfavicon画像を作成する
2. Webページのfaviconに設定する
・ HTMLに直接記述して設定する方法
—- faviconファイルをルートディレクトリに保存
—- HTMLコードのheadタグ内に文章を書く
・ WordPressで設定する方法
—- 【番外編】Wordpressテーマ「THE THOR」を使用している場合
1. Photoshopでfavicon画像を作成する
前回の記事で、PhotoshopでICOファイルを作れるようにする方法を紹介しました。
(adsbygoogle = window.adsbygoogle || []).push({}); ドットインストールで動画を見ながら、HTMLを勉強中。 やっぱり動画で見ると、分かりやすいですね！ ドッ[…]
ICOというファイル形式は設定できるようになったのですが、
こちらの記事では、はじめから16ピクセル×16ピクセルにしていたため、
ドットが大きすぎて綺麗な絵が描けないという問題が発生。
この問題を解決するため、
最初はキャンバスをテキトーな正方形に設定 → 描いた後でサイズ変更
という手順にしてみました。
まずは、キャンバスを正方形にして、（今回はとりあえず1000pxに設定。）
お絵描きします。
PNGファイルも欲しい場合は、ここで一旦保存しておきましょう。
（不要と思う場合も、保存しておくと後で役立つかも！）
そして、イメージタブの「画像解像度」を選択します。
ここでサイズを変更。
16pxの正方形、解像度72px/inch、「バイキュービック法シャープ」にします。
キャンバスが小さくなりました。
あとは、ファイル形式をICOにして保存するだけ。
ファイル名は、「favicon.ico」にしておきましょう。
見た感じはガタガタに見えますが、前回よりも滑らかな線になっているはず。
Photoshopを使えば、favicon用の画像の作成も簡単ですね。
2. Webサイトのfaviconに設定する
画像ファイルができたら、いよいよ設定です。
実は、faviconに設定する方法はとっても簡単で、
HTMLコード中に「faviconを設定するための文章」を書くだけなんです。
HTMLに直接記述して設定する方法
faviconファイルをルートディレクトリに保存
結構ここが大事なのですが、まずはfavicon用画像のファイル位置を確認しておきましょう。
faviconファイルの設置場所は、サーバーのルートディレクトリです。
ファイル階層の最上位、
つまり、Webサイトを作るコードファイルindex.html等と同じ階層ってことですね。
この時、ファイル名もきちんと「favicon.ico」となっているかを確認しておきましょう。
HTMLコードのheadタグ内に文章を書く
あとはWebページのHTMLに、コードを書くだけです。
headタグ内に、
<link rel=“icon” href=“favicon画像ファイルパス”>
と記述しましょう。
「favicon画像ファイルパス」の部分は、「https://」で始まる画像URLを書けばOK。
細かく言うと、
・linkタグ：検索エンジンに関連性を教える役目
・rel (=relation) ：関係性を示す役目
・href：ファイルがある場所を示す役目
だそうです。
この辺は、また時間あるときにまとめます。
たった一行書くだけで…
設定できました！
WordPressで設定する方法
ブログなどでWordpressを使用している場合も、基本は上記の手順と一緒です。
- favicon画像は、Wordpress本体と同じ階層に設置
- ヘッダーheader.phpのタグ内に、先ほどのコードを書く
といった感じです。
また、他にもプラグインを利用する方法もあるみたいです。
【番外編】Wordpressテーマ「THE THOR」を使用している場合
私の場合、テーマ「THE THOR」を使用していたため、もっと簡単に設定できました。
まず、アイコン画像をメディアライブラリにアップロードしておきます。
次に、外観 > カスタマイズ > サイト基本情報 を選択。
その中にある「サイトアイコン」に、favicon画像を設定するだけ！
早速設定を試みましたが、問題点が2つ。
・ICOファイルが、メディアライブラリに上手くアップロードできない。（プラグインの関係かも）
・「サイトアイコンは512px × 512px以上の正方形にしてください」との注意書きあり。
これらの問題は、Photoshop作成段階でPNG形式でも保存しておくことで解決できました。
PNG形式で保存しておいて良かった！（笑）
つまり、テーマ「THE THOR」を使用している場合は、ICOファイルに変換する必要なしということですね。
すぐにfavicon設定をおすすめします！
前回に引き続き、faviconの設定についてお伝えしました。
結局、私の場合はICOファイルではなくても良かったわけですが、
知っておいて損はないと思います。
こんなに簡単なんだ…と拍子抜けするくらい簡単でしたが、
faviconを設定するだけで、ちゃんとしたWebサイト感がぐんとアップしました！
自分のWebサイトにまだ設定してないという方は、ぜひセットしてみてください。
