Add Proper Favicon Code in ISC

Problem

The original ISC is only using “shortcut icon” tag without “apple-touch-icon “, “icon”, and “manifest ” tags

<link rel="shortcut icon" href="%%GLOBAL_Favicon%%" />

Solution

  1. Visit https://favicon.io/ and generate a set of favicon images
  2. Visit https://tinypng.com/ and compress the PNG images
  3. Visit https://redketchup.io/icon-editor and re-create the .ico file with PNG format with 16×16, 24×24, 32×32, 48×48 and 64×64 (file size will be reduced from around 16KB to 6KB)
  4. Open site.webmanifest and edit “name” and “short_name”
  5. Upload all files to root directory
  6. Add below codes in /Panel/HTMLHead.html for both Desktop and Mobile sites
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="manifest" href="/site.webmanifest">

Note: <link rel=”shortcut icon” href=”%%GLOBAL_Favicon%%” /> tag is not needed if the favicon.ico is located in root directory.

Reference

This favicon is generated by favicon.io

  • Text = mod
  • Background = Rounded
  • Font Family = Righteous
  • Font Size = 60
  • Font Color = #FFF
  • Background Color = #075899

Leave a Reply

Your email address will not be published. Required fields are marked *