当サイトには広告が含まれております

iPhoneやiPadのホーム画面に追加で使われるアイコンを指定する

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

「写真や画像から簡単に各種faviconを作成してくれるWebサービス」で簡単にfaviconを作れるWebサービスについて書きました。このWebサービスではPCのfavicon以外にiPhoneやiPadのアイコン画像も作成してくれています。WordPressのヘッダにコードを追加して、iPhoneやiPadのアイコン画像を表示できるようにしました。それについて書きます。

記事をざっと見る

画像を使ってfaviconをアップロードした状態

今作っているサイトのfaviconを「写真や画像から簡単に各種faviconを作成してくれるWebサービス」で作りました。自動生成されたフォルダには、

このようにたくさんの画像HTMLなどが入っています。この中の favicon.ico をサイトのルートディレクトリにアップロードするとPCのブラウザで見たときに

このようにfaviconが表示されます。この時点ではまだ、iPhoneのホーム画面に追加をしても、

こんな感じに、サイトのハードコピーのようになっています。

iPhoneやiPadのアイコン画像の指定方法が書いてあるhtml

フォルダに入っている favicon.html を開いてみると、

<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/>
<link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>

このように書いてあります。これをHTMLのヘッダに追加すればiPhoneやiPadのアイコン画像が指定できそうです。

functions.phpでヘッダに記述を追加する

基本的にカスタマイズをするときは子テーマを使っています。子テーマだと直接head部分の修正をしてしまってもいいような気がしますが、functions.phpでヘッダに記述を追加したいと思います。functions.phpでヘッダに表示する方法はどのテーマを使っていても同じなのでテーマ毎に異なるhead部分を探して修正する必要が無いからです。

functions.phpに

/** 作成したfavicon各種を追加する */
function addFavicon(){
echo '
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/>
<link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>
    ';
}
/** headに追加する */
add_action('wp_head', 'addFavicon');

function addFavicon(){ で先ほどの favicon.html の中身をechoして、そのfunctionを add_action(‘wp_head’, ‘addFavicon’); と指定すると、headerにechoしたfavicon.html
内容が追加されます。つまりこれでiPhoneとiPad用のアイコンの指定がされます。

ここに記述されている画像全てをfavicon.icoをアップロードした、Webサイトのルートパスにアップロードします。

iPhoneとiPadでホームアイコンを確認してみる

この状態でiPhoneとiPad のホームに追加をしてアイコンを確認してみます。

iPad

iPhone

このようにかわいいアイコンが表示されて、印象が全然違います(^^)/。

Webサービスで各種アイコンが自動的に作成できますので、あとはこのfunction.phpへコードを追加することで簡単にiPhoneやiPadそして(実機がないので確認はできてませんが)アンドロイドなどでのアイコンも指定できます。お試しください!

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る