Favicon Generator for Grunt

Favicon for Desktop Browsers and Google Result Pages

The classic favicon is used by desktop browsers and other platforms. For example, search engines such as Google and Yandex are showing this icon in their search results.

Desktop browsers

Default theme

Dark theme / Incognito

Google result pages

Desktop

Mobile

The favicon for desktop browsers is often the web site logo itself. However, a lack of contrast with the tabs or Google result pages can disrupts the appearance of the icon. Adding a solid background can make your favicon more resilient.

Use the original image as is.

Add margins and a plain background.

Background color

Background radius

Image size

Favicon for iOS - Web Clip

iPhone and iPad users can pin your web site on their home screen. The link looks like a native app.

Your favicon is transparent. This is usually a good thing, but not for iOS Web Clips which are supposed to be opaque. Look at the sample on the left, this is how a user would see your favicon as a Web Clip on his device. What to do about this?

Your favicon is not transparent. This is a good thing for iOS Web Clips. Yet, web clip corners are rounded. Depending of your favicon, it may disrupt its design. For example, if your favicon features a square border, it will be cut at the corners. Look at the sample on the left and check how your favicon will be rendered on iOS. What do you want to do?

Use the original favicon as is. iOS will fill the transparent regions with black.

Add a solid, plain background to fill the transparent regions. Add margins and a plain background.

Background color Tip: You can pick a color directly from the preview.

Margin size (for a 57x57 icon)

We always create a single, high resolution, one-size-fits-all icon. Everything else is optional.

iOS 7 and Later

Create all icons for iOS 7 and later

iOS 6 and Prior

Create all icons for iOS 6 and prior

Miscellaneous

In the HTML, declare only the icon with the highest resolution

Generate the corresponding precomposed icons

If your master picture does not fit iOS well, you can submit a picture designed especially for iOS.

Master picture

Favicon for Android Chrome

Add to Homescreen is a also a feature of Android Chrome. Your visitors can mix their natives apps and web bookmarks.

Windows Metro

Windows 8 and 10 users can pin your web site on their desktop. Your site appears as a tile, just like a native Windows app.

Transparent pictures make better tiles. Look at the sample on the left and check that your tile looks good. You can also choose the background of the tile.

Use this color (preferably, choose one suggested for the Windows Metro UI):

Use the original favicon as is.

Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions.

Windows 8.0 / IE 10

Medium, square icon, declared with two HTML markups

Windows 8.1 and 10 / IE 11 and Edge

These icons are declared in a dedicated browserconfig.xml file, generated along with the icons.

Small, square icon

Medium, square icon

Big, square icon

Rectangular icon

If your master picture does not fit Windows well, you can submit a picture designed especially for Windows.

Master picture

macOS Safari

Safari implements pinned tabs and takes advantage of the MacBook Touch Bar. This feature relies on an SVG icon. This icon must be monochrome and Safari does the rest.

Favicon Generator Options

I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site. Recommended.

I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:

When a browser loads a favicon for the first time, it tends to cache it and to never load it again. When your web site is not new and you want to update your favicon, that can be a problem: your loyal visitors won't notice the change. A workaround is to append a version to the favicon URLs as a query parameter.

This is a new web site, nobody visited it yet. So there is no "old" favicon and no caching issue.

The web site is already in production and many people already visited it. I want returning visitors to see my new favicon, not the old one.

http://example.com/favicon.ico? =

Compress the favicon pictures and reduce their size by 50%-80%. Learn more

We let you choose the scaling algorithm which provides the best result for your picture. Please wait a few seconds while we prepare the previews.

When adding a link to the home screen, the user can choose a caption. By default, this is the bookmarked page title, which is usually fine. However, iOS and Windows 8 let you override this default value.

No app name, let the browser offer the page title by default.

Specific app name, override the page title.

Generate README.md, which summarizes the package install instructions. Use this option to make the favicon package self-sufficient.

Generate html_code.html, which contains the icons HTML markups. This file can be inlined as is in HTML documents.

Favicon Generator for Grunt

All browsers

All platforms

Designed for Grunt