diff --git a/docs/images/logo.png b/docs/images/logo.png
new file mode 100644
index 0000000..bcb4a5a
Binary files /dev/null and b/docs/images/logo.png differ
diff --git a/frontend/index.html b/frontend/index.html
index 7e54f95..690efb7 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Docling Studio</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/png" href="/logo.png">
 </head>
 <body>
   <div id="app"></div>
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..bcb4a5a
Binary files /dev/null and b/frontend/public/logo.png differ
diff --git a/frontend/src/app/App.vue b/frontend/src/app/App.vue
index 366d39a..1a54224 100644
--- a/frontend/src/app/App.vue
+++ b/frontend/src/app/App.vue
@@ -7,7 +7,7 @@
         </svg>
       </button>
       <div class="topbar-logo">
-        <span class="topbar-logo-icon">D</span>
+        <img src="/logo.png" alt="Docling Studio" class="topbar-logo-icon" />
         <span class="topbar-logo-text">Docling Studio</span>
       </div>
       <div class="topbar-spacer" />
@@ -167,16 +167,10 @@ body {
 }
 
 .topbar-logo-icon {
-  width: 26px;
-  height: 26px;
-  background: var(--accent);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-  font-weight: 700;
-  font-size: 13px;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  object-fit: contain;
 }
 
 .topbar-logo-text {
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 8b054e7..e78b4c2 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -2,9 +2,7 @@
   <div class="home-page">
     <div class="home-center">
       <div class="hero">
-        <div class="hero-icon">
-          <span class="hero-d">D</span>
-        </div>
+        <img src="/logo.png" alt="Docling Studio" class="hero-logo" />
         <h1 class="hero-title">{{ t('home.title') }}</h1>
         <p class="hero-subtitle">{{ t('home.subtitle') }}</p>
       </div>
@@ -116,21 +114,12 @@ onMounted(() => {
   text-align: center;
 }
 
-.hero-icon {
+.hero-logo {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
   margin-bottom: 4px;
-}
-
-.hero-d {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  background: var(--accent);
-  color: white;
   border-radius: var(--radius-lg);
-  font-weight: 700;
-  font-size: 26px;
 }
 
 .hero-title {
diff --git a/frontend/src/pages/StudioPage.vue b/frontend/src/pages/StudioPage.vue
index 2bd6791..06c4a4e 100644
--- a/frontend/src/pages/StudioPage.vue
+++ b/frontend/src/pages/StudioPage.vue
@@ -2,9 +2,7 @@
   <!-- STATE 1: No document selected — Import view -->
   <div v-if="!selectedDoc" class="import-page">
     <div class="import-center">
-      <div class="import-logo">
-        <span class="logo-icon">D</span>
-      </div>
+      <img src="/logo.png" alt="Docling Studio" class="import-logo-img" />
       <h1 class="import-title">{{ t('studio.title') }}</h1>
       <p class="import-subtitle">{{ t('studio.subtitle') }}</p>
       <DocumentUpload />
@@ -482,21 +480,12 @@ onBeforeUnmount(() => {
   gap: 20px;
 }
 
-.import-logo {
+.import-logo-img {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
   margin-bottom: 8px;
-}
-
-.import-logo .logo-icon {
-  width: 48px;
-  height: 48px;
-  background: var(--accent);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   border-radius: var(--radius);
-  font-weight: 700;
-  font-size: 22px;
 }
 
 .import-title {
