What is a favicon?

A favicon, short for favorite icon, is a small image, usually 16×16 or 32×32 pixels, that a browser shows in the address bar next to the URL and in the browser tab when a website is opened. It can also appear in bookmarks, in the browsing history and on the home screen when a page is added as an app link. Favicons are mostly stored in the ICO format, but formats such as PNG and GIF are supported as well.

Why does your website need a favicon?

A favicon is small and often overlooked, but it plays a real part in the user experience and the brand identity of your website. These are the main reasons why your website needs one:

Stronger brand perception: a favicon is an effective way to reinforce your brand visually. It is a small but powerful part of your brand identity that creates recognition with very little effort. Every time someone visits your website, the favicon helps to cement the image of your brand.
Professional appearance: websites with a favicon look more professional and more trustworthy. A missing favicon, on the other hand, can leave the impression that a website is managed with less care. A well designed favicon signals attention to detail.
Better usability: in a browser with many open tabs, a favicon helps people identify your website quickly and return to it. Favicons appear in the browser tabs and make your site easy to spot among many tabs and bookmarks.
Effective bookmarking: when someone saves your website as a bookmark, the favicon appears next to the link in the bookmarks bar or in the menu. That makes the site easier to recognize and click later, especially for people with a lot of bookmarks.
Recognition and consistency across devices: a favicon supports the visual consistency of your website across devices and platforms. That includes desktop browsers, mobile devices and even apps, when the site is saved as a web app on a smartphone or tablet. One consistent icon raises recognition across all of them.

How do you add a favicon in HTML?

To add a favicon to your website, put the following HTML code in the <head> area of your page:

<link rel="icon" type="image/png" href="path/to/favicon.png">

Replace path/to/favicon.png with the actual path to your favicon. This method works in most modern browsers and supports PNG files, which offer better quality and transparency than ICO files.

How do you add a favicon in WordPress?

In WordPress you can add a favicon through the admin dashboard:

Go to Settings and then to General.
There you will find the Site Icon option, where you can upload the favicon.
Upload your image at a size of at least 512 by 512 pixels and publish the change. WordPress processes the upload automatically and embeds the favicon correctly.

Favicon vs. Apple touch icon

The favicon and the Apple touch icon serve similar purposes, but they have different jobs in web design and in the user experience. These are the main differences between the two:

1. Purpose and platform

Favicon: a small icon shown mainly in browser tabs, address bars, bookmarks and the browsing history. It is meant for every platform and is supported by most web browsers.
Apple touch icon: this icon is made specifically for Apple devices such as iPhones and iPads. It is used when someone saves a page to the home screen of an iOS device. The Apple touch icon allows a high resolution display that fits the look of iOS.

2. Size and resolution

Favicon: favicons are typically small, mostly 16×16 or 32×32 pixels, and can come in formats such as ICO, PNG and GIF. They have to stay clear and recognizable even at a very small size. Modern content management systems such as WordPress recommend a source image from 512×512 pixels upwards.
Apple touch icon: Apple touch icons are noticeably larger than favicons and are suggested in several sizes for different devices, usually from 120×120 up to 180×180 pixels. Those larger dimensions support the retina displays of Apple devices, which have a higher pixel density.

3. Implementation in the HTML code

Favicon: the favicon is referenced with a link tag in the head of the page.
```
<link rel="icon" type="image/png" href="/path/to/favicon.png">
```
Apple touch icon: the Apple touch icon also needs a link tag, but with a different relation that points to the specific use on Apple devices.
```
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
```
Size attributes are sometimes added as well, to address different devices directly.

4. Design considerations

Favicon: when you design a favicon, what matters is that the logo stays recognizable at a very small size. Simple, clear designs work best.
Apple touch icon: because these icons are larger, they can carry more detail, and they have to look good on the home screen of a device.

How do you create a favicon?

To create a favicon you can use an existing graphic of your logo or design a new image that captures the essence of your brand. That image should be clear and recognizable even at a very small resolution. Graphic design software or dedicated online favicon generators will bring the image into the right format and size.

Creating a favicon with a favicon generator

There are several free favicon generators that are easy to use and deliver good results. These are some popular options:

Favicon.io (favicon.io): one of the most user-friendly favicon generators. You can create favicons from text, from images or even from emoji, and it previews the result in different browser tabs.
RealFaviconGenerator (realfavicongenerator.net): offers detailed options for fine tuning and generates favicons that are compatible with all major browsers and platforms, including iOS and Android devices. You can even test how the icon looks on different devices.
Favicon Generator (favicon-generator.org): lets you upload an image, which is then converted into the different favicon formats for web browsers, including iOS and Android icons.
X-Icon Editor (xiconeditor.com): an interactive favicon editor that lets you build and adjust a favicon directly in the browser. You can upload an existing image or draw one from scratch.
favicon.cc: offers a pixel based editing surface that lets you design a favicon pixel by pixel. It also supports animated favicons.
Letter generators: tools that quickly build a favicon from your initials.

These tools are useful for web developers and designers who want an appealing favicon quickly, without installing or buying software.

What role does a favicon play for SEO?

A favicon by itself has no direct effect on search engine optimization in the sense of rankings. It does contribute indirectly, because it improves the user experience, and that is an important factor for search engines like Google. In online marketing, a favicon can support visibility and brand awareness, which in turn helps the performance of a website. These are the indirect ways a favicon can influence the SEO of a website:

User retention and recognition: favicons make a website easy to recognize in a list of results or among open tabs. That can raise the likelihood of people returning to a site, which in turn can lift the click-through rate (CTR). A higher CTR can be read as a sign of relevance and quality.
Better user experience: as described above, a favicon helps people spot your website in their bookmarks or tabs. A positive experience can lead to longer visits and lower bounce rates. Websites with a good user experience tend to be rated higher, because that is a sign of quality and user satisfaction.
More brand awareness: a consistent, recognizable favicon helps to build brand awareness and recognition. When people associate something positive with a brand, they are more likely to search for its content and engage with it, which can have a positive effect on SEO.
Mobile user experience: favicons show up on mobile devices in particular, when people add a website to their home screen, so the favicon plays a part in the mobile experience too. Because mobile-first indexing and a working responsive design are an important part of how Google evaluates a site, every improvement to the mobile experience potentially contributes to SEO.

Browse the full SEO glossary for the terms that connect to this one.