Generate Web Icons in Python with PIL

Referencing this article regarding formats and sizes.

Requires PIL. Create a virtual env in a working directory and install:

python -m venv .venv
source .venv/bin/activate
pip install pillow

In Sketch, or other vector editing application, from a 512px square artboard, export a SVG as icon.svg

Export again as a 512px square PNG, naming the file icon-512.png

Noting where those files are saved, in a Python shell, run:

from PIL import Image
logo = Image.open('/path/to/icon-512.png')
logo.resize((32,32)).save('/path/to/favicon.ico',format='ICO')
logo.resize((180,180)).save('/path/to/apple-touch-icon.png',format='png')
logo.resize((192,192)).save('/path/to/icon-192.png',format='png')

Move all the images to the root of the website.

Create a new file at the root of the website named manifest.webmanifest with the content:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Load the images, in the head of the document add:

Feedback?

Email us at enquiries@kinsa.cc.