Identification icons and images

Nowadays, many sites have their own identifying images like favicon.ico, apple-touch-icon and the default image for social media posts, such as Facebook or Twitter. In this article, you will learn how to have them in your own Wonder CMS site with Materialize Dark theme.

Favicon

A favicon is a small image with an extension of *.ico that displays in the browser address bar on the left next to the website address. To have a favicon image in your own site follow the steps below:

  1. prepare a square image of at least 256x256 pixels in PNG format
  2. visit https://favicon.io/favicon-converter/ and use the favicon generator
  3. download the generated icon package, unzip it
  4. upload via ftp the favicon.ico file found in the unzipped package to the root folder of your site

Apple Touch Icon

The file apple-touch-icon.png is a PNG-formatted image that displays on the home screen on a smartphone when a link to the site is added to the home screen by the user. It works on the iPhones, iPads and the Android devices the same way. Apple Touch Icon will display also on the Safari web browser on your Mac/iPhone/iPad when you add the site to the Favorites.

apple-touch-icon-on-the-home-screen.jpg

To make your site have such an image, follow the steps below:

  1. if you previously generated the favicon package, use the file apple-touch-icon.png found in the package -> jump to the point 6
  2. if you haven't generated a favicon file yet follow the steps below
  3. prepare a square image of at least 256x256 pixels in PNG format
  4. visit https://favicon.io/favicon-converter/ and use the favicon generator
  5. download the generated icon package, unzip it
  6. upload via ftp the apple-touch-icon.png found in unzipped package to the root folder of your site

Open Graph Logo

An Open Graph image is an image that displays on Facebook or Twitter when you post there a link to a page from your site.

open-graph-logo.jpg

To make your site have such an image, follow the steps below:

  1. prepare an image in JPG format with dimensions of 492x276 pixels
  2. name it open-graph-logo.jpg
  3. upload it to your site using the Settings panel -> files tab -> upload