{{craftSnippets}}
Home Articles Plugins Starter theme Components on Github Gists About
  • Home
  • Articles
  • Adding favicons to Craft CMS website
Posted on Jul 16, 2019 by Piotr Pogorzelski
Updated on Sep 30, 2019

Adding favicons to Craft CMS website

Favicon from uploaded image on gothub gists
Favicon from static image on github gists
Learn how to create favicons from images uploaded through Craft CMS control panel or from static images using Twig components.
Table of contents:
  • Generating favicons from uploaded image
  • Generating favicons from static image
  • Favicon generators
  • Article change history

In this article, I will describe two methods for generating favicon images - using image uploaded through control panel and using static file living in webroot directory.

Here are variants of favicon that will be generated:

  • 192, 48, 32 and 16 pixels image using <link rel="icon"> tag
  • 180 pixels image using <link rel="apple-touch-icon"> tag - for apple devices

These sizes are based on icons generated by Real favicon generator, most popular online favicon generating service. They will work with all major browsers and devices. I also included 48px size because of google requirements - since may 2019 google mobile search results include website favicon.

Generating favicons from uploaded image #

This method will create favicons from an image uploaded through the control panel. Thanks to that, you can quickly set and change favicon without manually uploading files to the server. If the uploaded image is smaller then specific favicon size, this size will not be outputted. In order to avoid unnecessary database requests, Twig component generating favicon is cached.

To generate favicons from image asset, first set up a few things in control panel:

  • Create global set with handle favicon
  • Create asset field (restricted to uploading images) with handle faviconFile and insert it into favicon global field layout.
  • If your website has multiple sites that need to have different favicons, enable "Manage relations on a per-site basis" asset field setting (available in "advanced" section).
  • Upload image file using favicon global. The image will be cropped to a square.

Now, include this file in <head> section of template:

{# requires global with handle 'favicon' containing asset field with handle 'faviconFile' #}
{# v2 #}
{% cache globally %} 
{% set sizesIcon = [192, 48, 32, 16] %}
{% set sizesAppleTouch = [180] %}
{% if favicon is defined and favicon['faviconFile'] is defined and favicon.faviconFile.exists() and favicon.faviconFile.one().kind == 'image' %}
{# link icon #}
{% for faviconSize in sizesIcon %}
{% set icon = favicon.faviconFile.one() %}
{% set shorterEdge = icon.width > icon.height ? icon.height : icon.width %}
{% if shorterEdge >= faviconSize %}
{% set faviconTransform = {
    width: faviconSize,
    height: faviconSize,
    quality: 100,
    position: 'center-center',
    format: 'png',
} %}
{{tag('link', {
   rel: 'icon',
   sizes: faviconSize~'x'~faviconSize,
   type: 'image/png',
   href: icon.getUrl(faviconTransform),
}) }}
{% endif %}
{% endfor %}
{# link touch icon #}
{% for faviconSize in sizesAppleTouch %}
{% set icon = favicon.faviconFile.one() %}
{% set shorterEdge = icon.width > icon.height ? icon.height : icon.width %}
{% if shorterEdge >= faviconSize %}
{% set faviconTransform = {
    width: faviconSize,
    height: faviconSize,
    quality: 100,
    position: 'center-center',
    format: 'png',
} %}
{{tag('link', {
   rel: 'apple-touch-icon',
   sizes: faviconSize~'x'~faviconSize,
   href: icon.getUrl(faviconTransform),
}) }}
{% endif %}
{% endfor %}
{% endif %}
{% endcache %}

Generating favicons from static image #

This method will generate favicons from static file living in webroot folder, using Imager plugin. Use this method if you don't need the ability to change favicon using control panel and you can't be bothered with setting things up in control panel anyway.

To use this method, place code below in <head> section of your website. Remember to set variable faviconFileName to favicon file path (relative to webroot directory) - if such file does not exist, favicons won't be outputted. Make sure that your favicon file is of at least 192 px in width and height.

{# v1 #}
{# settings #}
{% set faviconFileName = '/static/images/favicon.jpg' %}
{% set sizesIcon = [192, 48, 32, 16] %}
{% set sizesAppleTouch = [180] %}
{# output #}
{% if craft.app.plugins.isPluginEnabled('imager') and craft.imager.transformImage(faviconFileName, {}, null, {suppressExceptions : true}) %}
{% for faviconSize in sizesIcon %}
{% set faviconTransform = {
    width: faviconSize,
    height: faviconSize,
    quality: 100,
    position: 'center-center',
    format: 'png',
} %}
{{tag('link', {
    rel: 'icon',
    sizes: faviconSize ~ 'x' ~ faviconSize,
    type: 'image/png',
    href: craft.imager.transformImage(faviconFileName, faviconTransform, null, {suppressExceptions : true}),
})}}
{% endfor %}
{# link touch icon #}
{% for faviconSize in sizesAppleTouch %}
{% set faviconTransform = {
    width: faviconSize,
    height: faviconSize,
    quality: 100,
    position: 'center-center',
    format: 'png',
} %}
{{tag('link', {
    rel: 'apple-touch-icon',
    sizes: faviconSize ~ 'x' ~ faviconSize,
    href: craft.imager.transformImage(faviconFileName, faviconTransform, null, {suppressExceptions : true}),
})}}
{% endfor %}
{% endif %}

Favicon generators #

If you want greater control over your favicons or need to adhere to specific requirements, you can use Real favicon generator. There are also gulp scripts that will generate a favicon for you - like gulp-favicons.

Article change history #

  • 30 September 2019 - added method that generates a favicon from a static file using Imager. Updated favicon Twig component generating a favicon from uploaded assets to use Twig tag function.

TAGS:
#twig component
If you want to get latest updates on Craft CMS tutorials and components, follow me on Twitter or subscribe to RSS feed.
Quick links for this article:
Favicon from uploaded image on gothub gists
Favicon from static image on github gists
Articles on blog:
  • Frontend testing for Craft CMS websites with Codeception and Cypress
  • Building reactive Craft Commerce product page with Sprig plugin
  • Dynamically generated PDF attachments for Freeform submissions
  • Using template hooks in Craft CMS
  • Alpine JS modal component for Craft CMS
  • Using template UI elements to extend Craft CMS control panel
  • Matrix within a Matrix - possible solutions for Craft CMS
  • Universal email template for Craft CMS
  • Creating attributes table from entry fields in Craft CMS
  • Namespacing forms in Craft CMS
  • Creating map-based navigation for Craft CMS
  • Placeholder image macro for Craft CMS
  • Building AJAX contact form with Craft CMS
  • Using incognito field plugin for Craft CMS
  • Email footer creator made with Craft CMS
  • Infinite scrolling and lazy loading with Craft CMS
  • Using Javascript in Twig templates with Craft CMS
  • Twig templating tips and tricks for Craft CMS
  • Basic SEO functionality for Craft CMS
  • Working with dates in Craft CMS templates
  • Working with SVG images in Craft CMS templates
  • Responsive and lazy-loaded youtube videos with Craft CMS
  • Debugging and inspecting Twig templates in Craft CMS
  • Creating article excerpts with Twig component in Craft CMS
  • Adding favicons to Craft CMS website
  • Truncating text with Twig macros in Craft CMS
  • Universal language switcher for Craft CMS
  • Read time macro for Craft CMS
  • Using attr() function to render HTML attributes in Craft CMS
  • Building dynamic, AJAX based pagination for Craft CMS
  • How to add Disqus comments to Craft CMS website
  • Ellipsis pagination component for Craft CMS
  • Converting email addresses into links using Twig macro
  • Breadcrumb created from URL for Craft CMS
  • Best developer-oriented Craft CMS plugins
  • Search autocomplete component for Craft CMS
  • RSS feed - template component for Craft CMS
  • Testing emails sent by Craft CMS using Mailtrap
  • Quick edit link - Twig component for Craft CMS
  • Filtering entries in control panel using Searchit plugin
  • Fetching routes into Twig templates in Craft CMS


Frontend testing for Craft CMS websites with Codeception and Cypress

Building reactive Craft Commerce product page with Sprig plugin

Dynamically generated PDF attachments for Freeform submissions

Using template hooks in Craft CMS

Alpine JS modal component for Craft CMS

Using template UI elements to extend Craft CMS control panel

Matrix within a Matrix - possible solutions for Craft CMS

Universal email template for Craft CMS

Copyright ©2023 Piotr Pogorzelski