Zero Config Favicon Generator

Paste or drop^* a square SVG favicon into the textbox below & hit generate to get your favicons

* Drop support only works in Chrome

What is Generated

Favicons generated are:

Optimised SVG - for modern browsers
512px Square PNG - For your Progressive Web App webmanifest file
192px Square PNG - For your Progressive Web App webmanifest file
180px Square PNG - For your Apple Touch icon
Multi-sized ICO - For all browsers, featuring 64px, 48px, 32px and 16px versions
22px Square PNG - For TYPO3 users to have as an icon in the backend
TYPO3 Square PNG - For TYPO3 users to have as a favicon in the backend to help identify tabs

How to use

In your <head>:

	<link rel="shortcut icon" href="/path/to/favicon.ico" type="image/vnd.microsoft.icon">
	<link rel="icon" href="/path/to/favicon.ico" sizes="any">
	<link rel="icon" href="/path/to/favicon.svg" type="image/svg+xml">
	<link rel="apple-touch-icon" href="/path/to/favicon_180.png">

In your webmanifest for your Progressive Web App:

"icons": [
	{
		"src": "/path/to/favicon_192.png",
		"sizes": "192x192",
		"type": "image/png",
		"purpose": "any"
	},
	{
		"src": "/path/to/favicon_512.png",
		"sizes": "512x512",
		"type": "image/png",
		"purpose": "any"
	}
]

In your TYPO3 LocalConfiguration.php file:

 'EXTENSIONS' => [
	'backend' => [
		'backendFavicon' => '/path/to/favicon_typo3.png',
		'backendLogo' => '/path/to/favicon_22.png',

Created by Mike Street for Liquid Light