即実行!iPhoneのホーム画面用アイコンとfaviconを設定

Icon for iphone and favicon eyecath

どうも。でこいです。

前々からやろうやろうと思っていたのになぜかやらずにいた「iPhoneホーム画面用アイコン」の設置…

Diwaoさんの記事を見て、なんかすげー簡単そうだったのでやってみました。

超簡単!プラグインを使わずに自分のブログの「iPhoneホーム画面用アイコン」を設置する方法

そしたらホントに超簡単!
なんで今までやんなかったんだろう…??

ついでにfavicon(ブラウザでサイト名の前に表示される画像)の設定も完了させましたよ。


iPhoneホーム画面用アイコンの設定

手順はたったこれだけ

1) アイコンとして設定したい画像を114×114pxのpngファイルで用意し、アップロード。

2) headタグの中に以下のコードを追加。

たったこれだけ。

さてどんなもんか…

ホーム画面への追加方法は、ショーットカットを置きたいページをSafariで開き、画面下のアイコンをタップして「ホーム画面に追加」を選択するだけです。
Icon for iphone and favicon 1

何も設定していないときはこんな感じ。
Icon for iphone and favicon 2

かっこ悪くてホーム画面に置く気はしないですね…

それが、しっかり画像を設定してやると、、、
Icon for iphone and favicon 3

キタ━━━━(゚∀゚)━━━━!!

これなら自慢げにホーム画面に置くことが出来ますね!

faviconの設定

1) faviconとして使用したい画像を用意し、名前を「favicon.ico」に変更

2) faviconファルを使用中のテーマのメインディレクトリにアップ。
(/wp-content/themes/xxx )

3) headタグ内に以下のコードを追加

これだけで、こんな感じにfaviconが表示されます!
Icon for iphone and favicon 4

簡単すぎワロタ

2つを設定するのに5分とかかりませんでした。

もっと早くやっておけば良かったな〜

やりたいことを完了できたので、気持ちよく新年を迎えられそうです。

関連記事

ブログをフォロー

コメントを残す