How to set up Favicon on the site with MODx Revolution

By Oleg Tolochko, published on 2023-11-11
How to set up Favicon on the site with MODx Revolution

In MODX Revolution we have a great opportunity to make automatic generation of all necessary favicon sizes, so that we don't waste time on manual creation. Let's find out how to do it.

Favicon are small but important icons displayed in the browser tab and next to the page in search engine results. This is a crucial part of branding your website and business in general - a memorable and prominent icon increases the likelihood that a user will visit your site, perform a targeted action, and return to it later.

Step 1 - Creating a favicon

Before we talk about MODX, we need to create the favicon file. It should be simple, recognizable and reflect your brand. Take into account that it takes up little space on the screen, and small details will be almost invisible - make large, clearly recognizable elements.

You can create it using various online tools or design programs such as Adobe Photoshop or Illustrator. Remember that the standard favicon size is 16x16 or 32x32 pixels, saved in .ico format for wide compatibility.

We will also need an .svg variant of the icon to automatically generate other sizes. Most likely you will create the design in vector, and it will not be difficult to save it in SVG. And then convert it to ICO - the standard format of icons.

Total we have 2 files: ICO 32x32 and SVG.

Step 2 - Uploading files to MODX

After the icons are ready, you need to upload them to the site. This can be done through the MODX file manager, via FTP or through the hosting panel (if there is such an option).

It is desirable to upload files to the root directory, i.e. they should be available from the Internet at the following addresses:

https://site.com/favicon.ico
https://site.com/favicon.svg

The files should be called favicon - these addresses are checked by browser and bots by default, as well as robots.txt and sitemap.xml.

Step 3 - Generating in the template

Now the most interesting part begins. In order for the favicon to display correctly on different devices and in different use cases, it must be specified in the head section, with a certain markup.

Using Multiple Favicons

Modern web practices often involve using different sized favicons for different devices. For example, for Apple devices, a format called Apple Touch Icon is used, with an optimal size of 180x180 pixels. And for Windows, you can set the color and background of the anchored link to the site in the tiled design of the Start menu.

Find where the head tag content of your pages is generated. It is usually specified either in a template or in a site-wide chunk. If you use file elements with Fenom, the chunks may be stored in the core/elements folder.

To generate different sizes of favicon, you will need the pThumb add-on installed, which you will already need to optimize the images on your site.

Insert the following code in the head section:

<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="favicon.ico">

<!-- For modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="[[pthumb?&input=`favicon.svg`&options=`w=32&h=32&f=png&q=100`]]">
<link rel="icon" type="image/png" sizes="64x64" href="[[pthumb?&input=`favicon.svg`&options=`w=64&h=64&f=png&q=100`]]">
<link rel="icon" type="image/png" sizes="128x128" href="[[pthumb?&input=`favicon.svg`&options=`w=128&h=128&f=png&q=100`]]">
<link rel="icon" type="image/png" sizes="256x256" href="[[pthumb?&input=`favicon.svg`&options=`w=256&h=256&f=png&q=100`]]">
<link rel="icon" type="image/png" sizes="512x512" href="[[pthumb?&input=`favicon.svg`&options=`w=512&h=512&f=png&q=100`]]">

<!-- For iOS devices -->
<link rel="apple-touch-icon" sizes="180x180" href="[[pthumb?&input=`favicon.svg`&options=`w=180&h=180&f=png&q=100`]]">

<!-- For Windows 8 and 10 -->
<meta name="msapplication-TileColor" content="#dddddd">
<meta name="msapplication-TileImage" content="[[pthumb?&input=`favicon.svg`&options=`w=144&h=144&f=png&q=100`]]">

<!-- For Safari pinned tabs -->
<link rel="mask-icon" href="favicon.svg" color="#000">
<meta name="theme-color" content="#dddddd">
<!-- /Favicons -->

This template with pthumb snippet will create all the options you need, which will correctly tell browsers and devices where to find the favicon.

If you do NOT specify a base path in the <base> tag - add the domain of the site address as [[++site_url]] or {$_modx->config.site_url} on Fenom at the beginning of all links. 

Step 4 - Clearing the cache

MODX, like many other CMS platforms, uses caching to improve performance. After adding or changing a favicon, you may need to clear the cache to see the changes. In MODX Manager:

  • Go to Manage > Clear Cache.
  • Clear the site's cache.

Remember:

Clearing the cache is necessary for changes to take effect.

Browsers also cache favicons, so you may need to clear the browser cache as well, sometimes you need to open the icon file in your browser and press Ctrl+F5.

Additional caching of blocks or pages may be configured on the site - check if there are changes in the source code. 

Step 5: Testing in different browsers

Favicons may display differently in different browsers. It is very important to test your favicon in major browsers such as Chrome, Firefox, Safari, and Edge. Pay attention to:

  • Clarity of the icon.
  • Correct display on different devices.
  • Consistency across browsers.

Summary

Create a favicon, 16x16 or 32x32 pixels, .ico format, and .svg format for automatic generation of different sizes

Upload the favicon to the hosting, use MODX File Manager, FTP or hosting control panel.

Provide links to the favicon in the page template

Clear the MODX and browser cache, make sure the changes have been made.

How to change it later

To change the icon it will be enough to replace ICO and SVG files in the root of the site, then clear the cache. Sometimes pThumb is dumb - delete generated images manually and clear MODX cache.

Conclusion

Installing a favicon in MODX Revolution may seem like an insignificant task, but it's details like these that show the professionalism and personality of your site. Remember that it is important not only to be seen, but also to be remembered!

Written by Oleg Tolochko
Owner, author and editor of the ITWebMind.com

Since 2021 I have been working on freelancing, mainly in the field of advertising, development and promotion of websites. I am interested in programming, in particular Python, PHP, JS to a greater extent for myself and automation of my projects. Also design, SEO, context and targeted advertising, productivity, various areas of management. I am fond of playing guitar, horses, snorkeling. Traveling in Asia at the moment. In this blog I collect my work experience for myself and others, as well as improve my skills in design, website development and promotion, copywriting.

Please rate this article
(5 stars / 1 votes)