Stinger5にファビコンを設置する方法
2017/02/01
こんにちは、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用アイコンの設置方法も記事にしています。この機会に合わせてどうぞ↓
関連
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています。
「Ruby on Rails」「HTML5」「CSS3」「JavaScript（jQuery, Reactなど）」を用いたシステム開発、「Heroku」を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
