Add a Logo to an XLSForm: ODK, Kobo, SurveyCTO
To add a logo to an XLSForm, add a note row with an empty label and the logo's file name in the image column, such as ngo_logo.png, then upload that file with the form. ODK Collect, ODK Web Forms, KoboToolbox and SurveyCTO all show it like any other image in a question, and every example below compiles with pyxform and ODK Validate, the same check ODK Central runs when you upload a form.
What is the syntax for a logo in XLSForm?
A note with only an image is valid. The ODK documentation says the image column can hold an image "in addition to or instead of" a text label:
| type | name | label | image |
|---|---|---|---|
| note | logo | ngo_logo.png | |
| text | hh_id | Enter the household ID from the listing sheet. |
Three rules decide whether it shows:
- The type is
note, notimage. Animagerow asks the enumerator to take a photo. A note only displays. - The cell holds a file name, not a path. Type
ngo_logo.png, neverC:\Pictures\ngo_logo.pngor a web address. - The name must match the file exactly.
NGO_Logo.PNGandngo_logo.pngare two different files to ODK Central and to the phone.
The column can also be called media::image. Both spellings compile to the same form.
How do I upload the logo file?
The XLSForm only names the file. The image itself travels as a form attachment:
- ODK Central. Upload the XLSForm to a draft. Central reads the
imagecolumn, listsngo_logo.pngas an expected file and asks you to attach it before you publish. - KoboToolbox. Upload the XLSForm, then add the image under the project's Settings > Media, and redeploy.
- SurveyCTO. Attach the image as a media file when you upload the form definition.
Collect downloads the attachment with the form and keeps it in the form's media folder, so the logo shows offline once the form is on the phone.
Adding a file called form_logo.png without a note row no longer puts a logo on the form. ODK Collect removed the form start page that showed it in version 1.4.13, and the KoboToolbox team says their form_logo.png method is no longer supported. Use a note row as shown here.
How do I show the logo with the survey title on one screen?
On its own, the logo note fills a whole screen and the enumerator swipes past it. Put it in a group with the field-list appearance, together with a title and a short introduction, and the three show as one welcome screen:
| type | name | label | image | appearance |
|---|---|---|---|---|
| begin_group | welcome | field-list | ||
| note | logo | ngo_logo.png | ||
| note | survey_title | ## Household WASH survey 2026 | ||
| note | intro | Thank you for meeting us. This interview takes about 30 minutes. | ||
| end_group | ||||
| select_one yes_no | consent | Does the respondent agree to take part? |
| list_name | name | label |
|---|---|---|
| yes_no | 1 | Yes |
| yes_no | 0 | No |
The ## makes the title bigger. The other Markdown and colour options are in styling text in XLSForm.
Can the logo appear above the form title or on every page?
Not above the title. Collect shows the form title in the top bar, outside the form, and in a question it always draws the image below the label text. A logo note with no label is the closest you can get to a header.
To repeat the logo on later screens, add a logo note as the first row of each field-list group. Every row needs its own name, but all of them can point to the same file:
| type | name | label | image | appearance |
|---|---|---|---|---|
| begin_group | section_a | Section A: Household | field-list | |
| note | logo_a | ngo_logo.png | ||
| integer | hh_size | How many people live in this household? | ||
| end_group | ||||
| begin_group | section_b | Section B: Water | field-list | |
| note | logo_b | ngo_logo.png | ||
| select_one water_source | main_water | What is the main source of drinking water? | ||
| end_group |
| list_name | name | label |
|---|---|---|
| water_source | 1 | Piped water |
| water_source | 2 | Tube well or borehole |
| water_source | 3 | Protected dug well |
| water_source | 4 | Surface water |
| water_source | -96 | Other |
The file is downloaded once, however many rows use it. A KoboToolbox user found the same thing in a web form set to show one page per group: the logo appears only on the pages whose group starts with a logo note.
How do I show a different logo for each language?
Add one image column per language, named like the label columns. When the enumerator switches to French, the French logo replaces the English one. The plain image column is the fallback for any language without its own logo:
| type | name | label::English (en) | label::French (fr) | image | image::English (en) | image::French (fr) |
|---|---|---|---|---|---|---|
| note | logo | logo_en.png | logo_en.png | logo_fr.png | ||
| text | hh_id | Enter the household ID. | Saisissez l'identifiant du ménage. |
Upload both files. If the form has plain label columns but an image::English (en) column, pyxform warns that the languages do not match; name every column the same way. Setting up the language columns is covered in adding languages to an ODK form.
How do I add several logos, such as a donor and a partner?
Join them into one banner image before you upload it. A single wide picture keeps the logos in the order and spacing you chose, on every screen size. If you need them as separate files, give each its own note inside the welcome group:
| type | name | label | image | appearance |
|---|---|---|---|---|
| begin_group | partners | field-list | ||
| note | logo_ngo | ngo_logo.png | ||
| note | logo_donor | donor_logo.png | ||
| note | funded_by | This survey is funded by the donor shown above. | ||
| end_group |
Each note shows its image on its own line, one below the other, so three or four separate logos make the enumerator scroll before the first question.
What size should the logo be?
Keep the file small, because every phone downloads it with the form, often over mobile data. A PNG a few hundred pixels wide is enough for a phone screen. The ODK documentation's image advice applies to logos too:
- Use one size for every image in the form, for example 300 x 300 pixels.
- Keep the background simple, with even space around the logo.
- Test in both light and dark mode. A transparent PNG with dark text can disappear on a dark screen; a white background avoids that.
If the logo holds small text, such as a project name or a website address, you can add a big-image column with a larger copy. Tapping the logo then opens the large file full screen. Most logos do not need it.
Common mistakes when adding a logo
Only one of these stops the form from compiling. The rest show up on the phone or in ODK Central:
| You wrote | Write instead | What you will see |
|---|---|---|
A note row with no label and no image | Put the file name in the image column | The survey element named 'logo' has no label or hint. |
Type image for the logo row | Type note | A photo question instead of a logo, with the warning Use the max-pixels parameter to speed up submission sending and save storage space. |
image::English (en) next to a plain label column | label::English (en) and image::English (en) | Language 'English (en)' is missing the survey label column. |
NGO_Logo.PNG in the cell, ngo_logo.png uploaded | The exact file name, case included | ODK Central lists the file as still expected; no logo on the phone |
Only a form_logo.png attachment | A note row with the image column | No error and no logo in Collect |
| A logo note before each question in a long form | One welcome screen, or one note per field-list group | No error; extra swipes on every screen |
For other messages, see common XLSForm errors, or paste the form into the free XLSForm validator.
Does this work the same in ODK, KoboToolbox and SurveyCTO?
The note row is the same everywhere. What differs is the column name and where the file goes:
| Platform | Image column | Where you upload the file |
|---|---|---|
| ODK Central (Collect and Web Forms) | image or media::image | Attach it to the form draft before publishing |
| KoboToolbox (KoboCollect and web forms) | image or media::image | Project Settings > Media, then redeploy |
| SurveyCTO | media:image | Attach it with the form definition |
SurveyCTO's own form template spells the column with a single colon, media:image. If one form must run on more than one platform, use the spelling the target platform's template uses, and check the logo in that app before fieldwork.
Is a logo worth adding?
For many surveys, yes. Respondents often ask who is collecting the data, and a recognisable logo on the consent screen answers that before the enumerator says a word. It also helps enumerators who carry forms for several projects open the right one. Keep it to the first screen, next to the consent text, and leave the later screens for questions. Other ways to change how questions look are in the XLSForm appearance column guide.
You can ask for it in plain language instead: "add our logo and a welcome screen with the survey title before the consent question". LooprAI writes the rows and compiles the form with pyxform before anything is saved; then attach the image in the form's media.
Next: XLSForm appearance column →
Frequently Asked Questions
How do I add a logo to an ODK form?
Add a note row at the top of the survey sheet, leave its label empty and type the file name, such as ngo_logo.png, in the image column. Upload the XLSForm to ODK Central, attach the image to the draft when Central asks for it, then publish.
Why does my form_logo.png not show in ODK Collect?
ODK Collect removed the form start page that displayed form_logo.png in version 1.4.13, and KoboToolbox no longer supports the method either. A file with that name is ignored. Show the logo with a note row and the image column instead.
How do I add a logo in KoboToolbox?
Add a note row with an empty label and the file name in the image or media::image column of your XLSForm. Upload the form, add the image file under the project's Settings > Media, and redeploy so KoboCollect and web forms download it.
Can I show the logo on every page of the form?
Yes, by starting each field-list group with its own logo note. Every note needs a unique name, such as logo_a and logo_b, but all of them can use the same file. The phone downloads that file only once.
Can the logo appear above the form title?
No. Collect shows the form title in the top bar, outside the questions, and draws any image below the label text. The closest you can get is a note with an image and no label as the first row of a field-list welcome screen.
What size should a form logo be?
A PNG a few hundred pixels wide is enough for a phone and keeps the form quick to download. ODK suggests one size for every image, such as 300 x 300 pixels, a simple background, and a check in both light and dark mode.
No Credit Card Required
Build the form first. Add hosting when you need it.
Start free with LooprAI, then deploy a managed ODK Central server or run DataSnap checks when your project is ready.
Automation handles the mechanical work.
Researchers decide what the evidence means.