Logo Tester
Your logo looks good on letterhead, but how does it work at 16 pixels in a browser tab, cropped into a circle as a profile picture or on a dark background? Upload your logo and see it right away in all the situations where it appears in everyday use. Finally, the tool creates all favicon files for your website, including the code.
Logo
Drag a file here or
SVG, PNG, JPG or WebP. The file stays on your device, nothing is uploaded.
Symbol or logomark for small sizes (optional)
Drag a file here or
If provided, it is used for the favicon and app icons.
Icon settings
Background
Fit
How your logo looks
Browser tab
Enlarged: this is how many pixels the favicon really has.
Google search result
Smartphone home screen
iPhone uses apple-touch-icon.png and fills transparency with black. That is why this file is never transparent.
Android adaptive icon
Left: the full area with the safe zone (inner 66 %), right: the round crop. The package also contains a version with extra margin for Android (maskable).
Social media profile picture
Round crop at 110 px, as on LinkedIn or Instagram.
Small sizes at actual size
Light and dark background
Black and white
Does your logo work in one colour? This matters for fax, stamps, embossing and engraving.
Favicon package
All files for browsers, iPhone and Android in one ZIP. Copy the files to the root directory of your website and paste the code into the <head>.
Package contents
Code for the <head>
A logo for every size
Whether a new logo or a careful refresh, we design brands that work from the favicon to the building façade. We look forward to hearing from you.
How the tool works
Upload your logo as SVG, PNG, JPG or WebP. If you have a separate signet for small sizes, meaning just the symbol without the wordmark, upload it as well. All previews are created live in your browser.
- 01
Browser, Google and home screen
You see your logo in a light and dark browser tab at 16 and 32 px, as a favicon in a Google search result and as an icon on a smartphone home screen. A size row from 16 to 64 px shows at which point details start to blur.
- 02
Round icons and safe zone
Android often crops app icons into a circle, and social networks show profile pictures as circles. The preview shows the safe zone and warns you if parts of your logo would be cut off.
- 03
Light, dark and one colour
Your logo appears on a light and on a dark background, with a warning if contrast is too low. There is also a black-and-white version and a one-colour version, as needed for stamps, engravings or embroidery.
- 04
Background and padding
Choose a background colour or keep the background transparent, and adjust the padding. With icons in particular, a little space around the symbol often makes the difference between cramped and confident.
- 05
Favicon package as ZIP
One click downloads all files: favicon.ico with 16, 32 and 48 px, icon.svg for an SVG logo, apple-touch-icon at 180 px, icon-192 and icon-512, a maskable icon for Android and the site.webmanifest. You also get the matching HTML code for the <head> of your website.
Why a logo must also work when tiny
Most people do not see your logo large on a poster, but small: in the browser tab, in bookmarks, next to your entry in Google search results or as an icon on their phone. There, a space of a few pixels decides whether your brand is recognised.
Fine lines, long wordmarks and subtle gradients get lost at these sizes. That is why strong brands have a reduced signet alongside the full logo that is still clearly recognisable at 16 pixels.
A one-colour version is just as important. A logo that only works in colour on white soon reaches its limits: on dark surfaces, on photos, in engraving or in screen printing on textiles.
A complete favicon package makes sure your website looks tidy on every device. Without it, browsers and smartphones show a grey default symbol or a blurry crop, and that looks unfinished.
Code for the <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Place the files from the ZIP directly in the root directory of your website and add these lines to the <head>. In WordPress, it is easier to upload the icon in the Customizer under “Site Icon”.
Frequently asked questions about the logo tester
Which file format works best?
What is a signet and do I need one?
What is a maskable icon?
Why does Google not show my new favicon yet?
My logo has too little contrast on a dark background. What can I do?
Is my input stored?
A brand that works everywhere
We develop logos, corporate designs and style guides that look equally strong on websites, social media and print. Tell us about your project.
Related tools
- BRAND Brand Check Extracts colours, fonts, logo and favicon from your website and shows them as a compact style guide with hex codes.
- COLOR Colour Contrast Checker Checks whether text and background colours are easy to read, suggests suitable shades and tests your entire brand palette at once.
- IMAGE Image Compressor Makes photos for your website lighter and crops them precisely for Instagram, LinkedIn, Facebook and YouTube, right in your browser.