Apple-Touch-Icon.png

Store Builder Questions
1

For some time now I have been noticing /apple-touch-icon.png and /apple-touch-icon-precomposed.png in my visitor logs (with a 404) every once in a while. Today I finally had some time to find out what it was all about. What I found out is that it is like a favicon but it can be an icon that is bigger and nicer than a favicon to be used as an app icon/bookmark. I actually found a lot of articles on the subject dating back to 2009. I went ahead and implemented it and thought I would share since it is fairly simple.

For IOS supposedly all you need to do is create an icon image of your store logo and name it "apple-touch-icon.png" & "apple-touch-icon-precomposed.png". Place the 2 files of the same image different names in the root of your CS install. The size of my images are 180x180.

For Android & Chrome browsers it's the same but you also need to add tags to let the browser know the location (IOS used to work this way as well in the beginning).

/design/themes/responsive/templates/addons/my_changes/hooks/index/meta.post.tpl



That's all there is to it.  Unfortunately I do not have a device with IOS so it would be great if someone can test it and reply with their results.  At this time I can only confirm that it works with Android & Chrome. 

            


            

              
              
              
            


            

                
                
              


          

          

            

              

              


              
                  
                  
              2
              
            

            

              
Just had a friend test it on their iphone (don't know what version) and it worked.

            


            

              
              
              
            


            

                
                
              


          

          

            

              

              


              
                  
                  
              3
              
            

            

              
Thanks for this. BTW, I used this website; http://realfavicongenerator.net/- I uploaded a single image at around 300px x 300px and it generated every size needed for Apple, Chrome, Safari tabs etc, plus the required code. 


 


Your post here very kindly told me what file to put the code in. Thanks! :-)

            


            

              
              
              
            


            

                
                
              


          

          

            

              

              


              
                  
                  
              4
              
            

            

              




Thanks for this. BTW, I used this website; http://realfavicongenerator.net/- I uploaded a single image at around 300px x 300px and it generated every size needed for Apple, Chrome, Safari tabs etc, plus the required code.


 


Your post here very kindly told me what file to put the code in. Thanks! :-)






 


 


Thanks for that link, great icon generator.



Also, after uploading the files, if you go to default layout and click the gear, you can add the info into the header from there (check "Copy to other locations") works like a charm!



​be sure to also upload the favicon.ico file you just created in the logos section of your theme so you do not have 2 different versions

(Could not figure out how to disable or overwrite the stock code that created the favicon path)