サイトアイコンを設定したいけど、やり方が分からない・・・。ダサいから変えたい！
こんな方向けの記事になります。
サイトアイコンがデフォルトのままの方は、ブランディング的にあまりよくないですし、ダサいのでサクッと設定していきましょう。WordPressを使用している方は簡単に設定する事ができます。
現在、ご自身のサイトにアイコンが設定されていないという方は参考にどうぞ。
WordPressにファビコンを設定する方法【プラグイン不要】
方法２通りあります。
- 方法①：ファビコンを管理画面から設定する方法
- 方法②：直接コードを書いてファビコンを設定する方法
管理画面から設定するのが比較的簡単です。
順番に解説していきます。
まずはファビコン画像を作成する
ファビコンを設定するには拡張子が「.ico」の画像が必要になります。
「.ico」とはサイトアイコンに最適化された拡張子です。ico画像は下記のサイトで簡単に変換できますので、変換後にWordPressのメディアにアップロードしておきましょう。
方法①：ファビコンを管理画面から設定する方法
管理画面から設定していきます。
手順は下記です。
- 手順①：【外観】→【カスタマイズ】を開く
- 手順②：【サイト基本情報】を開く
- 手順③：【サイトアイコン】に画像をアップロード
順番に解説していきます。
【外観】→【カスタマイズ】を開く
WordPressの管理画面を開いて、サイドメニューから【外観】→【カスタマイズ】を開きましょう。
【サイト基本情報】を開く
カスタマイズ画面が開ましたら、【サイト基本情報】という項目を開きましょう。
【サイトアイコン】に画像をアップロード
サイト基本情報を開いたら、下の方に【サイトアイコン】という項目があると思いますので、そちらに先ほど作成したico画像を選択します。
以上でファビコンの設定は完了です。
管理画面にサイトアイコンの設定項目がないという方は次に解説する、直接コードを書く方法でやる必要があります。
方法②：直接コードを書いてファビコンを設定する方法
直接コードを書く場合も、コピペするだけなので初心者の方でも問題なく設定する事ができます。
headタグに下記のコードを追加
HTML<link rel="icon" href="画像のパス" sizes="32x32" /> <link rel="icon" href="画像のパス" sizes="192x192" /> <link rel="apple-touch-icon" href="画像のパス" /> <meta name="msapplication-TileImage" content="画像のパス" />
こちらのコードの画像パスをご自身のファビコンのパスに変更してheadタグ内にコピペすだるだけです。WordPress以外のサイトでも使用できます。
管理画面から操作する場合は、【外観】→【テーマエディタ】からソースコードを編集する事ができます。プログラミング知識がある方は、FTPなどでアップロードすれば問題なしです。
WordPressのバージョンによっては、管理画面からファビコンを設定できない場合がありますので、そういう時はこのように直接コードを書いて表示させる事ができますよ。
それではまた。