HrvatskiBest
The symbol
If your logo has a mark next to the name, use the mark alone.
How to make a favicon from your logo.
A favicon is your logo at its smallest. Here is how to make it clear at 16 pixels.
Do not shrink the full logo. Take the simplest part of it, like the symbol or the first letter, put it on a square, and make it bold enough to read at 16 by 16 pixels.
Then export a small set of files: an SVG icon, a 32 pixel ICO or PNG, a 180 pixel Apple touch icon and 192 and 512 pixel app icons. The code and a check are below.
By Vedran Obradović · Updated 5 November 2026
Pick the part of your logo that works tiny.
At 16 pixels you get about 256 dots. Most logos do not fit.
Good
The first letter
For a wordmark, take the first letter and make it heavier than in the logo.
Avoid
The full logo
A name of 8 letters turns into a grey line. Nobody can read it.
This is why a good logo comes with a small version from day one. See wordmark logo design and which logo files you need.
How to make a favicon from your logo, step by step.
1. Start with the vector file. Use the SVG or AI file, never a screenshot. A blurry start gives a blurry icon.
2. Put the symbol on a square. Use a canvas of 512 by 512 pixels. Leave some space on every side, so it does not touch the edge.
3. Choose the background. A solid brand colour works on light and dark browser tabs. A transparent icon can vanish on a dark tab.
4. Make it bolder. Thin lines disappear at small sizes. Thicken strokes and remove small details.
5. Look at it at 16 pixels. Zoom out until it is real size. If you have to squint, simplify again.
6. Export the files in the table below and add the code to your site.
Your clear space rule helps with step 2. Make it with the free logo clear space tool.
Free tool
Give your icon room to breathe.
Add your logo or symbol, pick a rule and download the guide. Your file stays on your device. The same rule helps you pad the favicon.
Favicon sizes and files you need.
A short set covers browsers, phones and Google.
| File | Size | Where it shows |
|---|---|---|
| icon.svg | Any (vector) | Browser tabs in modern browsers, sharp at every size |
| favicon.ico or favicon-32.png | 32 x 32 | Older browsers and tools that do not read SVG |
| apple-touch-icon.png | 180 x 180 | iPhone and iPad home screen |
| icon-192.png | 192 x 192 | Android home screen and web app manifest |
| icon-512.png | 512 x 512 | App splash screens and big previews |
Checked on 5 November 2026 on Google Search Central: Google wants a square favicon and recommends one larger than 48 x 48 pixels.
Brand OS Portal
Get 3 templates in your brand. Free.
Leave your email. I design them by hand and send them to you within 48 hours. It costs you nothing.
Got it. I start on yours today. Your 3 free templates reach you within 48 hours.
I write to you from [email protected]. If you do not see it, check spam.
The favicon code to paste.
Put it in the head of every page. Your developer or website builder can do it in minutes.
Favicon code
<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">
site.webmanifest:
{
"name": "[Company name]",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}Building in Framer or Webflow? They have a favicon field in the site settings. Upload the square file there. More on web launches in my web design service.
How to get your favicon to show in Google.
Google shows the favicon next to your result. It has a few rules.
- The icon is square
- It is bigger than 48 x 48 pixels
- The link tag sits on your home page
- Google can crawl the home page and the icon file
- The icon URL does not change often
- The icon stands for your brand
Google says it can take days to weeks to update. A clear icon in search is a small thing that makes you look real. It is part of being easy to find for people and AI, see how B2B brands get recommended by AI.
Your favicon checklist.
Tick what is true. Your ticks stay on this device.
0 of 9 done
MTG
Brand OS Pro Portal. The team makes its own posts. No waiting.
Talentix
Guidelines with real rules: clear space, variations, monochrome, what not to do, colour pairing and type.
Need a logo that works at every size? See my logo design service. A logo takes 7-14 days.
Logo Studio
Try one Brand OS Portal tool
The right logo file for every job.
This is a real tool from a real Brand OS Portal, on the MTG brand. Pick the job, the portal hands you the right version and size.
Straight answers.
What size should a favicon be?
Make a 512 pixel square master. Export an SVG, a 32 pixel ICO or PNG, a 180 pixel Apple touch icon and 192 and 512 pixel icons.
Can I use my full logo as a favicon?
Only if it is a simple symbol. A full name becomes unreadable at 16 pixels. Use the symbol or the first letter.
Should a favicon have a transparent background?
It can, but a solid brand colour is safer. A transparent dark icon can vanish on a dark browser tab.
Why is my favicon not showing in Google?
Check that it is square, bigger than 48 pixels, linked from the home page and not blocked from crawling. Then wait, Google can take days to weeks.
Is SVG good for a favicon?
Yes, modern browsers show SVG favicons sharp at every size. Keep a 32 pixel ICO or PNG as a fallback.
Do not take my word for it.
"He is a brand magician; he understood the challenge quickly and delivered a brand identity, complete with motion graphics, messaging, etc."
Leah MarsdenCMO, MTG
"It was never really about creating one logo. It was about building something strong enough to grow with the company."
Pierre-Marc NoëlFounder & CEO, Deepsea Networks
"The brand looks premium and actually fits an AI / tech company, and the guidelines are so clear our team just uses them without asking questions."
Jeremy MurrayFounder, KORDIN and Stack8s
How strong is your brand? Check it free.
Get your brand score and the first thing to fix.
Rather write to me?
Got it.
You hear from me within 2 to 8 hours.