How do i change Favicon in Typo3

I want to change favicon from e new Typo3 site (Version 9.5.9). At currently it shows typo3 own icon.

I tried as described here https://wiki.typo3.org/Add_your_own_favicon but it stills shows typo3 icon.

I have cleared browser cache and server cache already.

Solution

Browsers are sometimes very stubborn in caching favicons. I know two solutions so far:

Clicking multiple times CTRL+F5 until the new icon is shown (but visitors will probably still see the old icon)
You could try to use a dummy version parameter in the file reference like this page.shortcutIcon = fileadmin/files/favicon.ico?v=xQO7OjawKd which also should solve the issue for normal visitors. I'm currently not sure if this works with page.shortcutIcon = ...

But remeber this code replaces the old school icon only. Nowadays you probably want to show alternative icons for all the given plattforms and devices too, see https://realfavicongenerator.net/.

To do so you need some more code in your TS setup. The simplest would be to copy the html code from your favicon generator and place it in your TS like this:

page.headerData.1568907945 = TEXT
page.headerData.1568907945.value (
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=xQO7OjawKd">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=xQO7OjawKd">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=xQO7OjawKd">
  <link rel="manifest" href="/site.webmanifest?v=xQO7OjawKd">
  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=xQO7OjawKd" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
)

The part <link rel="shortcut icon" href="/favicon.ico?v=xQO7OjawKd"> you should remove because this one is generated by page.shortcutIcon. If the version parameter does not work you can try the leave it here and delete the old one with page.shortcutIcon >.

I hope this helps and the code works, it's just written out of the head ;) If not just leave a comment and I'll fix it...

And by the way you referred a very old wiki entry. You should not store such files in fileadmin, therefore create your own sitepackage see https://www.sitepackagebuilder.com/ and place the icons into Ressources/Public/Icons or to the web root and the TS setup into Configuration/TypoScript/setup.typoscript.

A more dynamic implementation you can find at https://github.com/gstypo3/gsfavicon/blob/master/Configuration/TypoScript/setup.typoscript.

This whole procedure works for the frontend only but I guess backend was not the question.