The logo is often the first thing a visitor notices about a business, and on a website it has less room than on the company van or the letterhead. In the top left of the header it stands barely taller than two lines of text, on a phone it shares the row with the menu button, and in dark mode it suddenly sits on an almost black background. On top of that it has a job that paper does not give it: the logo is a link to the home page and needs text for everyone who cannot see it. That is exactly where the web often falls short. On 53.1 percent of the home pages of the top one million websites, WebAIM found images without alternative text in February 2026 (WebAIM Million 2026). This article sorts out the three common logo forms, namely wordmark, symbol with text and monogram, and shows when each one fits. It explains why a website logo needs a horizontal and a compact version, how much room it has in the header on a phone, how the light and dark versions work together, why SVG is usually the better file than a raster image and which alternative text belongs on a linked logo. Finally, it shows how to set all of this up in XICflow.
What a logo has to do on a website
A logo for print and signage is designed for a fixed surface: the sign above the door has its width, the letterhead has its fixed spot. On a website the surface changes with every device.
On a wide screen the logo sits on the left of a header that leaves enough room for the menu and a button. On a phone there is a narrow row left, and the menu button has to fit into it as well. WCAG 2.2 sets a benchmark for this case: content should be presentable at a width of 320 CSS pixels without scrolling in two directions, which corresponds to a window 1,280 CSS pixels wide at 400 percent zoom (W3C, WCAG 2.2, success criterion 1.4.10). A logo that only fits into that width as a tiny sliver has stopped being a logo on a phone. So a logo on a website has four jobs that do not exist on paper. It has to stay legible at a small size. It has to work on a light and on a dark background. As a file it has to load sharp and fast. And it is a control: many websites link the logo to the home page, a convention so common that screen reader users recognise an image link with the company name at the top of the page as the way home (WebAIM). For people who listen to a page instead of looking at it, that link consists only of the text stored behind the image. Anyone preparing a logo for a website works through these four points before turning to finer design questions. How heading and body typefaces sit next to a wordmark is covered in the article Website fonts: how to choose, pair and keep them readable.
Three logo forms: wordmark, symbol with text, monogram
For a website, logos fall roughly into three forms. The wordmark is the name itself as lettering, with no additional mark. With symbol and text, a pictorial mark stands next to or above the name.
The monogram condenses the name into initials, usually inside a basic shape such as a circle or a square. Which form fits depends less on taste than on the name, the trade and all the places the logo has to appear: in the header, in the browser tab, in the preview image when a page is shared, on the profile picture in social networks.
Wordmark
Fits short, distinctive names and businesses known by their name, such as law firms, practices or trade businesses carrying a family name. The name is read along with the logo, nobody has to learn a mark first. Limit: long or compound names become very small in the header on a phone.
Symbol and text
Fits when a pictorial mark says something about the business or is meant to stand alone later: in the browser tab, on the company van, as a profile picture. The mark carries the brand where the name has no room. Limit: a symbol with many fine lines turns into a blot at small sizes.
Monogram
Fits long names, names made up of several family names and businesses that already use their initials. Compact and roughly square, so well suited to small spaces. Limit: two or three letters tell strangers little; on a website the written-out name belongs close by.
A rule of thumb for the header: the longer the name, the more it pays to have a mark that can stand alone. A short name fits nicely into a phone header as a wordmark. A long name with an addition such as “master plumbers and heating engineers” only fits once it is so small that hardly anyone can read it. In that case the combination of symbol and short name works better, and the detailed addition moves onto the page as real text. A monogram is no replacement for the name either; it is an abbreviation for places where the name is already known or sits right next to it.
Wordmark in design, word mark in the register
Horizontal and compact: two versions for two widths
Many brand identities keep a logo in several arrangements: a horizontal version with mark and name side by side, a stacked version with the name below the mark, and a compact version consisting only of the mark or monogram.
Two of them matter most for a website. The horizontal version uses the width of the desktop header without making it taller. The compact version needs hardly any width and stays recognisable wherever there is only room for a square.
Scroll table sideways
| Version | Typical use | What to watch |
|---|---|---|
| Horizontal: mark and name side by side | Header on desktop and tablet, footer, email signature | Choose an aspect ratio that keeps the name legible at the logo height |
| Stacked: name below the mark | Letterhead, notice board, large image on the home page | Usually unsuitable for the header because the lettering shrinks to a fraction of the height |
| Compact: mark or monogram alone | Browser tab, home screen icon, profile picture, narrow headers | Clear outlines without fine lines; the name then belongs nearby as text |
| Single-colour version | Dark mode, preview images, stamps and embossing | Has to work without gradient, shadow or second colour |
Whether a website switches between the horizontal and the compact version depends on how its header is built. In XICflow the header logo has an adjustable logo height, an optional width and one image each for light and dark mode (XICflow documentation); there is no separate version for phones only. In practice that means: choose as your website logo the version that is still legible on a phone. If the horizontal version is too long for that, a variant drawn specifically for the website is worth it: shorter lettering, a slightly smaller mark, the addition left out. The favicon in the browser tab is a separate setting; what matters there is covered in the article How to set the preview image and favicon for sharing.
How much room the logo has in the header
For a logo in the header, the height is the fixed value and the width follows from the aspect ratio.
A square monogram at logo height takes up hardly any room; a wordmark that is seven times as wide as it is tall needs seven times the width at the same height. That is why long horizontal logos get so small on phones: to fit into the row, the height has to drop, and with it the lettering in the logo. You can estimate the available room in advance. Start with the narrowest width the page should support, subtract the side margins, the menu button and a gap between them. What is left is the widest space for the logo; divided by the logo height, it gives the longest aspect ratio that still fits.
Narrowest width of the page 320 CSS pixels (WCAG 2.2, 1.4.10)
- side margins, left and right [value from the template]
- menu button [width of the button]
- gap between logo and button [value from the template]
= widest space for the logo [result]
widest space / logo height = longest aspect ratio that fits
If the logo is wider: lower the logo height or pick a more compact versionBecause the logo is a link, it is also a tap target. At level AA, WCAG 2.2 requires targets for pointer inputs to be at least 24 by 24 CSS pixels, with exceptions for example for targets with enough spacing (W3C, WCAG 2.2, success criterion 2.5.8). A logo at header height usually reaches that size on its own. It gets tight with very flat wordmarks and in headers where the logo sits right next to a language switch, a phone icon or the menu button. How tap targets on phones should be sized overall is shown in the article Mobile first: making your site easy to use on phones.
The lettering in the logo suffers most. Additions such as “master craftsmen since ...”, a phone number or a slogan below the name turn into grey lines at header height. Whatever is no longer legible in the logo belongs on the page as real text, for instance in the heading or the line below it. For the lettering that stays in the logo there is an exception: under WCAG 2.2, logotypes, meaning text that is part of a logo or brand name, are considered essential and may therefore be embedded as an image (W3C, WCAG 2.2, success criterion 1.4.5). The exception covers the logo, not a slogan placed next to it as an image. And the less else competes for the top of the screen, the more room the logo has; how notices can appear without covering the header is covered in the article Website popups: showing notices without disruption.
Light and dark: two files, one identity
Many devices show websites in dark colours on request, and many websites offer a switch between light and dark. A logo with dark lettering disappears on a dark background, a logo with white lettering on a light one.
The obvious stopgap, placing the logo on a white box in the dark header, looks out of place. A second file works better: the same shape, the same dimensions, only with colours that hold up on a dark background. Often it is enough to set the lettering in a light colour and keep the mark in the brand colour; if the brand colour itself is very dark, the mark needs a lighter shade too. XICflow has two places for this. In the logo tool under “Brand & design”, a preview shows the logo on a light and on a dark surface before you apply it (XICflow documentation). In the header settings, “Logo image URL (light)” and “Logo image URL (dark)” hold two image variants for light and dark mode. If you use your own logo file, you create both versions and enter their addresses separately.
- Set the lettering in the logo light and keep the mark in the brand colour, as long as it stays visible on the dark background
- Same dimensions and the same white space as the light file, so nothing jumps when the mode changes
- Transparent background instead of a white area; with raster images check the edges so no light fringe remains
- No shadows or glow effects as a substitute for a suitable colour
- Look at both files in the same header, once light and once dark, on desktop and on a phone
Contrast and the logo
SVG instead of a raster image
A logo consists of clean areas, edges and lettering, and that is exactly what the SVG vector format is made for. An SVG file describes shapes instead of pixels and is redrawn at every size.
MDN Web Docs names SVG for images that must be drawn accurately at different sizes and recommends prioritising the vector version of icons where one exists (MDN Web Docs). On the web the format is still a minority: on mobile pages, 6.4 percent of images were SVG files and 28.4 percent PNG (HTTP Archive Web Almanac 2024). A raster format is right for photographs; for logos it gives away sharpness. A raster image has a fixed number of pixels. On high-resolution screens several device pixels make up one CSS pixel: a ratio of 1 stands for a classic display, a value of 2 is to be expected for high-resolution displays, and some screens go higher still (MDN Web Docs). A PNG logo with exactly as many pixels as it occupies in CSS pixels in the header gets scaled up there and looks soft. If you have to use a raster image, export it at least twice as wide and twice as tall as it is displayed in the header. Compression matters just as much: MDN advises saving screenshots, diagrams, logos and line art losslessly, because blurring and coloured fringes around text and sharp edges are very visible (MDN Web Docs). Which formats, image sizes and alt texts suit photos and other images is covered in the article Website images: formats and alt text; this article sticks to the logo.
Scroll table sideways
| Format | Type | Transparency | For the logo |
|---|---|---|---|
| SVG | Vector, sharp at any size | included | first choice if a clean vector file exists |
| PNG | Raster, lossless | included | good fallback, export at least at twice the width and height |
| WebP | Raster, lossless or lossy | included | saved losslessly, a usually smaller alternative to PNG |
| JPG | Raster, lossy | not included | unsuitable: fringes at edges, a box instead of transparency |
| GIF | Raster, limited colour depth | limited | only for simple motion, otherwise PNG works better |
Not every file ending in .svg is a good vector file. Some programs simply wrap a raster image in an SVG shell on export; then nothing is gained. Before uploading, check four points. The lettering has been converted to paths, because a logo embedded as an image does not know the website fonts (XICflow documentation). The artboard sits tightly around the logo, otherwise invisible margin ends up in the header and the logo looks smaller than set. There are no embedded images, scripts or leftovers from the design program. And the file stays lean. A logo that moves, by the way, is a decision of its own with its own rules; the article Animations on your website: subtle, calm and accessible describes them.
Alt text: say where the link goes
For people who listen to a website with a screen reader, a logo without alternative text is a link without a name.
How common that is can be seen in the annual analysis of the home pages of the top one million websites: 16.2 percent of all images there had no alternative text, and 45 percent of those images without alternative text were linked, with the result that the links were not described (WebAIM Million 2026). One in every four linked images was missing alternative text (WebAIM Million 2026). On many sites, the logo in the top left is exactly such a linked image.
What belongs in the alternative text is described in essentially the same way by the relevant rules, with differences in the detail. The basis is WCAG 2.2: all non-text content needs a text alternative that serves the equivalent purpose (W3C, WCAG 2.2, success criterion 1.1.1). For a linked logo, that purpose is the link target. The images tutorial of the W3C Web Accessibility Initiative shows a logo as the only content of a link to the home page and gives it the text “W3C home” to indicate where the link will take the user (W3C WAI). The HTML standard requires a link that consists only of images to have alternative texts that together convey the purpose of the link; for a logo that stands for a business it calls for that business's name and explicitly rules out the word “logo” (WHATWG HTML Living Standard). WebAIM adds a practical consideration: for a logo that links to the home page, the company name will usually suffice, because this link is a common convention (WebAIM). Both approaches are defensible. Texts that only name the image type, and file names, do not help. Both are common: approximately 8.5 percent of alt texts end with a file extension such as .jpg or .png (HTTP Archive Web Almanac 2025), and 10.8 percent of images with alternative text carried questionable or repetitive text such as “image”, “graphic” or a file name (WebAIM Million 2026). If the name of the business already appears as text next to the mark inside the same link, the image gets an empty alternative text so the name is not read out twice.
<!-- Logo as the only content of the link: text names business or target -->
<a href="/">
<img src="/logo.svg" alt="[Business name], home page">
</a>
<!-- Mark next to the written-out name: the image is supplementary -->
<a href="/">
<img src="/mark.svg" alt=""> [Business name]
</a>
<!-- Not helpful -->
<img src="/logo.svg" alt="Logo">
<img src="/logo.svg" alt="logo-final-2.png">In XICflow you do not write this text yourself, and there is no separate field for it. The logo link in the header automatically receives the website name as its accessible name, and the logo image carries the name as its alternative text. If the name already appears as text next to the mark, the image's alternative text stays empty. The header thus follows the practice WebAIM describes. That makes another entry all the more important: the website name. It should read the way customers know the business, without additions such as “logo” or “homepage”.
Setting up the logo in XICflow
Under “Brand & design”, three routes lead to the website logo: “Wordmark”, “AI logo” and “File” (XICflow documentation). The wordmark sets your name as lettering.
You enter it under “Brand text”, with up to 40 characters possible (XICflow documentation); then you choose a type genre (“Sans-serif”, “Serif”, “Monospace” or “Display”), the weight, a colour or a gradient and the letter spacing. The AI logo drafts a vector logo: under “Type” you choose between “Wordmark”, “Symbol + text” and “Monogram”, and under “Hint (optional)” you describe a style or motif. With “File” you upload an existing logo as PNG, JPG, WebP, GIF or SVG. Above the fields, the tool shows the logo on a light and on a dark surface. Only “Apply as website logo” puts it into the header; “Remove logo” brings back the automatic brand mark. The “Logo on OG preview image” switch burns a vector logo in white into the preview image for social networks; this applies to the wordmark and the AI logo, which the tool creates as vectors, not to an uploaded file. Logo height, optional width and the separate images for light and dark mode are set under “Header & footer”. Which design tools belong to Flow Design is shown on the features page; every field is explained in the brand and design documentation.
- Choose the form: a wordmark for a short name, symbol and text if the mark should also stand alone, a monogram for a long name with the written-out name nearby.
- Decide on the header version: the variant that stays legible on a phone at the logo height you set.
- Prepare the file: SVG with lettering converted to paths and a tight artboard, otherwise lossless PNG or WebP at no less than twice the width and height.
- Create the dark version and check it in the preview on a light and a dark surface.
- Check the website name, because it becomes the text of the logo link.
- Look at the result on a phone and on desktop, in light and dark mode, and tap the logo while you are at it.
The website logo is a version of its own