Favikonki
Wygeneruj zestaw favikonek w oparciu o jedną grafikę. Preferowany rozmiar grafiki to przynajmniej 196x196.
favicon.ico
16 x 16
favicon-16x16.png
16 x 16
favicon-32x32.png
32 x 32
favicon-96x96.png
96 x 96
favicon-128x128.png
128 x 128
favicon-196x196.png
196 x 196
apple-touch-icon-57x57.png
57 x 57
apple-touch-icon-60x60.png
60 x 60
apple-touch-icon-72x72.png
72 x 72
apple-touch-icon-76x76.png
76 x 76
apple-touch-icon-114x114.png
114 x 114
apple-touch-icon-120x120.png
120 x 120
apple-touch-icon-144x144.png
144 x 144
apple-touch-icon-152x152.png
152 x 152
apple-touch-icon-167x167.png
167 x 167
apple-touch-icon-180x180.png
180 x 180
apple-touch-icon.png
144 x 144
mstile-70x70.png
70 x 70
mstile-150x150.png
150 x 150
mstile-270x270.png
270 x 270
mstile-310x310.png
310 x 310
mstile-310x150.png
310 x 150
msapplication-icon-144x144.png
144 x 144
android-chrome-228x228.png
228 x 228
android-chrome-192x192.png
192 x 192
android-chrome-512x512.png
512 x 512
favicon-228x228.png
228 x 228
Nagłówek (head) pliku HTML
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128"> <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196"> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" sizes="144x144"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57.png" sizes="57x57"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-60x60.png" sizes="60x60"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72.png" sizes="72x72"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-76x76.png" sizes="76x76"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114.png" sizes="114x114"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-120x120.png" sizes="120x120"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144.png" sizes="144x144"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152.png" sizes="152x152"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-167x167.png" sizes="167x167"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-180x180.png" sizes="180x180"/> <meta name="application-name" content=" " /> <meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileImage" content="/mstile-144x144.png" /> <meta name="msapplication-square70x70logo" content="/mstile-70x70.png"/> <meta name="msapplication-square150x150logo" content="/mstile-150x150.png"/> <meta name="msapplication-square270x270logo" content="/mstile-270x270.png"/> <meta name="msapplication-square310x310logo" content="/mstile-310x310.png"/> <meta name="msapplication-wide310x150logo" content="/mstile-310x150.png" /> <link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
Wpisy do nuxt.config.js
meta: [
// Windows icons
{ name: 'application-name', content: 'Nazwa aplikacji' },
{ name: 'msapplication-TileColor', content: '#FFFFFF' },
{ name: 'msapplication-TileImage', content: '/mstile-144x144.png' },
{ name: 'msapplication-square70x70logo', content: '/mstile-70x70.png' },
{ name: 'msapplication-square150x150logo', content: '/mstile-150x150.png' },
{ name: 'msapplication-square270x270logo', content: '/mstile-270x270.png' },
{ name: 'msapplication-square310x310logo', content: '/mstile-310x310.png' },
{ name: 'msapplication-wide310x150logo', content: '/mstile-310x150.png' },
],
link: [
// Favicons
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'icon', type: 'image/png', href: '/favicon-16x16.png', size: '16x16' },
{ rel: 'icon', type: 'image/png', href: '/favicon-32x32.png', size: '32x32' },
{ rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', size: '96x96' },
{ rel: 'icon', type: 'image/png', href: '/favicon-128x128.png', size: '128x128' },
{ rel: 'icon', type: 'image/png', href: '/favicon-196x196.png', size: '196x196' },
// Apple icons
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon.png', size: '144x144' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-57x57.png', size: '57x57' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-60x60.png', size: '60x60' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-72x72.png', size: '72x72' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-76x76.png', size: '76x76' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-114x114.png', size: '114x114' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-120x120.png', size: '120x120' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-144x144.png', size: '144x144' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-152x152.png', size: '152x152' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-167x167.png', size: '167x167' },
{ rel: 'apple-touch-icon-precomposed', href: '/apple-touch-icon-180x180.png', size: '180x180' },
// Other icons
{ rel: 'icon', type: 'image/png', href: '/favicon-228x228.png', size: '228x228' },
],browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-270x270.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>