NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
BackgroundColour pickerCompress & convertCropFaviconHEIC to JPGMemePlaceholderRedactResizeSVG optimizeWatermark

Favicon Generator

Every favicon size from one image.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

Preview
HTML for the <head> of your pages

  
site.webmanifest

  




Every file is drawn and packed in your browser, and the ZIP is built on your device. The favicon.ico holds 16, 32 and 48 pixel images stored as PNG inside the ICO file, which every current browser and Windows reads. The ZIP contains favicon.ico, PNG icons at 16, 32, 180, 192 and 512 pixels, site.webmanifest, and favicon.svg when you start from an SVG or from text.



  
How to use it

  
  1. Choose an image or SVG, or type a letter or emoji and pick the colours and shape.
  2. Check the previews, especially the tiny 16 pixel one, and fill in your site name for the web app manifest.
  3. Download the ZIP, put its files in your site's root folder, and paste the HTML lines into the head of every page.





  
Questions

  
Which favicon files do I really need?
Modern browsers need little: favicon.ico in the site root for old browsers and tools, an SVG or a 32 pixel PNG for tabs, a 180 pixel apple-touch-icon for iPhones and iPads, and the 192 and 512 pixel icons in the manifest for Android and installed web apps.
Why does my favicon look blurry or unreadable?
A detailed logo turns to mush at 16 pixels. Use a simple mark or a single letter with strong contrast, and fill the space: thin lines and small text disappear.
Why is the Apple icon on a solid background?
iPhones and iPads fill transparent areas of the home screen icon with black. Fill the background with a colour, or start from text on a colour, to control how it looks.
My new favicon does not show. Why?
Browsers cache favicons stubbornly. Open the favicon address directly, reload it, and restart the browser, or add a version to the link such as /favicon.ico?v=2.




        

    
About this tool

    
About the favicon generator
A favicon is the small icon in a browser tab, a bookmark list and on a phone's home screen. Different places want different sizes and formats, and this tool makes the whole set from a single source.
Two ways to start
  • From an image: a logo, a square PNG or, best of all, an SVG.
  • From text or emoji: one or two letters or an emoji on a background colour and shape you choose. Useful when you do not have a logo yet.
What the ZIP contains
favicon.ico with 16, 32 and 48 pixel images inside, PNG icons at 16, 32, 180, 192 and 512 pixels, a site.webmanifest, and favicon.svg when you start from an SVG or from text. The page also gives the HTML lines to paste into the head of every page.
Designing for 16 pixels
Detailed logos turn to mush at tab size. A simple mark or a single letter with strong contrast works far better, and it should fill the square. Check the tiny preview before you download. iPhones fill transparent areas of the home screen icon with black, so give the 180 pixel version a solid background.
If the new icon does not show
Browsers cache favicons stubbornly. Open the icon's address directly and reload it, or add a version such as ?v=2 to the link.
Every file is drawn and zipped in your browser; nothing is uploaded.
  

        

    
Related tools