WordPressにファビコンを設置する方法。designWordPressにファビコンを設置する方法。iPhone同時対応!ツイートWordPressで作ったブログにファビコンを追加する手順です。併せてiPhoneにも対応させます。WordPressでブログを作成したらファビコン(favicon)を作成しましょう。聞きなれない言葉かも知れませんがインターネットを利用していると頻繁に目にしています。ファビコンとはWebブラウザのアドレスバーやタブ、お気に入り登録時にサイトタイル横に出ているあの小さな絵(アイコン)のことです。ファビコンは使われる場所によってサイズが変わりますが、マルチプルアイコンは一つの画像に複数のサイズを含める事ができます。ファビコンの画像サイズファビコンはICO形式と呼ばれるファイル形式で作成されます。縦横のサイズは同じ正方形となり16×16、32×32、48×48、256×256などのサイズがあります。Webブラウザのアドレスバーやタブに利用されるアイコンのサイズは16×16が利用されます。その他のサイズはデスクトップなどでショートカットとして使う場合などに使われます。16×16は小さなサイズですのであまり複雑でない画像が望ましいです。使いたい画像をPNG形式で用意してファビコン作成ソフトやファビコン作成サイトでICOファイルを作ります。使いたい元画像は256×256で作ると良いと思います。各サイズでそれぞれ作るのが一番綺麗ですが手間もかかります。変換ソフトや変換サイトはリサイズに対応しているところが多いので、大きめのサイズで準備しておいてOKです。ICOファイルが出来たらサーバにアップロード作成したICOファイルをサーバのimagesフォルダにアップロードします。ファイル名は「favicon.ico」としてください。header.phpを編集します<head></head>の間にMETAタグとLINKタグが並んでいると思いますので次の1行を追加します。Webブラウザで確認してください。ファビコンが表示されていますね。iPhone(スマートフォン)のショートカットファビコンはパソコン用となっていますが、iPhoneでもショートカットを作成できることご存知ですか?iPhoneでの手順を紹介します。iPhoneのWebブラウザSafariにて当ブログへアクセスしてみてください。(http://05step.com)丸の箇所をタップするとメニューが開きますので「ホーム画面に追加」をタップします。するとホームにショートカットが作成されます。これは画面をキャプチャーしてアイコンとして表示しているだけのショートカットです。便利ですがどこのサイトか分かりにくいですね。iPhone(スマートフォン)にも対応させようICOファイルを作成した時に使った変換元のPNG画像をそのまま流用しましょう。別の画像でもいいのですがファイル形式はPNG形式とします。これもファビコンと同じようにimagesフォルダにアップロードします。名前は「favicon.png」とします。03ステップ目と同様にheader.phpを編集します。<head></head>の間にMETAタグとLINKタグが並んでいると思いますので次の1行を追加します。?>/images/favicon.png">04ステップ目と同じようにホーム画面にショートカットを追加してみましょう。オリジナル画像のアイコンが表示されました。これはもう、1つのアプリケーションみたいです。一気に愛着が湧きます:)iPhoneのショートカットアイコンおよびアプリは光沢が掛かったような処理がされています。オリジナルの電話アイコンやメールアプリのような処理ですね。最近はこの処理がかかっていないアプリも沢山あります。光沢を掛けたくない場合は先程の1行の代わりに以下の1行を追加してください。?>/images/favicon.png">光沢なしになりましたね。ファビコンやアイコンを作成することによってブログを見てくれている人もアクセスしやすくなりますし、外出先で自分のブログを確認する際もちょっと楽しくなりますね。設置してみてください。この記事いかがでしたか?ツイートWordPressにファビコンを設置する方法。WordPressにファビコンを設置する方法。生活でしたが見ているだけよりも踊らにゃソンソンの精神でWebの輪に参加すべくBLOG開設。背景を半透明すりガラス風に。reserved.ごすてっぷ:WordPress、Webサービスなどの情報を5ステップくらいで紹介しています。