docs: add icon and centered readme header

README.md

@@ -1,7 +1,20 @@
-# bottles-opener
+<p align="center">
+  <img width="200" src="res/bottles-opener.svg" alt="bottles-opener">
+</p>
 
-bottles-opener is a CLI for linux that lets you double-click a file and have it open in its Windows program, inside its bottle.
-Works with FL Studio, Microsoft Office, Photoshop, Ableton and anything else you run through [Bottles](https://usebottles.com).
+<h1 align="center">bottles-opener</h1>
+
+<h3 align="center">Double-click a file and it opens in its Windows program, inside its bottle.</h3>
+
+<p align="center">
+  Works with FL Studio, Microsoft Office, Photoshop, Ableton and anything else you run through <a href="https://usebottles.com">Bottles</a>.
+</p>
+
+<h5 align="center">
+  <a href="#how-to-install">Install</a> |
+  <a href="#features">Features</a> |
+  <a href="https://ko-fi.com/felitendo">Ko-Fi</a>
+</h5>
 
 You install FL Studio in Bottles, double-click your `.flp` and... your file manager asks what an `.flp` is. This tool reads which files your Windows programs registered in their bottle - the same list Windows uses - teaches your system those types, gives them the program's icons and hands the file over the way Explorer would. One command and your files _✨just open✨_ (like on windows).
 
@@ -71,7 +84,7 @@ No root? `make install PREFIX=~/.local` works too.
 
 Needs `bash`, `python3` with PyYAML and icoextract (Bottles needs both itself) and `update-mime-database`.
 
-## How it works
+## Features
 
 - **Which files:** read from the bottle's registry, like Windows does (`.flp` → `FL64.flp.26` → `FL64.exe "%1"`). Programs that registered nothing are matched against a built-in list: all of Office, FL Studio, Ableton, Cubase, Photoshop, Illustrator, Affinity, AutoCAD, SketchUp and more.
 - **Unknown extensions** (`.flp`, `.msg`, `.als`, ...) get a MIME type in `~/.local/share/mime/packages/bottles-opener.xml`, named like in Windows ("FL Studio project file"). Where Linux means something else by an extension (`.mpp` is Musepack, `.fst` a tracker module) the file's signature tells them apart.

res/bottles-opener.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-39.6 -28.1 596.2 596.2" width="512" height="512">
+  <defs>
+    <linearGradient id="glass" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#5fd0ff"/><stop offset=".45" stop-color="#2aa7e8"/><stop offset="1" stop-color="#0c62a0"/></linearGradient>
+    <linearGradient id="cork" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#e2ad74"/><stop offset="1" stop-color="#a86f3c"/></linearGradient>
+    <linearGradient id="paper" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#e6edf5"/></linearGradient>
+    <filter id="soft" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="10" stdDeviation="12" flood-color="#04213a" flood-opacity=".35"/></filter>
+  </defs>
+  <g filter="url(#soft)">
+    <!-- bottle, tilted -->
+    <g transform="translate(40 50) rotate(-24 256 300)">
+      <!-- the file, popping out of the neck: in the bottle's own frame, narrower than the lip -->
+      <path d="M221 12 L269 12 L291 34 L291 128 L221 128 Z" fill="url(#paper)" stroke="#c9d5e3" stroke-width="2.5" stroke-linejoin="round"/>
+      <path d="M269 12 L269 28 C269 31.5 271.5 34 275 34 L291 34 Z" fill="#c9d5e3"/>
+      <rect x="232" y="48" width="38" height="7.5" rx="3.75" fill="#1793d1"/>
+      <rect x="232" y="64" width="48" height="6.5" rx="3.25" fill="#9fb0c4"/>
+      <rect x="232" y="78" width="48" height="6.5" rx="3.25" fill="#9fb0c4"/>
+      <rect x="232" y="92" width="30" height="6.5" rx="3.25" fill="#9fb0c4"/>
+      <path d="M226 128 L226 206 C226 238 166 250 166 300 L166 412 C166 432 182 448 202 448 L310 448 C330 448 346 432 346 412 L346 300 C346 250 286 238 286 206 L286 128 Z" fill="url(#glass)"/>
+      <path d="M196 304 C196 276 212 262 232 254" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="14" stroke-linecap="round"/>
+      <path d="M196 332 L196 410" stroke="#fff" stroke-opacity=".35" stroke-width="14" stroke-linecap="round"/>
+      <path d="M244 140 L244 196" stroke="#fff" stroke-opacity=".4" stroke-width="8" stroke-linecap="round"/>
+      <rect x="216" y="108" width="80" height="26" rx="9" fill="#0b5a92"/>
+    </g>
+  </g>
+  <!-- pop -->
+  <g stroke="#f5a524" stroke-width="12" stroke-linecap="round">
+    <line x1="210" y1="24" x2="222" y2="0"/>
+    <line x1="264" y1="60" x2="292" y2="48"/>
+    <line x1="104" y1="92" x2="78" y2="80"/>
+    <line x1="98" y1="146" x2="70" y2="150"/>
+  </g>
+</svg>