Eloshon
FRENNLDE
Back to the blog
09/09/2026

How to Add or Fix a Favicon and Open Graph Image for SEO

Learn how to create and properly install a website favicon, fix common favicon issues, and configure Open Graph images so your pages display correctly when shared on social media and messaging platforms.

How to Add or Fix a Favicon and Open Graph Image for SEO

Is your website showing a generic icon in the browser, or displaying the wrong image when someone shares one of your pages on social media?

Two small elements are often overlooked when building or optimizing a website: the favicon and the Open Graph image. While neither should be treated as a magic SEO ranking factor, both are important parts of your website's technical setup, brand presentation and user experience.

In this guide, you will learn how to add a favicon, how to fix a favicon that is not displaying correctly, how to turn an existing image into a favicon in multiple sizes, and how to configure your og:image so your pages display the correct image when shared on social networks and messaging platforms.

Table of Contents

What Is a Favicon?

A favicon is the small icon associated with a website. It commonly appears in browser tabs, bookmarks, browsing history and shortcuts. Google may also display a website's favicon next to its search result in certain search experiences.

Most businesses use a simplified version of their logo, a brand symbol or an initial as their website favicon.

Because a favicon is displayed at a very small size, a complicated logo containing lots of text may not work particularly well. A simple, recognizable symbol is often a better choice.

Important: Google can display a favicon in search results, but meeting the technical requirements does not guarantee that Google will display it.

Does a Favicon Affect SEO?

This is an important distinction. A favicon should not be considered a direct Google ranking factor in the same way as high-quality content, relevant links, search intent, technical accessibility or website performance.

However, a favicon contributes to the overall presentation and recognition of your website. It can help users identify your brand more easily when browsing multiple tabs, bookmarks or search results.

From an SEO optimization perspective, the favicon is therefore best treated as part of your website's technical and branding setup rather than as a standalone ranking trick.

Shape Square, 1:1 ratio Google minimum 8 × 8 pixels Recommended size Larger than 48 × 48 pixels URL Stable and publicly accessible Crawlability Accessible to search engine crawlers Design Simple, recognizable and representative of the brand

How to Create a Favicon From an Image

If you already have a logo, you do not necessarily need to create a new design from scratch. You can usually start with your existing PNG logo or another suitable image and convert it into the required favicon formats.

Use a square image whenever possible

A square image is strongly recommended because favicons are displayed inside small square spaces.

A horizontal company logo may look excellent on your website but become almost impossible to recognize when reduced to 16 × 16 pixels.

Good favicon design

Use a simple logo mark, symbol, letter or recognizable brand element.

Less effective favicon design

Avoid complex illustrations, tiny text and long company names that become unreadable at small sizes.

If your main logo is very wide, consider creating a simplified favicon version of your logo rather than simply shrinking the entire logo.

How to Generate Multiple Favicon Sizes From One Image

You do not need to manually resize your logo into every required favicon format. An online favicon generator can automate much of this process.

One convenient option is favicon.io .

Its favicon converter allows you to upload an existing image and generate multiple favicon files for different website and device requirements.

Step 1: Prepare your original image

  1. Choose your logo or brand symbol.
  2. Use a square image whenever possible.
  3. Start with a reasonably high-resolution image.
  4. Remove unnecessary small text.
  5. Make sure the symbol remains recognizable when reduced.

Step 2: Upload your image to the favicon converter

Open the favicon converter and upload your logo. The service can process the source image and generate the appropriate favicon files.

Step 3: Download the generated favicon package

After conversion, download the generated package. Depending on the options provided, it may contain several PNG sizes, an ICO file, Apple icons, Android icons and a web manifest.

favicon.ico Traditional browser favicon favicon-16x16.png Small browser icon favicon-32x32.png Browser and high-density displays apple-touch-icon.png Apple device shortcuts android-chrome-192x192.png Android and web app usage android-chrome-512x512.png Larger Android and PWA usage site.webmanifest Web application metadata

You do not necessarily need every generated file. The correct implementation depends on whether you are building a standard website, an e-commerce store, a progressive web app or another type of web application.

How to Add a Favicon to an HTML Website

On a traditional HTML website, favicon declarations are normally placed inside the <head> section.

<head> <meta charset="UTF-8"> <title>My Website</title> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> </head>

If you are using a traditional ICO file, a simple implementation can also be:

<link rel="icon" href="/favicon.ico">

Make sure the path points to the actual location of the file on your server.

How to Add a Favicon to WordPress

If your website runs on WordPress, you normally do not need to manually edit the HTML header just to add a favicon.

WordPress provides a built-in way to configure the site's icon through the website identity or customization settings, depending on the WordPress version and theme you are using.

Your exact interface may also vary if you are using a block theme, a custom theme or a page builder.

SEO tip: Avoid installing several different favicon systems that all inject their own rel="icon" tags. Check your page source before adding additional code.

How to Add a Favicon to Shopify

On Shopify, the favicon is generally configured through the theme's settings.

Open your theme editor and look for settings related to your favicon, site icon or brand identity.

If you decide to edit the Shopify theme code manually, keep in mind that theme updates and theme changes can affect custom modifications.

Always test the storefront after making technical changes and verify that the favicon is actually present in the generated HTML.

How to Fix a Favicon That Is Not Showing

Sometimes the favicon has been uploaded correctly but still does not appear. This is one of the most common favicon troubleshooting issues.

1. Check the file path

Make sure the URL in your HTML points to the real location of the favicon.

<link rel="icon" href="/images/favicon.ico">

If the actual file is located at /favicon.ico, the path above will not work.

2. Test the favicon URL directly

Copy the favicon URL and open it directly in your browser.

https://www.example.com/favicon.ico

If the server returns a 404 error, redirects incorrectly, or blocks access to the file, fix that issue first.

3. Clear your browser cache

Favicons can be cached aggressively by browsers. If you recently changed your favicon, try opening the website in a private browsing window or clearing your browser cache.

4. Google has not updated the favicon yet

Your browser and Google Search do not update the favicon through exactly the same process.

Google needs to crawl the relevant pages and process the updated favicon. Therefore, a correctly configured favicon may not appear immediately in Google.

5. Check crawlability

Search engines need to be able to access the relevant resources. Check your robots.txt rules, server restrictions and security settings if search engines cannot retrieve the favicon.

6. Look for duplicate favicon declarations

Search your source code for:

rel="icon"

If several plugins, themes or scripts are injecting different favicons, determine which implementation should remain and remove unnecessary duplicates.

What Is an Open Graph Image?

Open Graph is a metadata protocol that allows web pages to provide information about how they should be represented when shared.

This includes metadata such as:

  • og:title
  • og:description
  • og:url
  • og:image
  • og:type

The purpose is to give compatible platforms information about the title, description and image they should use when creating a link preview.

Without Open Graph metadata: a platform may select an unsuitable image from your page or use information that you did not intend to highlight.

With Open Graph metadata: you can explicitly specify the title, description and image associated with the shared URL.

How to Add an og:image to Your Website

Open Graph metadata belongs inside the <head> of your HTML page.

A basic implementation looks like this:

<meta property="og:title" content="My Website Title"> <meta property="og:description" content="A description of my website page."> <meta property="og:url" content="https://www.example.com/my-page"> <meta property="og:image" content="https://www.example.com/images/og-image.jpg">

Pay particular attention to the og:image URL. The image should be publicly accessible so that the platform generating the preview can retrieve it.

Using an absolute URL is generally the safest approach:

https://www.example.com/images/og-image.jpg

Rather than relying only on a relative path:

/images/og-image.jpg

What Size Should an Open Graph Image Be?

A widely used practical size for an Open Graph image is 1200 × 630 pixels.

This produces an aspect ratio of approximately 1.91:1 and works well for many social sharing scenarios.

Image size 1200 × 630 px Aspect ratio Approximately 1.91:1 File format JPG or PNG depending on the design URL Public HTTPS URL Text Large enough to remain readable on mobile

Remember that social platforms can apply their own cropping, rendering and caching rules. Avoid placing important text or logos directly against the edges of the image.

Complete Open Graph Meta Tag Example

For a more complete implementation, you can use additional Open Graph properties:

<meta property="og:type" content="website"> <meta property="og:title" content="Complete Technical SEO Guide"> <meta property="og:description" content="Learn how to optimize your website's technical SEO, metadata and structured elements."> <meta property="og:url" content="https://www.example.com/technical-seo-guide"> <meta property="og:image" content="https://www.example.com/images/technical-seo-guide.jpg"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Technical SEO optimization guide">

The additional image properties can provide information about the image associated with the page and its dimensions.

Why Is My Social Media Preview Showing the Wrong Image?

You added og:image, but Facebook, LinkedIn or a messaging application still displays an old or completely different image. Don't panic — this is a common Open Graph troubleshooting issue.

Social media caching

Social platforms can cache the metadata and image associated with a URL. Updating your website does not necessarily mean that every platform will immediately retrieve the new version.

The image cannot be accessed

Your Open Graph image should be publicly accessible. Authentication requirements, server restrictions or aggressive security rules can prevent a platform from retrieving it.

The image URL is incorrect

Check the exact value of:

<meta property="og:image" content="...">

Copy the URL and open it directly in a browser. If the image does not load, the social platform will have trouble loading it too.

The image is being cropped

Different platforms can display previews differently. Keep important branding elements away from the edges of your social media image.

Design tip: Keep your logo and important text inside a safe central area so your design remains recognizable if the preview is cropped.

Favicon vs Open Graph Image: What Is the Difference?

These two elements are sometimes confused because both involve images, but they serve completely different purposes.

Small website icon Large preview image Identifies the website Represents a specific page Browser tabs Social media link previews Bookmarks Messaging and sharing platforms Can appear in Google Search Used by compatible platforms supporting Open Graph

Favicon and Open Graph SEO Checklist

Before considering your website's favicon and social sharing setup complete, run through this technical SEO checklist:

  • ✓ Your favicon is square.
  • ✓ Your favicon represents your brand clearly.
  • ✓ The favicon is publicly accessible.
  • ✓ The favicon URL is stable.
  • ✓ Search engine crawlers can access the favicon.
  • ✓ Your HTML contains an appropriate rel="icon" declaration.
  • ✓ Unnecessary duplicate favicon declarations have been removed.
  • ✓ Your favicon works in modern browsers.
  • ✓ An Apple Touch Icon is available if required.
  • ✓ Your website has an Open Graph image.
  • ✓ og:title is correctly configured.
  • ✓ og:description is correctly configured.
  • ✓ og:url matches the intended canonical page URL.
  • ✓ og:image uses a publicly accessible URL.
  • ✓ Your Open Graph image is large enough and visually clear.
  • ✓ Important text is not positioned against the image edges.
  • ✓ og:image:alt accurately describes the image.
  • ✓ Your social media previews have been tested after major changes.

Frequently Asked Questions About Favicons and Open Graph

What is the best favicon size?

Google requires a favicon to be at least 8 × 8 pixels and recommends using an image larger than 48 × 48 pixels for its search results. Providing appropriate sizes for different browser and device contexts is a practical approach.

What is the recommended Open Graph image size?

1200 × 630 pixels is a widely used practical size for Open Graph and social sharing images. Individual platforms can have their own recommendations and rendering behavior.

Does a favicon improve Google rankings?

A favicon should not be treated as a direct Google ranking factor. Its primary purpose is visual identification and branding, although Google can display it alongside a website in Search when its requirements are satisfied.

Why does my favicon work in Chrome but not in Google Search?

Your browser and Google Search handle favicons differently. Google needs to crawl and process the relevant information before it can potentially display the favicon in its search results.

Should I use the same image for my favicon and og:image?

No. Your favicon is a small identification icon, while an Open Graph image is a much larger visual designed to represent a specific page when its URL is shared.

Can a website have multiple favicons?

Different favicon declarations can be provided for different contexts and devices. However, you should avoid unnecessary or conflicting implementations. For Google Search, favicon handling is associated with the site's hostname, rather than treating every subdirectory as a separate website.

Can I use a JPG as a favicon?

Browser favicon support depends on the format and implementation. PNG and ICO are commonly used choices for website favicons. If you already have a JPG logo, converting it to suitable favicon formats is generally preferable to simply referencing the original JPG.

Why is my old Open Graph image still showing?

The most common reason is caching. Social networks and sharing platforms can retain previously retrieved metadata and images. Check the page source, confirm that the new og:image URL is accessible, and use the relevant platform's debugging or cache-refresh tools when available.

Conclusion: Small Technical Details Matter

Technical SEO is not only about keywords, H1 headings, backlinks and written content. A properly configured website also needs a clean technical foundation.

Your favicon helps users recognize your website and can appear in browser interfaces and Google Search. Your Open Graph image helps control how your pages are presented when their URLs are shared across compatible social and messaging platforms.

Neither element should be treated as a shortcut to higher rankings. Instead, they should be part of a broader SEO optimization strategy covering technical accessibility, structured data, metadata, content quality, performance, internal linking and user experience.

If your website has been online for a while, it is worth checking these elements now. A missing favicon, incorrect image URL or outdated Open Graph configuration can often be fixed with just a few technical changes.