[HTML]サイトアイコン(ファビコン)を設定します

 ウェブサイト毎に独自のアイコンが設定されているサイトを目にしますが、ワードプレスのアイコンをそのまま使っているサイトも見かけます
 このアイコンを変更してみましょう

画像

 サイズが異なる画像(シンボル)がいくつか必要になります

favicon.ico(ふぁびこん)

 縦横ともに48ピクセルの画像で用意します
 ファイルをFTPでサイトのルートフォルダに保存します
例:www.commuply.co.jp/favicon.ico

apple-touch-icon.png

 縦横ともに180ピクセルの画像で用意します
 ファイルをFTPでサイトのルートフォルダに保存します
例:www.commuply.co.jp/apple-touch-icon.png

サイトアイコン

 縦横ともに150ピクセル以上のアイコンを用意しましょう
 検索エンジンは48ピクセルの倍数がよいそうなので、48ピクセルの4倍にあたる192ピクセルにします

HTMLファイルのばあい

HTMLの<head>の中に次の行を書きます。

<link rel="icon" href="/favicon.ico.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

WordPress(ワードプレス)のばあい

 [メディア]に192ピクセルの画像を登録します

 192ピクセルの画像を、[外観]からテーマの[サイトアイコン]を設定します。テーマ毎に具体的な設定場所が異なります

 [Ogp Plus]プラグインを登録して、デフォルトOGP画像に192ピクセルの画像を登録します

 [Head & Footer Code]プラグインを登録して、[HEAD Code]欄に次のコードを登録します

<link rel="icon" href="/favicon.ico.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

BaserCSM(ベーサーシーエムエス)のばあい

サイトのフォルダ/app/webroot/favicon.icoを更新します。