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
faviconFileand insert it intofaviconglobal 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
faviconglobal. 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.
