--- title: "How to Set Up a Favicon for Your Website | MCC Solutions" description: "A favicon is the small icon in browser tabs, bookmarks and search results. Learn the sizes, formats and placement that work across devices." url: "https://mcc-solutionsnj.com/websites/guides/how-to-set-up-a-favicon-for-your-website" --- Guide · Updated October 12, 2026 # How to Set Up a Favicon for Your Website The tiny icon next to your page title in a browser tab is called a favicon. It helps people find your tab among many, makes bookmarks recognizable, and appears next to your site in mobile search results. A missing one makes a site look unfinished. By [Matthew Coleman](/about), MCC Solutions **Quick answer.** A favicon is the tiny icon next to your page title in a browser tab. It appears in tabs, bookmark lists, history, mobile home screens when someone saves your site and in Google's mobile search results next to your site name, so use a simple design that reads at tiny sizes. **Free tools:** [Search result preview](/websites/search-result-preview) · [Free website SEO check](/websites/seo-checker) ## Where favicons show up They appear in browser tabs, bookmark lists, history, the address bar on some browsers, mobile home screens when someone saves your site, and in Google's mobile search results next to your site name. Because the display is tiny, simple designs read more clearly. ## Design for tiny sizes Take the simplest part of your logo, often a single letter or symbol, and place it on a plain or transparent background. Fine detail disappears at sixteen pixels. Use strong contrast and few colors. Test how it looks on both a light and a dark browser theme, since a dark icon can vanish on a dark tab bar. Make the artwork square. Leave a little padding so rounded masks do not clip the edges. ## Files to provide A modern set is small: an SVG icon, which scales and can adapt to dark mode; an ICO file of 32 by 32 pixels for broad compatibility; a 180 by 180 PNG for Apple devices; and 192 and 512 pixel PNGs listed in a web app manifest for Android and installed apps. Name them clearly and keep them light. Do not worry about producing every historic size. Fewer, well-made files cover current devices. ## Adding them to your site Link the files in the head of your pages with link rel elements. Place an ICO at the root as favicon.ico, since some tools request it automatically. In WordPress, the Customizer has a Site Icon field. Builders usually include a favicon upload in site settings. Clear your browser cache or use a private window when testing, because browsers keep old icons stubbornly. ## Google search requirements Google's guidance for showing a favicon in results asks for a single favicon file per site that is a multiple of 48 pixels square, a crawlable file and an icon that is a suitable representation of the brand. The address must not change often, and the icon must not be inappropriate. It may take days or weeks for a new icon to appear. Check Google's current documentation, since rules can be updated. Make sure robots.txt does not block the icon file. ## Common favicon mistakes Using a wide logo that turns into an unreadable smudge when squeezed to a square. Forgetting a transparent background so a white box shows on dark tabs. Uploading a huge file that slows the first request. Leaving the builder's default icon in place, which makes your site look like a template. Changing the icon often, which confuses returning visitors and search systems. Make the favicon a one-time design decision, then check it after any theme change, since themes sometimes reset the site icon. Add the site to a phone home screen, bookmark it on a desktop browser and view it in both light and dark themes. If any look off, adjust padding or contrast and test again. ## Common questions **Why is my old favicon still showing?** Browsers and search engines cache icons heavily. A cache clear and some patience usually solve it. **Can I use my full logo?** Only if it stays readable at tiny sizes. Most logos need a simplified mark. **Do I need an SVG favicon?** It is optional, but it scales cleanly and supports color changes for dark mode. This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking. Let us handle it [### Website design Fast, mobile-first small business websites built by a New Jersey firm, with a fixed written quote. You own the domain, hosting and content. Website design →](/websites/services/website-design)[### Technical SEO & schema markup Technical SEO for small business websites: indexing, sitemaps, redirects, canonical tags and schema markup for local businesses and services. Technical SEO →](/websites/services/technical-seo-and-schema) More guides - [Social Sharing Previews: Open Graph Tags Explained](/websites/guides/social-sharing-previews-open-graph-tags-explained) - [Homepage layout: what goes at the top of the page](/websites/guides/homepage-layout-what-goes-above-the-fold) - [How to build a simple website navigation menu](/websites/guides/website-navigation-menu-for-small-business) - [Calls to action that get clicks on a small site](/websites/guides/calls-to-action-that-get-clicks) Free tools - [Website basics check](/websites/seo-checker) - [Is your website working for you? quiz](/websites/quiz) [All guides](/websites/guides) Reach small business owners working on their website and Google listing who read this guide: [advertise here](/advertise#websites). Do it yourself ### Small Business Website Starter A fast, mobile-friendly one-page site you edit in a text editor and host anywhere, with the sections a local service business needs and a plain setup guide. [See what's inside ($29)](/toolkits/small-business-website-starter) [Free sample](/toolkits/small-business-website-starter#free-starter)14-day full refund ## Rather have us handle it? Ask for a quote. [Get a Quote](/websites/#quote)[Call (908) 444-6373](tel:+19084446373)