デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

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 で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン