CODEWITHSUNDEEP
apple-touch-icon
Akash Agrawal
Akash Agrawal

Reputation: 4927

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

I have created a new rails3 project but I am seeing following logs many times in my server logs. Why I am getting these request and how can I avoid these?

Started GET "/apple-touch-icon-precomposed.png" for 192.168.6.2 at 2012-09-18 20:03:53 +0530

ActionController::RoutingError (No route matches [GET] "/apple-touch-icon-precomposed.png"):

I haven't given this link anywhere and don't want to render this image anywhere. I am clueless why this resource is being tried to be loaded.

Upvotes: 297

Views: 223803

Answers (12)

Sergio
Sergio

Reputation: 2469

Hi only example easy in nginx is.

Nginx config ExpReg:

    location ~* /apple-touch-(icon-57x57-precomposed|icon-57x57|icon-precomposed|icon).png$ {
        log_not_found off;
        access_log off;
}

Upvotes: 0

Joao Leme
Joao Leme

Reputation: 9898

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)

Upvotes: 267

Dave G
Dave G

Reputation: 255

Simply create zero-sized files called the appropriate names.

The request will be satisfied with no additional data transfer nor further logging lines.

Upvotes: -1

Edward Khachatryan
Edward Khachatryan

Reputation: 469

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.

Upvotes: 6

Roger
Roger

Reputation: 7612

An alternative solution is to simply add a route to your routes.rb

It basically catches the Apple request and renders a 404 back to the client. This way your log files aren't cluttered.

# routes.rb at the near-end
match '/:png', via: :get, controller: 'application', action: 'apple_touch_not_found', png: /apple-touch-icon.*\.png/

then add a method 'apple_touch_not_found' to your application_controller.rb

# application_controller.rb
def apple_touch_not_found
  render  plain: 'apple-touch icons not found', status: 404
end

Upvotes: 2

Leopoldo Sanczyk
Leopoldo Sanczyk

Reputation: 1609

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.

Upvotes: 14

molavec
molavec

Reputation: 9117

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.

Upvotes: 6

davidcelis
davidcelis

Reputation: 3347

There’s a gem like quiet_assets that will silence these errors in your logs if, like me, you didn’t want to have to add these files to your Rails app:

https://github.com/davidcelis/quiet_safari

Upvotes: 4

Anand Kumar
Anand Kumar

Reputation: 999

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.

Upvotes: 89

Brian
Brian

Reputation: 1028

Same thing is happening for me. And yes, as @Joao Leme said, it seems it is related to a user bookmarking a site to their device homescreen.

However, I noticed that even though there is an error in the log, it's happening behind the scenes and the user never sees the error. I assume the device makes a request for the touch-icon specific to its resolution (which isn't there) until defaulting to the general apple-touch-icon or apple-touch-icon-precomposed, if present, or else generates a small screenshot of the current page.

FWIW, put the icons in the /public directory.

Upvotes: 0

Tinynumbers
Tinynumbers

Reputation: 329

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).

Upvotes: 5

Jju
Jju

Reputation: 135

Try to change link from 

/apple-touch-icon-precomposed.png

to: 

<%=asset_path "apple-touch-icon-precomposed.png" %>

Upvotes: -4

Related Questions