override Odoo favicon custom Tutorial: Quick Guide

First, we will override Odoo default favicon custom in this step‑by‑step tutorial. Moreover, we will explain each code block clearly. As a result, you will learn how to inject your own favicon in Odoo 17 or 18. Finally, you will improve your site branding and performance.

Note: You can also review the official Odoo developer guide for more details: https://www.odoo.com/documentation/

---

Prerequisites and Setup

First, you need an Odoo development environment. You should have:

1. Odoo 17 or 18 installed.
2. Access to your custom module folder (e.g., addons/my_favicon_module).
3. Basic knowledge of Python and XML.

Next, create a new module directory:

cd /opt/odoo/addons
mkdir my_favicon_module
cd my_favicon_module
touch __init__.py __manifest__.py
mkdir models controllers views

This structure will hold your models, controllers, and views.

---

Add Custom Field for Favicon

To store your favicon per company, you must add a new field.

Extend res.company Model

First, open models/__init__.py and import your model:

# models/__init__.py
from . import res_company

Then create models/res_company.py:

# models/res_company.py
from odoo import models, fields

class ResCompany(models.Model):
    _inherit = "res.company"

    custom_fab_icon = fields.Binary(
        string="Custom Favicon",
        help="Upload a custom favicon image (PNG or ICO)."
    )

Explanation:

• We inherit res.company.
• We add a binary field called custom_fab_icon.
• We use help to guide users.

Update Company Form View

Next, add the field to the company settings form. Create views/company_view.xml:

<!-- views/company_view.xml -->
<odoo>
  <record id="view_company_form_inherit_favicon" model="ir.ui.view">
    <field name="name">res.company.form.override.favicon</field>
    <field name="model">res.company</field>
    <field name="inherit_id" ref="base.view_company_form"/>
    <field name="arch" type="xml">
      <xpath expr="//group[@name='legal_info']" position="after">
        <group string="Favicon Settings">
          <field name="custom_fab_icon" widget="image" class="oe_avatar"/>
        </group>
      </xpath>
    </field>
  </record>
</odoo>

Explanation:

• We inherit the default company form view.
• We insert a new group named “Favicon Settings.”
• We render the image field with the image widget.

---

Override Default Favicon in Odoo via Controller

Now we will override Odoo default favicon custom by adding a route that serves the custom image.

Create a Custom HTTP Controller

Create controllers/__init__.py:

# controllers/__init__.py
from . import favicon_controller

Then create controllers/favicon_controller.py:

# controllers/favicon_controller.py
import base64
from odoo import http
from odoo.http import request, Response

class FaviconController(http.Controller):

    @http.route('/favicon.ico', type='http', auth='user', cors='*')
    def serve_custom_favicon(self, **kwargs):
        """Serve the custom favicon or fallback to the default."""
        # Get current company record
        company = request.env.user.company_id
        fab_data = company.custom_fab_icon
        if fab_data:
            # Decode base64 and return binary
            image_data = base64.b64decode(fab_data)
            return Response(
                image_data,
                status=200,
                mimetype='image/png'
            )
        # Fallback: let Odoo default handle it
        return request.redirect('/web/static/src/img/favicon.ico')

Explanation:

1. We import http, request, and Response.
2. We define /favicon.ico route, which matches default path.
3. We fetch custom_fab_icon from res.company.
4. If we find a custom icon, we decode it and return it with mimetype='image/png'.
5. Otherwise, we redirect to the default favicon.

Define Route and Response

We used auth='user' so only logged‑in users see the favicon. However, you may switch to auth='public' if needed.

---

Customize QWeb Template for Favicon

Although the controller route overrides /favicon.ico, you may also inject link tags into HTML pages. Create views/assets_template.xml:

<!-- views/assets_template.xml -->
<odoo>
  <template id="assets_frontend" inherit_id="web.assets_frontend">
    <xpath expr="//link[@rel='shortcut icon']" position="replace">
      <link rel="shortcut icon" href="/favicon.ico"/>
    </xpath>
  </template>
</odoo>

Explanation:

• We inherit web.assets_frontend.
• We replace the existing <link rel="shortcut icon"> with our dynamic route.
• We ensure all pages load /favicon.ico route.

---

Update Module Manifest and Init Files

Update manifest.py

Open __manifest__.py and fill metadata:

# __manifest__.py
{
    'name': 'Custom Favicon Override',
    'version': '1.0',
    'category': 'Web',
    'summary': 'Override Odoo default favicon custom with company field',
    'description': """
        This module overrides the default favicon in Odoo.
        You can upload a custom icon per company.
    """,
    'depends': ['web', 'base'],
    'data': [
        'views/company_view.xml',
        'views/assets_template.xml',
    ],
    'controllers': [
        'controllers/favicon_controller.py'
    ],
    'installable': True,
    'auto_install': False,
}

Update init.py

Ensure __init__.py includes all packages:

# __init__.py
from . import models
from . import controllers

---

Restart Odoo and Clear Cache

First, restart your Odoo server:

sudo systemctl restart odoo

Next, clear browser cache or append a cache‑buster query:

<link rel="shortcut icon" href="/favicon.ico?v=2"/>

However, we recommend using fingerprinted assets in production for better caching.

---

Test and Verify Custom Favicon

First, go to Settings ▶️ Companies. Then upload a PNG or ICO file in Favicon Settings. After that:

1. Save your company.
2. Refresh your browser (Ctrl+F5).
3. Observe your new icon in the browser tab.

Moreover, open developer tools (F12) to confirm /favicon.ico returns 200 OK with your image.

---

Performance and Caching Tips

• Always optimize your favicon file (PNG 32×32 or ICO).
• Moreover, leverage Odoo’s asset bundling by placing your route in web.assets_frontend.
• Finally, set proper HTTP headers if you serve static icons frequently.

---

Troubleshooting and FAQ

Q1: Why does my old favicon still show?

First, clear your browser cache. Next, restart Odoo and refresh with a cache‑buster.

Q2: How do I support multiple file types?

You can detect file extension in your controller:

if fab_data.endswith(';base64'):
    # handle ICO or PNG differently

Q3: How can I serve favicon for public users?

Use auth='public' in your route definition.

---

Conclusion

In conclusion, you learned how to override Odoo default favicon custom by:

1. Adding a custom field on res.company.
2. Serving the icon with a custom HTTP controller.
3. Overriding the QWeb template to load /favicon.ico.
4. Updating your manifest and init files.
5. Restarting Odoo and clearing caches.

Now, you can brand your Odoo instance with a unique favicon. Moreover, you can adapt this approach to serve other static assets. If you found this guide helpful, please share it or link back to your blog for best practices.