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

この記事は約6分で読めます。

「写真や画像から簡単に各種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そして(実機がないので確認はできてませんが)アンドロイドなどでのアイコンも指定できます。お試しください!

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般 インターネット
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。