Favicons

Die Icons in dieser Sammlung wurden für unterschiedliche Verwendungszwecke gestaltet, die unten aufgelistet sind.

Verwendung Html Bild Typ Größe
Broswer Tab 
<link rel="icon" href="your_path/favicon.ico" sizes="any">
 ico 32x32 
<link rel="icon" href="your_path/Berlin_de.svg" type="image/svg+xml">
 svg 500x500
Safari Pinned Tab 
<link rel="mask-icon" href="your_path/safari-pinned-tab.svg" color="#000000">
 svg 700x700
Apple Touch Icon 
<link rel="apple-touch-icon" href="your_path/apple-touch-icon.png">
 png 180x180
Web applications as native apps 
<link rel="manifest" href="your_path/manifest.json">
 - json -
Berlin_de-192x192.png: see manifest.json below for details png 192x192
Berlin_de-512x512.png: see manifest.json below for details png 512x512
Facebook-/Whatsapp posts etc 
<meta name="og:image" content="your_path/Berlin_de_FB_Social.png">
<meta name="og:image:secure_url" content="your_path/Berlin_de_FB_Social.png">
 png 1080×565
Microsoft Tile 
<meta name="msapplication-config" content="your_path/browserconfig.xml">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
 - xml -
mstile-150x150.png: see browserconfig.xml below for details png 150x150
Complete Html: 
<link rel="icon" href="your_path/favicon.ico" sizes="any">
<link rel="icon" href="your_path/Berlin_de.svg" type="image/svg+xml">
<link rel="mask-icon" href="your_path/safari-pinned-tab.svg" color="#000000">
<link rel="apple-touch-icon" href="your_path/apple-touch-icon.png">
<link rel="manifest" href="your_path/manifest.json">
<meta name="og:image" content="your_path/Berlin_de_FB_Social.png">
<meta name="og:image:secure_url" content="your_path/Berlin_de_FB_Social.png">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="your_path/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
manifest.json 
{
	"icons": [
		{
			"src": "your_path/Berlin_de-192x192.png", 
			"type": "image/png", 
			"sizes": "192x192"
		},
		{
			"src": "your_path/Berlin_de-512x512.png", 
			"type": "image/png", 
			"sizes": "512x512"
		}
	]
}
browserconfig.xml 
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="your_path/mstile-150x150.png">
            <TileColor>#2b5797</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Downloads