Please disregard the 'View article...' shown at the bottom of many posts as this is the result of restoring old forum posts from a backup.

Integrate multiple favicons from faviconit.com

edited June 2016 in Tips & Tricks
Exponent CMS has basic support for favicons allowing either a windows icon or png file as 'the favicon' (it must be named favicon.ico or favicon.png in the theme folder).  We also provide basic support for Apple Touch icons with either a apple-touch-icon or apple-touch-icon-precomposed png file (named respectively). There is also a favicon service web site that builds a large package of favicons at all the sizes any device could request.  It is http://faviconit.com/ and can take a large graphic/image file and convert it into multiple files of the appropriate sizes and also the code/instructions to  integrate it into a web site.

Once you create the package and download it, it will contain all the image files along with some support files and 'favicon-instructions.txt' which tells you how to integrate it into a web page.  Here's how you can integrate this feature into your Exponent CMS theme.
  • Extract all the files into your custom theme folder.  Optionally you could create a subfolder within your theme and then adjust the code below to include that subfolder name before the 'favicon???.???' filename
  • Edit your theme and subtheme templates to insert a variation of the code found in the instructions (see below). This code will be placed within the <head> element, preferrably immediately after the closing tag '?>' for the expTheme::head() call and before the html </head> closing tag
<link rel="shortcut icon" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-16.png">
<link rel="apple-touch-icon" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon-144.png">
<meta name="msapplication-config" content="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/browserconfig.xml"><link rel="icon" sizes="16x16 32x32 64x64" href="<?php echo (PATH_RELATIVE) ?>themes/<?php echo (DISPLAY_THEME) ?>/favicon.ico">
 
 
Sign In or Register to comment.