ソフトエンジニアのブログ、制作ノウハウ等を配信

WordPress ファビコンを追加

色々なサイトをPCで見ていると、
ブラウザタブの左端にアイコンマークがついています。
(このアイコンは、Favicon(ファビコン)というみたいです。)
ファビコン2
今回は、ファビコンの追加にチャレンジです。

スポンサーリンク

ファビコンの画像ファイル作成

まずは、ファビコンの画像を用意します。
私は、以下のような正方形のjpegファイルを用意しました。
favicon

次に、以下のサイトから用意したファイルをファビコン用ファイル(.ico)に変換します。
FavIcon from Pics

選択をクリックして、用意したjpegファイルを開きます。
次にGenerate FaIcon.icoをクリックします。(以下図)
ファビコン3

ファビコンファイルが出来たら、以下のような画面になります。
Download FavIcon Packageをクリックしてダウンロードします。
ファビコン4

ファビコンファイルのアップロード

ダウンロードしたら、zipファイルを解凍します。
解凍したら、中に.icoファイルが入っています。
これをwordpressをインストールしているサーバーへアップロードします。
私は、自分が使っているテーマファイルのフォルダにアップしました。
ファビコン6

header.phpの編集

ファイルをアップロードしたら、
wordpress管理画面の[外観]⇒[テーマ編集]をクリックして、
header.phpを編集します。

headタグ内の最後に、
以下を追加します。
<link rel=”SHORTCUT ICON” href=“ファビコンファイルが置いてあるパス/ファビコン名.ico” />
ファビコン5

私は、自分のテーマフォルダの中にファビコンファイルをアップしたので、
get_template_directory_uri()を使って
テーマフォルダのパスを取得しています。

編集したら、ファイルを更新をクリックして、ページを確認してみます。
以下のように、ファビコンが表示されました。
ファビコン1

まとめ

以上、WordPressのサイトにファビコンを追加する方法でした。
参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン