Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why am I getting error for apple-touch-icon-precomposed.png

People also ask

What is an apple touch icon png?

Similar to the Favicon, the Apple touch icon or apple-touch-icon. png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen, this icon is used.

How do I specify apple touch icon?

You can specify what icon your app should use by including a <link rel="apple-touch-icon" href="/example. png"> tag in the <head> of your page. If your page doesn't have this link tag, iOS generates an icon by taking a screenshot of the page content.

What is link apple touch icon?

This icon is used when someone adds your web page as a bookmark. For multiple icons with different device resolutions like iPhone or iPad, add sizes attribute to each link element as follows − <link rel = "apple-touch-icon" href = "touch-icon-iphone.png">


I guess apple devices make those requests if the device owner adds the site to it. This is the equivalent of the favicon. To resolve, add 2 100×100 png files, save it as apple-touch-icon-precomposed.png and apple-touch-icon.png and upload it to the root directory of the server. After that, the error should be gone.

I noticed lots of requests for apple-touch-icon-precomposed.png and apple-touch-icon.png in the logs that tried to load the images from the root directory of the site. I first thought it was a misconfiguration of the mobile theme and plugin, but found out later that Apple devices make those requests if the device owner adds the site to it.

Source: Why Webmasters Should Analyze Their 404 Error Log (Mar 2012; by Martin Brinkmann)


If a user from Safari Web browser (Apple devices) visit your site. The browser tries to fetch the site icon if it is not defined in <head> in the following order:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

To resolve this issue either define an icon for safari web browsers or apple devices. Add something like this to head section of your site:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

If you want to keep <head> clean then upload the icon to root dir of your site with proper name.

The default icon size is 57px.

You can find more details on iOS developer library.


If you ended here googling, this is a simple configuration to prevent this error full the web server logs:

Apache virtualhost

Redirect 404 /apple-touch-icon-precomposed.png
<Location /apple-touch-icon-precomposed.png>
    ErrorDocument 404 "apple-touch-icon-precomposed does not exist"
</Location>

Nginx server block:

location =/apple-touch-icon-precomposed.png {
        log_not_found off;
        access_log off;
}

PS: Is possible you want to add apple-touch-icon.png and favicon.ico too.


Note that this can happen even when the user has NOT bookmarked the site to their iOS home screen - for example, any time you open a page using Chrome for iOS, it does a GET "/apple-touch-icon-precomposed.png".

I've handled this and other non-HTML 404 requests in my ApplicationController as follows:

respond_to do |format|
  format.html { render :template => "error_404", :layout => "errors", :status => 404 }
  format.all { render :nothing => true, :status => 404 }
end

The format.all response takes care of images such as this PNG file (which does not exist for my site).


I finally solved!! It's a Web Clip feature on Mac Devices. If a user want to add your website in Dock o Desktop it requests this icon.

You may want users to be able to add your web application 
or webpage link to the Home screen. These links, represented 
by an icon, are called Web Clips. Follow these simple steps 
to specify an icon to represent your web application or webpage
on iOS.

more info: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

how to solve?: Add a icon to solve problem.


If you don't care about the icon looking pretty on all sort of Apple devices, just add

get '/:apple_touch_icon' => redirect('/icon.png'), constraints: { apple_touch_icon: /apple-touch-icon(-\d+x\d+)?(-precomposed)?\.png/ }

to your config/routes.rb file and some icon.png to your public directory. Redirecting to 404.html instead of icon.png works too.