Stinger5にファビコンを設置する方法

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。本記事ではWordPressのテーマであるStinger5にファビコン(favicon)を設置する方法を説明しています。

ファビコンは「検索画面のタブ」「ブックマーク時」「ショートカット」等々に使用される、小さな画像のことを指します。

ファビコンを設置すると自分のサイトに愛着が湧きますし、訪問した人にも良い印象を与えます(なにより小さくてかわいい)。

Stinger5を使ってサイトを構築している人の参考になれば幸いです。では、さっそく作業していきましょう。

スポンサーリンク

子テーマのimagesフォルダにファビコンを設置

まず設定をおこなう前に、.icoで終わる16×16のファイルを用意しておきます。下記の参考サイトを見ながら作成してみると良いかと思います。

参考favicon.ico（ファビコン）の作り方 | IDEA*IDEA

私はStinger5の子テーマを使ってサイトを構築しているので、子テーマ内の「images」フォルダにファビコンを設置しました。FTPソフト等でアップロードしておけばOKですね。

子テーマのimagesフォルダの場所は、

(WordPressをインストールした場所)/wp-content/themes/stinger5子テーマ/images

です。

もしimagesフォルダを作成していない方は、この時点で上記と同じになるよう作成しておきましょう。

header.phpにファビコンの設定を記述

子テーマの「header.php」に設置したファビコンを反映させていきましょう。

header.php内の下記を、次のように変更します。適宜、設置するファビコンの名前に変えておいてください。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />

↓

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon.ico" />

上記の<?php bloginfo(‘stylesheet_directory’); ?>は、現在使っているテーマのディレクトリのパスを返してくれます。

今回は子テーマにfaviconファイル「favicon.ico」を配置しているので、上記のとおりの設定になりました。

ファビコンの設置を確認する

ブラウザでサイトを開いてファビコンを確認してみましょう。

無事にファビコンが設置ができました！小さくてかわいいですね。

もし反映されていない場合はブラウザの更新ボタン(F5キー)を押してみましょう。ちゃんと設置されていれば、ひょっこり表示されるはずです。

まとめ

faviconファイルさえ作ってしまえば、比較的かんたんにファビコンを設置することができました。

↓iPhone用アイコンの設置方法も記事にしています。この機会に合わせてどうぞ↓

関連

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面にサイトのショートカットを...

2015-03-09 06:48

Tweet

Pocket

okutani (@okutani_t) のヒトコト

ファビコンってなんか可愛いですよねー。ちっちゃい感じが◎。お洒落なファビコンを設置しているサイトを見るとワクワクしちゃいます。