Smartphone last opened pages preview icon how to set it up in code?

Question

the last opened pages got a shortcut in chrome and safari on smartphone. but my page not.

how do I set up the picture for this?

for example ikea and bild works

favicon is set

<link rel="shortcut icon" href="include/designs/wirte/favicon.ico">
<link rel="shortcut icon" href="include/designs/design/images/favicon.png" type="image/x-icon">
<link rel="icon" href="include/designs/design/images/favicon.png" type="image/x-icon">

Answer 1

iOS Safari uses the Apple Touch icon for this purpose and also bookmarks and home screen icons. You definitely want to declare this one.

Android Chrome is similar, it reuses the icon it already takes for bookmarks and home screen icons:

• A high resolution icon declared in a Web App manifest.
• Else, a high resolution PNG icon.
• Else, the classic Apple Touch icon.

As an alternative to the classic, manual creation, you can use this online favicon generator. It allows you to design your icons platform per platform and creates the icons and HTML you need to get the job done. Full disclosure: I'm the author of this site.

Answer 2

Add this code with your favicon.

 <link rel="SHORTCUT ICON" HREF="/favicon.png">