1. Documentation
  2. Application
  3. Streams Platform
  4. Favicons
Edit this Page

Favicons

The favicons functions renders multiple favicon tags based on a single source.

You can use this function to automatically generate comprehensive and modern favicon tags:

{{ favicons('theme::img/favicon.png') }} // Use a 512px source for example

The above function will generate the below favicons using the streams::partials/favicons view:

<link rel="icon" type="image/png" href="{{ image(source).resize(16, 16).path }}" sizes="16x16"/>
<link rel="icon" type="image/png" href="{{ image(source).resize(32, 32).path }}" sizes="32x32"/>
<link rel="icon" type="image/png" href="{{ image(source).resize(96, 96).path }}" sizes="96x96"/>
<link rel="icon" type="image/png" href="{{ image(source).resize(128, 128).path }}" sizes="128x128"/>
<link rel="icon" type="image/png" href="{{ image(source).resize(196, 196).path }}" sizes="196x196"/>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="{{ image(source).resize(57, 57).path }}"/>
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="{{ image(source).resize(60, 60).path }}"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ image(source).resize(72, 72).path }}"/>
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="{{ image(source).resize(76, 76).path }}"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ image(source).resize(114, 114).path }}"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ image(source).resize(120, 120).path }}"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ image(source).resize(144, 144).path }}"/>
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ image(source).resize(152, 152).path }}"/>