joomla 5 favicon back background on png transparent image Topic is solved

[joomlerGR]

i have set on my joomla 5 favicon via https://realfavicongenerator.net/
i put my logo with transparent background (png)

when i "Add to Home Screen" the website to iphone the favicon that its saved it has the logo with back background and not transparent as it is in the png.

anyone knows if there is any meta tag to set the transparent colour of iphone to not be shown black?

Code: Select all

<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

[Mr. Wimpy]

Transparency is not possible in apple-touch-icons.
Realfavicongenerator sets the background to black by default.

At the settings for the apple-touch-icon you can set the prefered background color.

Note: Favicons for Android do allow transparency

I don't recall RFG creating that may apple-touch-icons. You don't really need that many.
Also RFG does create additional favicons that are missing in your list.

[Per Yngve Berg]

This depends of the Web Browser being used, not the OS of the device.

[joomlerGR]

Transparency is not possible in apple-touch-icons.
Realfavicongenerator sets the background to black by default.

At the settings for the apple-touch-icon you can set the prefered background color.

Note: Favicons for Android do allow transparency

I don't recall RFG creating that may apple-touch-icons. You don't really need that many.
Also RFG does create additional favicons that are missing in your list.

FOR example how i will implement the colour inside etc: <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">

?

[Mr. Wimpy]

I innitially thought RFG added the black background, but it's iOS. My mistake...

Anyway...
You can have transparent apple-touch-icons (and favicons), but...

On the home screen of iOS the background of a transparant (apple-touch-) icon is set to black.

You have a couple of options:
- Keep the transparent image and do nothing: the background turns black on iOS, or
- Keep the transparent image and choose your own background colour: RFG will add a solid background colour to your icon, or
- Select a dedicated non-transparent picture for iOS...

ios-favicon.jpg

[joomlerGR]

perfect!