diff --git a/index.html b/index.html
index 6faa4bb..60cfc83 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>BitePlan</title>
   </head>
   <body>
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..28057c2
Binary files /dev/null and b/public/favicon.png differ
diff --git a/src/components/InfoPanel.vue b/src/components/InfoPanel.vue
index 66bb72e..3edd08d 100644
--- a/src/components/InfoPanel.vue
+++ b/src/components/InfoPanel.vue
@@ -10,7 +10,7 @@
 
       <div class="sheet-top">
         <div class="app-identity">
-          <div class="app-icon">B</div>
+          <img class="app-icon" :src="appIcon" alt="BitePlan" />
           <div>
             <div class="app-name">BitePlan</div>
             <div class="app-version">Versione {{ version }}</div>
@@ -50,6 +50,7 @@
 
 <script setup>
 import pkg from '../../package.json'
+import appIcon from '../../assets/icon-only.png'
 defineProps({ modelValue: Boolean })
 defineEmits(['update:modelValue'])
 const version = pkg.version
@@ -102,15 +103,8 @@ const version = pkg.version
 .app-icon {
   width: 48px;
   height: 48px;
-  background: var(--color-primary);
-  color: #fff;
   border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.4rem;
-  font-weight: 800;
-  letter-spacing: -0.02em;
+  object-fit: cover;
 }
 
 .app-name {
