Generate Favicon for Website

May 21, 2019
manifest.json, browserconfig.xml, apple-touch-icon, etc.

Favicon used to be just one favicon.ico file cater for desktop display, but nowadays there are variously configurations for multiple platform

There are various favicon generator, I decide to go ahead with https://realfavicongenerator.net/

The following output is generated.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Content of site.webmanifest.

NOTE: I renamed site.webmanifest to manifest.json. Refer to Web App Manifest File.

{
    "name": "MyApp",
    "short_name": "MyApp",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

NOTE: Need to fill in name or short_name and include start_url.

Content of browserconfig.xml.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

List of image files.

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon.ico
favicon-16x16.png
favicon-32x32.png
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
safari-pinned-tab.svg
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.