WordPressのテーマTwenty Fourteenでファビコン favicon.icoを設定する方法

WordPressのテーマTwenty Fourteenで、ファビコン (favicon.ico) を設定してみました。

ファビコンについては、以下をご覧ください。

WordPressにFavicon.icoをアップロード出来ない Sorry, this file type is not permitted for security reasons.

このたび、WordPressにFavicon.icoをアップロードしようとすると Sorry, this file type is not permitted for security reasons. というエラーが表示されてし...

ファビコン Favicon.ico の作成と設定
WordPressのおすすめ本

ファビコン Favicon.ico の作成と設定

まず、favicon.icoのファイルを作成します。

ico形式はビットマップ形式と同じなので、私の場合、48x48ピクセルのビットマップを作成し、拡張子をicoに変更しました。

作成したfavico.icoをWordPressをインストールしているサーバーのスタイルシートが保存しているディレクトリにコピーします。

私の場合、スタイルシートは以下のフォルダにあります。

/var/www/wordpress/wp-content/themes/twentyfourteen

次に、header.phpに以下の行を追加します。

挿入する位置はheadタグの中です。

<head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width">
        <title><?php wp_title( '|', true, 'right' ); ?></title>
        <link href="http://gmpg.org/xfn/11">
        <link href="<?php bloginfo( 'pingback_url' ); ?>">
        <link href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
        <!--[if lt IE 9]>
        <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
        <![endif]-->
        <?php wp_head(); ?>
</head>

<head>

<!--[if lt IE 9]>

<![endif]-->

<?php wp_head(); ?>

</head>

設定が完了後に、ブラウザをリロードしてみると、ブラウザのタイトルタブの左側に作成したfavicon.icoが設定されていることがわかります。

※ WordPress 4.4から、管理画面にサイトアイコンという項目が追加されました。サイトアイコンからファビコンを追加することが出来ます。

WordPressのおすすめ本

↓WordPressのおすすめ本はコチラ

WordPressのおすすめ本