CakePHPで favicon.icoやapple-touch-icon-144-precomposed.pngが could not be foundのエラーが出るときの対処方法

2018/04/29 2019/03/02

CakePHPで favicon.icoやapple-touch-icon-144-precomposed.pngを設定する

CakePHPで linkタグを設定。HtmlHelper::metaの利用方法も解説

　
CakePHPで構築したシステムで、「Error: [MissingControllerException] Controller class ImagesController could not be found.」というメッセージとともに「favicon.ico」や「apple-touch-icon-72-precomposed.png」や「apple-touch-icon-144-precomposed.png」などのファイルが存在しない、というエラーが出力される場合があります。
　
　
その時は、「/app/View/Layouts/default.ctp」に下記の記述を追加しましょう。
　
HTMLで記述する場合は、以下の通りとなります。
　

<link rel="shortcut icon" href="/images/favicon.ico" />

<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-144-precomposed.png" sizes="144x144"  />

　
　
上記と同様の記述を CakePHPの HtmlHelperを利用して記述する場合は、以下の通りとなります。
　

<?php
echo $this->Html->meta('icon', '/images/favicon.ico'); 

echo $this->Html->meta('apple-touch-icon-144-precomposed.png', '/images/apple-touch-icon-144-precomposed.png', array("size"=>"144x144")); 
?>

<?php

echo $this->Html->meta('icon', '/images/favicon.ico');

echo $this->Html->meta('apple-touch-icon-144-precomposed.png', '/images/apple-touch-icon-144-precomposed.png', array("size"=>"144x144"));

　
いずれの方法を使うにしても、「<head> ．．． </head>」の間のどこかに記述します。
　
　
この記述を追記する際に注意するポイントは、相対パスで記述するのではなく、フルパスで記述する（「/」から書き始める）、ということです。
　
　

CakePHPで linkタグ、HtmlHelper::metaを利用する方法についての解説

　
先に説明した対処方法について、以降で詳しい解説をしていきます。
　
　

favicon.icoやapple-touch-icon-144-precomposed.pngが could not be foundのエラーを出力した経緯

　
CakePHPに、会員管理プラグイン「CakeDC/Users」を導入したサイトの開発を行っています。
　
その際、下記の様なエラーがエラーログに出力されていることに気づきました。
　

2018-04-01 01:01:01 Error: [MissingControllerException] Controller class ImagesController could not be found.
Exception Attributes: array (
  'class' => 'ImagesController',
  'plugin' => NULL,
)
Request URL: /admin/images/apple-touch-icon-144-precomposed.png
Stack Trace:
#0 /var/www/html/example/app/webroot/index.php(110): Dispatcher->dispatch(Object(CakeRequest), Object(CakeResponse))
#1 {main}

2018-04-01 01:01:01 Error: [MissingControllerException] Controller class ImagesController could not be found.

Exception Attributes: array (

'class' => 'ImagesController',

'plugin' => NULL,

)

Request URL: /admin/images/apple-touch-icon-144-precomposed.png

Stack Trace:

#0 /var/www/html/example/app/webroot/index.php(110): Dispatcher->dispatch(Object(CakeRequest), Object(CakeResponse))

#1 {main}

2018-04-01 02:02:02 Error: [MissingControllerException] Controller class ImagesController could not be found.
Exception Attributes: array (
  'class' => 'ImagesController',
  'plugin' => NULL,
)
Request URL: /admin/images/favicon.ico
Stack Trace:
#0 /var/www/html/example/app/webroot/index.php(110): Dispatcher->dispatch(Object(CakeRequest), Object(CakeResponse))
#1 {main}

2018-04-01 02:02:02 Error: [MissingControllerException] Controller class ImagesController could not be found.

Exception Attributes: array (

'class' => 'ImagesController',

'plugin' => NULL,

)

Request URL: /admin/images/favicon.ico

Stack Trace:

#0 /var/www/html/example/app/webroot/index.php(110): Dispatcher->dispatch(Object(CakeRequest), Object(CakeResponse))

#1 {main}

　
　
エラーログの内容を解説すると以下の通りです。
「ImagesController」が見つかりませんでした。
エラー発生のリクエスト URLは「/admin/images/apple-touch-icon-144-precomposed.png」「/admin/images/favicon.ico」です。
　
また、エラーが発生した個所は「/var/www/html/example/app/webroot/index.php」の 110行目です。
という内容です。
　
　
ちなみに、「/example/app/webroot/index.php」の 110行目付近のソースコードは以下の通りです。
　

$Dispatcher = new Dispatcher();
$Dispatcher->dispatch(
	new CakeRequest(),
	new CakeResponse()
);

106

107

108

109

110

$Dispatcher = new Dispatcher();

$Dispatcher->dispatch(

new CakeRequest(),

new CakeResponse()

);

　
これは、CakePHPの Bakeで作成されるデフォルトの状態と変わらないものです。
　
また、index.phpは上記の 110行目で終了しています。
そのため、110行目は、ファイルの最後の「);」と言ことになるのですが、これでは何が原因でエラーになっているのかが分かりません。
　
　

「CakeDC/Users」を使った会員管理システムである

　
また、このシステムでは、最初にも書きましたが「CakeDC/Users」を使ってログインが必要なシステムになっています。
一般ユーザ（Member）と、管理者ユーザ（admin）とに画面が分かれています。
　
そして、「一般ユーザ（Member）」の URLは下記のものになりますが
　https://example.com/login
　
「管理者ユーザ（admin）」の URLは、下記の様に自動的に「admin」が付与されるようにルーティングされています。
　https://example.com/admin/login
　
この「admin」が付与されるルーティングは「CakeDC/Users」をインストールする過程で設定します。
　
「CakeDC/Users」に関しては下記に記事を書いていますので、参考にしてください。
CakePHP3のユーザ管理・ログイン認証プラグインCakeDC/Usersのインストール解説・3.6以降対応
　
　
今回の不具合の原因は、この「CakeDC/Users」のログインに関連したルーティングの処理で発生しているのです。
　
　

テンプレートファイルや画像、CSS、JSのリンクもルーティングされる

　
「CakeDC/Users」などでルーティング処理がされる際、「/app/View/Layouts/default.ctp」を始めとするテンプレートファイルのファイル名や、テンプレートにある画像ファイル、CSSファイル、JSファイルへのリンクもルーティングの処理がされるのです。
　
　
より具体的には、下記のように「favicon.ico」までのパスを上記のように相対パスで記述していたとします。
　

<link rel="shortcut icon" href="images/favicon.ico" />

1	<link rel="shortcut icon" href="images/favicon.ico" />

　
　
この場合、「一般ユーザ（Member）」でアクセスしたときは下記になりますが、
「/images/favicon.ico」
　
「管理者ユーザ（admin）」でアクセスしたときは、ルーティングの設定があるため、下記の様に「/admin」が追加されてしまうのです。
「/admin/images/favicon.ico」
　
　
「一般ユーザ（Member）」と「管理者ユーザ（admin）」とで全く画面のイメージが違うために、「/images/」と「/admin/images/」を別々に用意している場合はこれでも問題ないのだと思います。
ですが、今回構築していたシステムは、基本的な画面イメージはどちらもほぼ同じで、登録、更新の機能が違うという程度でしたので、管理者ユーザ側の画像ファイルも含めて、すべて「/images」に入っている状態でした。
　
そのために、「管理者ユーザ（admin）」でアクセスをすると、画像のフォルダも「/admin/images/」にルーティングされることで、「ファイルがない」というエラーにつながるという結果になっていました。
　
　

ルーティング処理されるパスの問題点の解消方法

　
先にも書きましたが、このルーティングされる際に画像などのパスもルーティングされてしまう問題点の解消方法は、画像フォルダのパスの指定を、相対パスではなく、「/」から始まるフルパスで記述しておくことです。
　
　
ちなみに、もう一つ私がはまった点としては、テンプレートとして使用しているファイルが一つだけではなかった、という点です。
　
標準的には、テンプレートファイルは「/app/View/Layout/default.ctp」になりますので、このファイルのパスを変更します。
　
ですが、私がメンテナンスをしていたシステムには、「default.ctp」のほかに管理画面用の「admin.ctp」がありまして、こちらのパスも相対パスで記述されていました。
そのため、「default.ctp」だけを変更して動作確認しても、エラーが出続けるという状況になっていました。
　
その他、「login.ctp」「error.ctp」といったテンプレートを作っている場合もあるでしょうから、その他のテンプレートも確認してみることをおススメします。
　

favicon.icoによって could not be foundのエラーが出るときの対処方法のまとめ

　
「favicon.ico」のリンクを指定する「linkタグ」の記述は、以下のようになります。
リンクを記述する際のポイントは、「/」からフルパスで書き始めることです。
　

<link rel="shortcut icon" href="/images/favicon.ico" />

1	<link rel="shortcut icon" href="/images/favicon.ico" />

　
　
上記のように、CakePHPでも直接 HTMLの linkタグを記述しても全く問題はありませんが、CakePHPの HtmlHelperを使って書くこともできます。
HtmlHelperを使って書くとちょっとカッコよく見せることもできる！という感じです。
　
　

HtmlHelper::meta()の使い方

　
HtmlHelperを使って linkタグを記述する場合は「HtmlHelper::meta()」を使用します。
　
詳細は、下記の Cookbookにもあります。
　
CakePHP 2.x　Cookbook　HtmlHelper
https://book.cakephp.org/2.0/ja/core-libraries/helpers/html.html
　
　
HtmlHelper::meta()は、下記の形式で使用します。
　

HtmlHelper::meta(string $type, string $url = null, array $options = array())

1	HtmlHelper::meta(string $type, string $url = null, array $options = array())

　
一番簡単な記述方法としては、以下のようになります。
1つ目のパラメーターにファイルのタイプを指定し、2つ目のパラメーターにファイルのパスを指定します。
　

echo $this->Html->meta('icon', '/images/favicon.ico');

1	echo $this->Html->meta('icon', '/images/favicon.ico');

　
処理されて出力される linkタグは以下のようになります。
　

<link href="/images/favicon.ico" type="image/x-icon" rel="icon" /><link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon" />

1	<link href="/images/favicon.ico" type="image/x-icon" rel="icon" /><link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon" />

　
　
また、タイプやオプションの指定内容によって少しずつ編集される内容が変わってきます。
それを実験した内容が下記になりますので参考にしてみてください。
　

echo $this->Html->meta('favicon.ico', '/images/favicon.ico'); 

// ↑このように記述すると、
// ↓こう編集されます

<link href="http://example.com/images/favicon.ico" type="application/rss+xml" rel="alternate" title="favicon.ico" />

echo $this->Html->meta('favicon.ico', '/images/favicon.ico');

// ↑このように記述すると、

// ↓こう編集されます

echo $this->Html->meta('favicon.ico', '/images/favicon.ico', array("type"=>"icon")); 

// ↑このように記述すると、
// ↓こう編集されます

<link href="/images/favicon.ico" type="image/x-icon" rel="icon" /><link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon" />

echo $this->Html->meta('favicon.ico', '/images/favicon.ico', array("type"=>"icon"));

// ↑このように記述すると、

// ↓こう編集されます

echo $this->Html->meta('apple-touch-icon-144-precomposed.png', '/images/apple-touch-icon-144-precomposed.png', array("size"=>"144x144")); 

// ↑このように記述すると、
// ↓こう編集されます

<link href="http://example.com/images/apple-touch-icon-144-precomposed.png" type="application/rss+xml" rel="alternate" title="apple-touch-icon-144-precomposed.png" size="144x144" />

echo $this->Html->meta('apple-touch-icon-144-precomposed.png', '/images/apple-touch-icon-144-precomposed.png', array("size"=>"144x144"));

// ↑このように記述すると、

// ↓こう編集されます

- CakePHP 3.x 4.x

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数

CakePHP3で特定フォルダのパスの定数を解説。root、DocumentRoot、app、config、webroot、tests、tmp、cache、vendor、コア、コアの srcが設定済み。realpath()関数を使うと柔軟なパス指定が可能。

: CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法

CakePHP3でtitleタグ、h1タグのテキストをデフォルトから変更する方法を解説。テンプレートファイルに「$this->assign()」でテキストを指定して「/Layout/defult.ctp」で受け取る。

: CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説

CakePHP3でOGPを設定する方法を解説。fetch、assignを使用しレイアウトファイルに編集した変数にテンプレートファイルから値を指定する。これを利用してOGPを編集する。

: CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順

CakePHP3で「1対多」の連携を中間テーブルを利用した「多対多」の連携に変更するときの手順のまとめ。中間テーブルの設定やModelの変更などを間違いやすい箇所を指摘しながらの解説。

: CakePHP 2.3　bakeの超初心者向けフォロー講座

CakePHP 2.3　bakeの超初心者向けフォロー講座

: CakePHP3で保存前にバリデーション結果を取得する2つの方法

CakePHP3でデータベースに値を保存する前にバリデーションを行い、その結果によって処理を振り分ける方法について解説。「$topic->errors()」と「$topic->hasErrors()」の2つの方法がある。

: CakePHP3の検索プラグイン「friendsofcake/search」の設置方法・CakePHP3.6対応

CakePHP3で検索を担うプラグイン「friendsofcake/search」の紹介。基本的な設置方法の紹介のほか、処理の記述方法のバリエーション、エラーの解説など。CakeDC/searchより導入は簡単！

: CakePHP3にデザインテンプレートBootstrapを導入する方法・friendsofcake/bootstrap-ui使用

CakePHP3にプラグイン「friendsofcake/bootstrap-ui」、デザインテンプレート「Bootstrap」を設置する手順を解説。Bootstrapの簡単な使い方やデフォルトのデザインとの混在方法なども解説。

: VirtualBoxにCakePHP3を設置。必要なCentOS、Apache、PHP、MySQL、Composerをインストールし設定する

VirtualBoxにCentOS、Apache、MySQL、PHPをインストールするところから初めてCakePHP3の開発環境を構築する手順を詳細解説。この記事1つで全ての設定が完了する。