How to add a logo image in the header
Important!

This setting is only available for White Labels with the "Page" type. If you’re using “Widget” type, you can’t apply this setting.

Learn more about the difference between White Label Web types here.

How to add logo

1. Open White Label Web settings in your Travelpayouts account. 

2. Open the Custom HTML code tab.

3. Find the following code and delete it:

.tpwl-logo__logo {width: 40px;height: 40px;background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23fff" fill-rule="evenodd" d="M17.026 2.117a3.483 3.483 0 0 1 5.021 4.828l-2.778 2.91a6.391 6.391 0 0 0-.219.235v.005c.011.061.03.145.068.31l1.728 7.487.015.066c.058.243.13.549.105.861a2 2 0 0 1-.222.773c-.145.278-.367.499-.545.675l-.048.048-.4.4c-.278.278-.533.533-.759.721-.232.194-.55.418-.964.491a2 2 0 0 1-1.54-.363c-.338-.251-.522-.594-.643-.871-.118-.27-.232-.612-.357-.985l-1.51-4.533-2.202 2.201a6.644 6.644 0 0 0-.2.205 6.18 6.18 0 0 0 .028.285l.184 1.654.006.059c.025.217.056.49.013.764a2 2 0 0 1-.236.672c-.137.241-.332.435-.487.59l-.042.04-.197.198-.026.026c-.214.214-.419.419-.604.574-.199.167-.458.35-.798.439a2 2 0 0 1-1.378-.137 2.04 2.04 0 0 1-.697-.587 10.212 10.212 0 0 1-.48-.68l-1.588-2.383a5.878 5.878 0 0 0-.066-.098v-.002h-.002a5.934 5.934 0 0 0-.098-.067L2.726 17.34c-.253-.168-.493-.329-.682-.48a2.041 2.041 0 0 1-.587-.696 2 2 0 0 1-.136-1.379 2.04 2.04 0 0 1 .439-.798c.155-.185.36-.389.574-.604l.223-.222.041-.042c.155-.155.349-.35.589-.487a2 2 0 0 1 .673-.236c.273-.044.546-.013.764.012l.058.007 1.654.184c.15.016.226.024.28.028h.005l.003-.003a6.33 6.33 0 0 0 .202-.197l2.201-2.202-4.533-1.51c-.373-.125-.715-.24-.984-.357-.278-.122-.62-.305-.871-.643a2 2 0 0 1-.364-1.54c.073-.415.298-.732.492-.965.188-.226.443-.48.72-.759l.03-.029.37-.37.049-.049c.176-.177.397-.4.674-.545a2 2 0 0 1 .773-.222c.313-.024.618.048.862.105l.066.016 7.459 1.72c.165.04.25.058.312.069h.005c.002 0 .003-.002.004-.003.046-.043.107-.105.225-.227l2.71-2.799Zm3.551 1.374a1.483 1.483 0 0 0-2.114.017l-2.71 2.8-.046.048c-.17.177-.384.399-.653.547a2 2 0 0 1-.824.243c-.306.022-.606-.048-.845-.104l-.065-.015-7.459-1.722a6.532 6.532 0 0 0-.317-.069h-.006a6.532 6.532 0 0 0-.237.23l-.37.37a11.529 11.529 0 0 0-.647.678l.028.012c.175.077.428.162.854.304l6.029 2.01a1 1 0 0 1 .39 1.655L8.24 13.841l-.041.042c-.154.155-.348.35-.589.487a2 2 0 0 1-.673.236c-.273.043-.546.012-.763-.013l-.06-.007-1.653-.183a6.405 6.405 0 0 0-.285-.029l-.003.003c-.041.037-.095.09-.202.198l-.198.197a9.188 9.188 0 0 0-.493.515l.014.012c.112.09.278.201.57.397l2.353 1.568.021.014c.078.052.176.117.268.195a2.003 2.003 0 0 1 .419.492l.013.02 1.569 2.353a9.253 9.253 0 0 0 .408.585l.015-.012c.11-.092.251-.233.5-.482l.198-.197c.107-.107.16-.161.197-.202l.003-.004v-.004a6.341 6.341 0 0 0-.028-.28l-.184-1.654-.006-.059c-.025-.217-.057-.49-.013-.764a2 2 0 0 1 .236-.673c.137-.24.332-.434.487-.588l.042-.042 3.345-3.345a1 1 0 0 1 1.656.39l2.01 6.03c.141.425.227.678.303.853l.013.028.024-.02c.147-.122.336-.31.653-.627l.37-.37c.123-.123.185-.185.228-.233l.003-.004v-.005a6.592 6.592 0 0 0-.07-.317l-1.728-7.488-.015-.064c-.055-.237-.125-.536-.104-.84a2 2 0 0 1 .208-.759c.138-.273.35-.494.519-.67l.045-.047 2.78-2.91a1.483 1.483 0 0 0-.025-2.073Z" clip-rule="evenodd"/></svg>');}

4. Instead, insert the following code with a link to your image:

.tpwl-logo__logo {
     width: 40px;
     height: 40px;
     background: no-repeat url('INSERT LINK HERE');
     background-size: 40px 40px;
Important
The image file must be available on the Internet from any computer, not only on your local drive. You can use images (.png, .jpeg) and .gif as a logo.

5. Save changes

Note!: If you need the logo to be displayed in different languages, make sure to add the code to all language blocks in the Custom HTML code tab. You can find all blocks' languages on the left side of the Custom HTML tab.

How to change the size of the logo

You can resize your logo using the width and height attributes directly in the <img> tag.