Skip to content
toolwise

Favicon Generator

Create favicons in every size from an image, text or emoji.

Create from
Shape

Add this to your website's <head>

 
 
   
  
  
 
When to use it


A favicon is the small icon shown in browser tabs, bookmarks, history and search results, and on phone home screens when someone saves your site. Use the favicon generator when you launch a website, blog, portfolio or online shop, or when your site still shows a blank or default icon. It creates every size modern browsers and devices need from a letter, an emoji or your logo.


How to make a favicon


    

  1. Under Create from, choose Text, Emoji or Image:

      

    • Text: type 1 to 3 Letters, such as your initials.
      • 

    • Emoji: type or paste one emoji.
      • 

    • Image: press Choose image and pick a square logo.
      • 

    

    2. 

  2. Pick a Background and Text color, or tick Transparent background.
    3. 

  3. Choose a Shape: Square, Rounded or Circle.
    4. 

  4. Check the Preview, which shows the icon in a browser tab next to “Your website”.
    5. 

  5. Press Download favicon pack to get a ZIP of all the files.
    6. 

  6. Copy the code under Add this to your website’s <head> and paste it into your pages.
    7. 



A worked example


You run a bakery website called “Rosie’s Kitchen”. Choose Text, type RK, set a warm red background with white text and choose Rounded. The preview shows a crisp red tile in the tab. Download the pack, upload the files to your site’s main folder, and paste the provided code above the closing </head> tag. On a website builder like WordPress or Squarespace, upload the 512 px PNG in the “Site icon” setting instead.


Designing a favicon that works at 16 pixels


    

  • Keep it simple: one or two letters or a bold symbol.
    • 

  • Use strong contrast between the icon and its background.
    • 

  • Avoid fine details and thin lines, which vanish at small sizes.
    • 

  • Match your brand colors so it’s recognisable among many open tabs.
    • 

  • Check dark mode: a transparent icon with dark text can disappear on dark browser tabs; a colored background is safer.
    • 



Common mistakes


    

  • Using a detailed photo or full logo that becomes an unreadable smudge.
    • 

  • Uploading only favicon.ico, which leaves iPhones and Android without a proper home screen icon.
    • 

  • Putting files in a subfolder without updating the links in the HTML.
    • 

  • Expecting instant updates, when browsers may show the old icon for a while.
    • 




Prepare a logo with Resize Image or Crop Image, round its corners with Round Image Corners, or add page tags with the Meta Tag Generator.
 
  
 
Frequently asked questions
 
 
  
What files are in the favicon pack?
   
favicon.ico (16, 32 and 48 px in one file), PNG icons from 16 to 512 px, apple-touch-icon.png (180 px) for iPhones and iPads, and a site.webmanifest for Android home screens. You also get the HTML lines to add to your page.
 
  
Where do I put the files?
   
Unzip them into the root folder of your website, the same folder as your home page, so favicon.ico opens at yourdomain.com/favicon.ico. Then paste the HTML into the head section of your pages.
 
  
Why doesn't my new favicon show up?
   
Browsers cache favicons for a long time. Open the icon's address directly, do a hard refresh, or test in a private window. It can take a day or two to appear in search results.
 
  
Can I use my logo?
   
Yes. Choose Image and upload a square PNG or SVG of at least 512 × 512 pixels. Simple logos work best, because detail disappears at 16 pixels.
 
  
Is my image uploaded?
   
No. The icons are drawn and packaged in your browser.
 
 
 
  
 
 
 
Related tools