我如何更改 Typo3 中的 Favicon

Question

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.

Answer 1

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.