FAVICON for iOS phones - Post ID 277712


Registered User
294 posts

I posted this quite a while ago but thought I'd do it again so it's under it's own title for search. RSD since added a favicon tool but for iPhones this is still a simple solution.

For a iOS phone icon make a .png 180x180 name it apple-touch-icon.png and attach it to the root folder with your favicon.ico image. Then put this in the HEAD below your favicon links.
<link rel="apple-touch-icon" href="apple-touch-icon.png">


I use this for example:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Now you'll get an icon in your apple phone and your browser.

By the way this is a great tool for converting images to the .ico format
http://tools.dynamicdrive.com/favicon/


Senior Advisor
17,647 posts
Online Now

CC put this up a few years ago.
http://www.coffeecup.com/help/articles/ … reen-icon/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Registered User
294 posts

That's a good find Eric, didn't see that, but the link on there points to a ios folder and it leaves out the normal favicon. The one I do just keeps it simple dimple...

For a full blown support this one is pretty good, does 'em all. https://realfavicongenerator.net/
That one if you put the images in the root you remove the first / on the links. That I think should be ./ but works removing the first slash. The last iPhone update has a bit of an issue with icons still, but should get repaired.


Ambassador
291 posts

That's the one I use, Eagle. It's simple and has all the icon variants and options to customize for specific icons.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Registered User
196 posts
Online Now

a resource I use for every site is https://realfavicongenerator.net/

Does all the hard work of favicon generation across most devices....

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.