A favicon is the small icon displayed in browser tabs, bookmarks, and address bars. It is typically a 16×16 or 32×32 pixel image representing your website or brand.

What sizes does a modern favicon need to be?

A complete favicon set includes: favicon.ico (16px+32px), favicon-16.png, favicon-32.png, apple-touch-icon.png (180×180), favicon-192.png (Android Chrome), and favicon-512.png (PWA splash screen).

How do I add a favicon to my website?

Place the favicon files in your website root and add these tags in your HTML : , , and .

What image format should I start with?

Use a square PNG or SVG image with your logo or icon. Ensure the design is recognisable at 16×16px — simple shapes and bold icons work best. Avoid complex text or thin lines.

Image Tool

Favicon Generator

Upload any logo or image and download a complete favicon package — .ico, Apple touch icon, and all PNG sizes.

Drop your logo or image here

PNG, JPG, SVG — best results with a square image

Generate all favicon sizes below

Preview & Download

Add to your HTML <head>

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Why Favicons Matter for Branding

Favicons appear in browser tabs, bookmarks, history, and mobile home screens. Users see your favicon multiple times daily. A recognizable favicon increases brand recall by 30–40% and makes your website instantly identifiable among dozens of open tabs.

Different devices need different sizes. Desktop browsers need 16×16 and 32×32px. iPhones need 180×180px. Android apps need 192×192px and 512×512px. This tool generates all required sizes in one click, plus the universal .ico file for broad compatibility.

Professional websites need favicons. Missing favicons look unprofessional and confuse users. Google subtly favors websites with complete favicon setup (signals a well-maintained site). Users bookmark and share websites with clear, branded favicons more often.

🌐 Favicon Implementation Guide

🖼️

Design for Small Sizes

Your favicon must be recognizable at 16×16px — roughly the size of a grain of rice on screen. Use bold shapes, single letters, or a simplified version of your logo. Avoid thin lines or complex details that disappear at small sizes.

📋

Complete HTML Setup

Add these tags in your <head>: <link rel="icon" href="/favicon.ico"> for browsers, <link rel="apple-touch-icon" href="/apple-touch-icon.png"> for iOS, and <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png"> for Android.

⚡

Laravel & WordPress Setup

Laravel: Place favicon files in the /public/ folder and reference them in your main Blade layout. WordPress: Upload via Appearance > Customize > Site Identity > Site Icon. Shopify: Online Store > Preferences > Favicon Image.

🔍

SEO & Google Search

Google displays favicons in search results (SERPs) next to your page title on mobile. A clear favicon improves click-through rates by making your result more recognizable. Google requires the favicon to be accessible at the root URL and at least 48×48px.

Frequently Asked Questions

What is a favicon?

A favicon (short for "favorite icon") is the small icon shown in browser tabs, bookmarks, browser history, and address bars. It represents your website or brand visually. On mobile, it also appears when users add your site to their home screen as a web app icon.

What sizes are in the generated package?

favicon.ico (multi-size: 16×16 + 32×32px), favicon-16.png (16×16), favicon-32.png (32×32), apple-touch-icon.png (180×180 for iOS), favicon-192.png (192×192 for Android Chrome), favicon-512.png (512×512 for PWA and Android splash screens).

How do I add the favicon to my website?

Copy all favicon files to your website root folder (/public/ in Laravel). Add these HTML tags in your <head>: <link rel="icon" href="/favicon.ico">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">. The tool generates the exact HTML code for you.

What is an Apple Touch Icon?

The 180×180px PNG icon shown when iOS users add your website to their iPhone/iPad home screen. It appears as an app icon on the home screen. Without it, iOS uses a screenshot of your website instead, which looks unprofessional.

What image should I start with for the best result?

Use a square PNG or SVG logo (1:1 aspect ratio). Keep it simple — bold shapes, single initials, or a simplified icon work best. Complex logos with thin lines or small text become unreadable at 16×16px. Export from Figma or Illustrator at 512×512px for best quality.

Is my image uploaded to a server?

No. All favicon generation happens in your browser using the HTML5 Canvas API. Files are generated locally and downloaded directly — nothing is sent to any server. 100% private and secure.

Why does my favicon not show up after uploading?

Browsers aggressively cache favicons. To force refresh: hard reload with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac), or open in a private/incognito window. If still not showing, check the favicon file path is correct and the HTML link tag references the right URL.

What is a .ico file and why do I need it?

.ICO is a special container format that holds multiple favicon sizes (16×16 and 32×32px) in a single file. Older browsers (IE, Edge pre-Chromium) require .ICO. Modern browsers accept PNG favicons, but including favicon.ico in your root ensures maximum compatibility across all browsers and tools.

Does favicon affect SEO?

Yes, indirectly. Google shows favicons in mobile search results (SERPs). A clear, branded favicon improves click-through rates and brand recognition. Google requires a properly configured favicon for it to appear in search results. Missing or broken favicons can affect your SERP presentation.

How do I add a favicon to WordPress?

Go to Appearance > Customize > Site Identity > Site Icon in your WordPress admin. Upload a square image (512×512px minimum). WordPress automatically generates all required sizes. Alternatively, use a plugin like RealFaviconGenerator or add custom code to your theme's functions.php.

What size favicon does Google use in search results?

Google displays favicons at 18×18px in mobile search results but fetches and stores the highest-resolution version available. Google's requirements: the favicon URL must be stable, accessible by Googlebot, and at least 48×48px. Providing a 512×512px favicon ensures the best quality.

Can I use an animated favicon?

Animated favicons (using animated GIF or CSS animation) are technically possible but generally discouraged. They distract users and most browsers stop the animation after the page loads. For brand differentiation, focus on a clean, recognizable static favicon rather than animation.

Related Tools

SVG to PNG

Export SVG logos to PNG at any size

Image Resizer

Resize images to exact dimensions

PNG to WebP

Convert PNG to lighter WebP format

Launch a Complete Website

Gopafy builds complete, SEO-ready websites with proper favicons, meta tags, and all the technical foundations for Google ranking.

Start Your Website →

📋 Favicon Sizes Checklist

favicon.ico 16+32px (IE, legacy)

favicon-32.png Standard browsers

favicon-16.png Classic tab icon

apple-touch-icon.png 180×180 (iOS)

favicon-192.png Android Chrome

favicon-512.png PWA splash