androidtypo3favicontypo3-9.xhomescreen

TYPO3 - Add to homescreen icon


I have a TYPO3 9 website and want to add the startpage to my homescreen on Android 9. After adding the link to my homescreen, it appears as an icon showing the letter "H".

What changes do I have to make in order to display a custom icon after adding my page to the homescreen?

I tried to change the favicon (used a 32x32px png) as I thought that maybe this would be used as the icon on the homescreen, but it didn't work out.


Solution

  • Favicons are not used for the home screen on Android. You will need to add a separate tag in your header to add a home screen icon.

    For Android:

    <link rel="icon" href="icon.png">
    

    For iOs:

    `<link rel="apple-touch-icon" href="icon.png">`
    

    apple-touch-icon might also work on some Android versions, but I think it's deprecated and might already be removed in newer versions.

    You can add it to a TYPO3 site using the following TypoScript:

    page.headerData.10 = TEXT
    page.headerData.10.value = <link rel="icon" href="icon.png">
    page.headerData.20 = TEXT
    page.headerData.20.value = <link rel="icon" href="icon.png">
    

    Of course you need to point it to an existing image file and you need to check if page.headerData.10 and page.headerData.20 aren't used for something else (in which case you need to use different numbers).