Question 1

What is a favicon?

Accepted Answer

A favicon is the small icon shown in browser tabs, bookmarks, history and next to your site in some search results. Phones also use larger versions when someone adds your site to their home screen.

Question 2

Which favicon sizes do I need?

Accepted Answer

A favicon.ico containing 16, 32 and 48 pixel icons covers browsers and Windows. Add 16 and 32 pixel PNGs, a 180 pixel apple-touch-icon for iPhone and iPad, and 192 and 512 pixel icons for Android and the web app manifest. The ZIP contains all of these plus a site.webmanifest file.

Question 3

How do I add the favicon to my website?

Accepted Answer

Upload the files from the ZIP to your website's root folder and paste the HTML tags shown on this page into the <head> of your pages. Browsers cache favicons heavily, so reload the page with a hard refresh to see the new icon.

Question 4

Can I make a favicon from text or an emoji?

Accepted Answer

Yes. Type one to three characters or an emoji, pick a font, text color and background, and choose a square, rounded or circle shape. Emoji are drawn with your device's emoji font, so they look slightly different on Apple, Google and Microsoft systems.

Question 5

Why does my logo look blurry at 16 pixels?

Accepted Answer

Detailed logos don't fit in 16 × 16 pixels, so use a simple mark or initial, crop it to a square and add a little padding. The tool shrinks icons in steps to keep edges as sharp as possible. The Apple icon always gets a solid background, because iPhones fill transparent areas with black.

Favicon Generator

Preview

Add to your site

Source

Shape & background

Download

Frequently Asked Questions

Related Tools