Однажды обнаружил в логах одного из проектов множество 404 ошибок. После недолгого расследования выяснилось, что ошибки создаются не пользователями, а программами. В большинстве случаев запрашивались картинки, которые не существуют на сервере. Как же так получается?
Всё происходит из-за компании Apple. Если зайти через Safari на любой сайт, то браузер запросит дополнительные картинки для оформления иконок. Такие иконки можно найти на экране быстрой загрузки браузера. Ещё их можно получить, если выгрузить ссылку из Safari для автономного режима.
Ошибки в логах:
404 "GET /apple-touch-icon-precomposed.png HTTP/1.1"
404 "GET /apple-touch-icon.png HTTP/1.1"
404 "GET /apple-touch-icon-120x120-precomposed.png HTTP/1.1"
404 "GET /apple-touch-icon-120x120.png HTTP/1.1"
50% трафика в интернете - это мобильный трафик. Поэтому можно сказать, что почти каждый второй посетитель сайта генерировал несколько логов с 404 ошибкой. Из-за эстетической неприязни 404 ошибки, я решил исправить ситуацию. Для удовлетворения аппетита устройств Apple необходимо:
- сделать картинку-логотип сайта в нескольких размерах
- назвать файлы определёнными именами
- поместить файлы картинок в корневую папку сайта
На подобные иконки есть жёсткая спецификация, где описывается все размеры, разрешения и скругления. Но иконок должно быть штук 20, а делать их руками очень не хочется. Поэтому в помощь приходит сайт realfavicongenerator.net. Загружаем в него большую картинку (512 х 512 пикселей) и он делает кучу иконок. Не только для Apple, но и для Android, Microsoft и ещё чего-то там. Примерно вот так выглядит результат работы сервиса:
Получается целый ворох иконок и описывающих файлов.
К счастью, не надо прописывать в html сайта пути к этим иконкам, если оставить файлам стандартные названия. Поэтому загружаем их всем скопом в корневую папку сайта.
