canivete
    en

    TOOL · IMAGE

    Generate a favicon from an image

    Drop your logo or any image and take the full kit: a real favicon.ico (16, 32 and 48 px inside), PNGs up to 512 px and the code ready to paste into your site's <head>.

    best result: a square image, 512 px or larger.

    Processed in your browser — your files never leave your computer.

    How it works

    1. Drop your image here

      Drag a .png, .jpg or .webp up to 20 MB, or click to choose. Best result with a square image of 512 px or more; if it is not square, the tool crops the center and tells you.

    2. Wait for the sizes

      The tool generates the favicon.ico (16, 32 and 48 px embedded), the PNGs from 16 to 512 px and an instrucoes.txt with the <head> code — all in your browser.

    3. Download favicon.zip

      Copy the files from the .zip to your site's root folder and paste the instrucoes.txt lines into the <head>. Done: icon in the tab, bookmarks and phone home screen.

    Frequently asked questions

    What comes inside favicon.zip?

    favicon.ico (with 16, 32 and 48 px embedded), favicon-16.png, favicon-32.png, apple-touch-icon-180.png, icon-192.png, icon-512.png and an instrucoes.txt with the code ready for the <head> and the PWA manifest.

    Which image makes the best favicon?

    Square, simple and 512 px or larger. A detailed logo turns into a smudge at 16 px — prefer a symbol, a letter or a strong shape with good contrast.

    What if my image is not square?

    The tool crops the center to make it square and warns you that it did. If you want a different framing, adjust it first in a crop tool and come back.

    How do I install the favicon on my site?

    Copy the files from the .zip to the public (root) folder of your site and paste the instrucoes.txt lines inside the <head> of your pages. The same code appears on screen, next to the result.

    Does it work for PWAs and the phone home screen?

    It does. The apple-touch-icon-180.png covers iPhone and iPad; icon-192.png and icon-512.png go into the PWA manifest — the instrucoes.txt shows exactly where to point each one.

    Is my image uploaded to a server?

    No. The sizes are generated inside your browser, on your device. You can even turn off Wi-Fi after the page loads.

    Other tools