How to set up a website and URL for favicon

Table of Contents

Introduction

A favicon (short for “favorite icon”) is a small, square icon associated with a particular website or web page. It is displayed in browser tabs, bookmarks, and search results to help with brand recognition and user experience. Your favicon must be a square with dimensions that are multiples of 48px, such as 48x48px, 96x96px, or 144x144px, or an SVG with a 1:1 aspect ratio.

Create a Favicon

When creating a favicon, please follow the guidelines for favicon implementation as outlined in How to create a proper favicon

A recommended method is to upload your favicon so it can be reached through a URL like this: https://www.example.com/favicon.ico.

The alternate way to include a favicon is to add a <link> tag to the header of your home page with the following syntax:

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

Favicon Attributes

To extract the favicon information, Google relies on the following attributes of the link element:

  • rel
    • icon: The icon that represents your site, as defined in the HTML standard.
    • shortcut icon: For historical reasons, we also support shortcut icon, which is an earlier, alternative version of icon.
    • apple-touch-icon: An iOS-friendly icon that represents your site, per Apple’s developer documentation.
    • apple-touch-icon-precomposed: An alternative icon for earlier versions of iOS, per Apple’s developer documentation.
  • href: The URL of the favicon. The URL can be a relative path or an absolute path.

Your favicon must be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px, and so on (or SVG with a 1:1 (square) aspect ratio). Valid favicon formats are listed here.

Update Favicon

Google looks for and updates your favicon whenever it crawls your home page. If you make changes to your favicon and want to inform Google about the changes, you can request indexing of your site’s home page. Updates can take a few days or longer to appear in search results.

Tagged: