Apple Touch Icon Support

I want to set the favicon also as the apple touch icon. Meaning that if you bookmark the ghost website on your iPhone home screen it shows a high res logo as the “app” icon instead of a screenshot of the website.

I’m using a self hosted Ghost 3.1.1 with the Liebling Theme on On iPhone im using iOS 13.1 with Safari to add the website to the home screen. Instead of showing the Logo/Favicon it shows a screenshot as the Logo it would use on the home screen. This is standard behavior when no apple touch icon is found.

I got all the files but don’t know where to put them within the Ghost installation. Setting a favicon in the ghost backend doesn’t do the trick for iOS.

What can I do to use my favicon/icon as the apple touch icon with Ghost? or Where do i have to put my apple-touch-icon file in order to work? (just in /html folder doesn’t work)

Thanks in advance,

Take a look at the documentation on Apple’s site here:


You’ll need to add any image files to your theme’s root directory and then modify your theme’s default.hbs file to add the relevant <link> and <meta> tags.

You can read more about theme development in the docs…


For me it was a problem with building the theme after changing it. I had an issue with npm, where it didn’t run my scripts. So this was the fix:

Now the theme icons are displayed properly in iOS.

To keep my root directory clean, i created a subfolder in the assets folder, containing all my icons. This is roughly how i did it, though you don’t need as many icons anymore and some files are called differently by now (so don’t just copy and paste from this article):

Thanks for your comments @Dave and @Kevin ! They helped me to further tweak how iOS handles the website (e.g. defining a separate meta name) and let me try adding them to the root folder, which i did’t try before.

1 Like