ブラウザのサイトアドレスの前にロゴのような表示があるのを見たことはありませんか？
このアイコンはホームページのシンボルとして使われているもので「ファビコン（favicon）」といいます。ファビコンはつけなくてはならないというわけではありませんが、あった方がサイトを覚えやすいです。
そのためファビコンは、クリック率を高めるのに効果的と言われています。
もちろん、賢威テンプレートにもファビコンのファイルが設置されています。賢威では、サイトアイコン（.pngファイル）を設置する方法とfavicon（.icoファイル）をサーバーにアップロードする方法でファビコンを表示させることができます。
サイトアイコンを設置した場合は、faviconのファイルは非表示になるように設定されているので、どちらかの方法でファビコンを変更してみて下さい。
当記事では、賢威テンプレートにファビコンを設置する手順についてご紹介します。
このページの目次
サイトアイコンを設置する
まずはファビコン用に512×512ピクセルのファイルを用意して下さい。次にWordPress管理画面の「外観」から「カスタマイズ」をクリックします。
「サイト基本情報」をクリックします。
「画像を選択」をクリックします。
ファビコンにするための画像をアップロードします。表示速度を落とさないために、画像は圧縮して下さい。
「公開」をクリックします。
これでサイトアイコンの設置は完了です。
ファビコンサイトの紹介
では、faviconをサーバーにアップロードして設置する手順を説明します。
まずはfaviconを準備します。Photoshopなどのソフトで作るといいのですが、デザインなどを決めるのが苦手な方には、ファビコンの素材サイトがおすすめです。
フリーでダウンロードできるサイトがあるのでご紹介します。
Favicon Generator
Favicon Generatorは、ファビコン作成機能がついたファビコンギャラリーサイトです。
ここでは（PNG・JPG・GIF）の画像をアップロードして「ICO」の形式に変更することができます。また、キーワードとアルファベット、カラーを選ぶとそれにマッチしたファビコンが表示されるようになっています。
それぞれのアイコンの上部には「ダウンロード」のボタンがあるのでクリックします。
「Favicon Generator」のアイコンはファイルサイズが小さいものが数多く揃っていますから、表示速度に影響が出にくいのではないかと思います。
freefavicon
ユニークでかっこいいファビコンをお探しの方にはhttps://www.freefavicon.com/がおすすめです。
ジャンル別に見ることができるので、イメージにマッチするファビコンを探しやすいです。
好きなファビコンが見つかったら、zipファイルをダウンロードして下さい。
freefavicon.comからZipファイルをダウンロードすると、ファビコン用のファイル「.ico」のほかに大きさの異なる「.png」ファイルが入っています。そのためサイズのことなるファビコンをつくるときは便利です。
「.ico」のファイルはFTPソフトでサーバーにアップロードします。FTPソフトはサイトを運営する上で必ず必要になってきます。ですので、使用されたことのない方は、ぜひインストールしてみてください。
おすすめのFTPソフトは、無料で使えるFileZillaです。ダウンロードのしかたと使い方をご紹介します。
FileZillaのダウンロード方法と使い方を見る（MACも対応）
FTPソフトでサーバーにアクセスしたら、下の順序で進んで下さい。
「サイト名」→「public_html」→「wp-content」→「themes」→「賢威テンプレート」
/buzzclub.site/public_html/wp-content/themes/keni71_wp_standard_blue_201804182241
すると、画面右下に「favicon.ico」というファイルがあります。このファイルの上にダウンロードした「favicon.ico」を上書きします。（※ファイル名が同じになっているか注意しましょう。）
これでファビコンの設定は完了です。上手く反映されないときはキャッシュを削除してみて下さい。
ファビコンを作る
Photoshopなどのソフトを使えば、オリジナルのファビコンを作ることができます。そこで「Adope Photoshop Elements」を使ってファビコンをつくる手順を説明します。
まずは「Adope Photoshop Elements Editor」を開き「ファイル」から「新規」→「白紙ファイル」をクリックします。
「ファイル名」を「favicon」にして幅と高さを「32×32」と入力します。「カンバスカラー」が「透明」になっていることを確認してから「OK」をクリックします。
「ズームイン」でレイヤーのサイズを大きくすると作業がしやすいです。
ここでは丸いサイトアイコンを作成します。画面の左側にある「楕円形選択ツール」をクリックします。この表示が「長方形選択ツール」になっていることもあります。そのときはクリックして画面下で楕円形を選択してください。
楕円形の表示になったら、表示されている四角形の角から反対側の角へ直線を引くようにカーソルを動かします。すると画像では見えにくいですが、円が描かれます。
画面上部の「レイヤー」から「新規」→「レイヤー…」をクリックします。
「レイヤー2」が表示されるので「ok」をクリックします。
「レイヤー2」が選択されていることを確認してから「編集」をクリックして「選択範囲の境界線を描く…」をクリックします。
円の幅と色を決めます。ここはお好みで決めて下さい。最後に「OK」をクリックします。
円が表示されたら「選択範囲」から「選択の解除」をクリックします。
するとブルーの枠が出来上がっています。
先ほどと同じように「レイヤー」をクリックしてから「新規」→「レイヤー…」をクリックします。
「レイヤーの3」が表示されたら「Ok」をクリックします。
「レイヤーの3」が選択されていることを確認して画面左の「T」をクリックします。
スタイル、サイズ、カラーを選択したら文字を入力します。
「表示レイヤーを統合」をクリックします。
レイヤーが統合されたら「ファイル」をクリックして「Web用に保存…」をクリックします。
「保存」をクリックします。
名前を確認して「保存」をクリックします。
これでファビコン用の画像の完成です。
画像ファイルをファビコンに変換する
つぎに「.png」ファイルを「.ico」に変換していきましょう。「convertio.co」というオンラインのツールは操作が簡単ですが、アイコンのサイズを指定するなら、「www.aconvert.com」が便利です。
そこで、www.aconvert.comの使い方を説明します。
「ファイルを選択」をクリックしてファビコンにする画像をアップロードします。標準のサイズは「32×32」ピクセルです。賢威のファビコンはこのサイズになっていますから、このままにして「今すぐ変換」をクリックします。
すると「変換結果」が表示されますので「出力ファイル」をクリックします。
表示されたファビコンをダウンロードして保存します。
出来上がったファビコンはFTPソフトでアップロードしていきましょう。
（※FTPでファビコンをアップロードした場合でも、新しいファビコンが表示されるようになるまで3日くらいかかることもあるようです。賢威テンプレートなら、これだけの設定で必ず表示されるようになるので、気長に待ってみて下さい。）
