Adding iOS Icons for Bookmarks

Since newer PHP Melody themes such as the Echo theme are responsive you might want to add your own app-like icon for iOS devices.

That’s because when bookmarked, your site will have a nice little icon on the user’s screen; just like a native app.

Pro tip: You can create the required icons from your own logo: https://iconifier.net/

Your default icon should be 57x57px. But iPad and Retina devices need to provide more sizes. iPad requires icons with the size of 72x72px, while Retina devices need icons with 114x114px size.

Once you have the icons you need to edit your PHP Melody theme header.

Open:
/templates/[current theme]/header.tpl

Find:

<link rel="shortcut icon" href="{$smarty.const._URL}/templates/{$smarty.const._TPLFOLDER}/img/favicon.ico">

After, add:

<link rel="apple-touch-icon" href="https://your-site-com/icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="https://your-site-com/icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="https://your-site-com/icon.png"/>

How to change the default PHP Melody favicon

The default PHP Melody favicon is stored in the /templates/[current theme]/img/ folder (e.g. https://demo.phpmelody.com/templates/default/img/favicon.ico).

If you don’t have a favicon file for your site yet, you can create one from your logo by visiting our favorite online favicon generator.

Once you’re satisfied with the results, save your freshly generated favicon.ico file to your computer. Then, upload it to your PHP Melody installation, replacing the existing file from your  /templates/[current theme]/img/ folder.

Job well done.

Note: Starting with PHP Melody v2.3 the favicon.ico file was moved to the /templates/[current theme]/img/ folder. Older PHP Melody versions store favicon.ico in the /uploads/ folder.