Introduction

If you want a logo or branded image in the navigation bar instead of plain text, the standard UIKit approach is to assign a custom view to navigationItem.titleView. The image itself is usually displayed through a UIImageView with explicit sizing and content mode. The main work is not drawing the image; it is making sure the title view fits the bar cleanly across devices, large-title modes, and accessibility settings.

Use titleView Instead of Hacking the Bar Directly

The simplest pattern is:

1import UIKit
2
3final class HomeViewController: UIViewController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6
7        let imageView = UIImageView(image: UIImage(named: "logo"))
8        imageView.contentMode = .scaleAspectFit
9        imageView.frame = CGRect(x: 0, y: 0, width: 120, height: 32)
10        imageView.accessibilityLabel = "Home"
11
12        navigationItem.titleView = imageView
13    }
14}

This works because UINavigationItem is designed to host a custom title view. You do not need to subclass the navigation bar or manually draw into it.

Control the Image Size Explicitly

Do not rely on the raw image size. Navigation bars are tight layout containers, and an image that looks fine in assets can be too tall or too wide in the title area.

Using Auto Layout is often cleaner than relying only on frames:

1let imageView = UIImageView(image: UIImage(named: "logo"))
2imageView.contentMode = .scaleAspectFit
3imageView.translatesAutoresizingMaskIntoConstraints = false
4imageView.widthAnchor.constraint(equalToConstant: 120).isActive = true
5imageView.heightAnchor.constraint(equalToConstant: 32).isActive = true
6
7navigationItem.titleView = imageView

The exact numbers depend on the artwork, but the principle is stable: size the title image intentionally instead of letting the navigation bar guess.

Keep the Artwork Appropriate for the Context

A navigation title image should behave like a title, not like a hero banner. That means:

• moderate width
• predictable height
• clear appearance on light and dark backgrounds
• no tiny unreadable text embedded in the asset

If the image is essentially a logo with text, test it on smaller devices and with increased accessibility sizes. A title image that looks good only on one phone size is not a good title image.

Template images can also help if the title should follow tint color:

1let image = UIImage(named: "logo")?.withRenderingMode(.alwaysTemplate)
2let imageView = UIImageView(image: image)
3imageView.tintColor = .label
4navigationItem.titleView = imageView

That is useful when you need the title image to adapt automatically to theme or appearance changes.

Be Aware of Large Titles and Navigation Styles

If your screen uses large titles, remember that navigationItem.titleView affects the inline navigation bar title area, not the large-title header presentation. On screens with prefersLargeTitles = true, the inline title image will appear when the bar collapses.

That means you should test both states:

• scrolled to large title
• scrolled to inline title

If the design requires a branded large-title experience as well, you may need a custom header or a different layout strategy instead of relying only on titleView.

Accessibility and Fallbacks Matter

An image title has less built-in accessibility than a text title. Always provide an accessibility label:

imageView.isAccessibilityElement = true
imageView.accessibilityLabel = "Settings"

Also consider whether a text title is still the better choice for some screens. Branding is not always worth the discoverability and clarity tradeoff. If the image does not communicate useful meaning to VoiceOver users or shrinks too aggressively, a normal title may be the better design.

Common Pitfalls

• Setting a large raw image directly as the title view and letting it distort the bar layout.
• Using a title image without testing inline and large-title navigation states.
• Embedding tiny unreadable text inside the image asset.
• Forgetting accessibility labeling for a non-text title.
• Overcustomizing the navigation bar when navigationItem.titleView already solves the problem cleanly.

Summary

• Use navigationItem.titleView with a UIImageView to place an image in the navigation title area.
• Size the image view intentionally so it fits the bar cleanly.
• Test the artwork in light, dark, and large-title navigation modes.
• Add accessibility labels because image titles are not self-describing.
• If the logo compromises readability or layout stability, a text title is often the better choice.