Sign up free

Favicon Generator from Your Logo

Upload your logo once and get every favicon file, a filled-in manifest and the HTML to paste, plus a preview of how it looks.

More tools
Size & cropResize ImageCrop ImageCircle CropRotate ImageFlip ImageSplit Image into GridChange Image DPI
CompressCompress ImageCompress Image to KBRemove EXIF Data
Color & effectsPhoto EditorPhoto FiltersBlack and White ImageBlur ImagePixelate ImageRound Image CornersAdd Border to Image
Text & watermarkWatermark ImageAdd Text to ImageMeme Generator
Collage & GIFStitch ImagesPhoto CollageGIF MakerEdit GIFSplit GIF into FramesCompress GIF

or drop files here

Accepts PNG, JPG, SVG, WEBP

Encrypted upload. Files are deleted automatically after 1 hour.

About Favicon Generator

This favicon generator turns one logo into the full set of icons a website needs, made the way browsers and phones expect them. The apple-touch-icon is never see-through, because an iPhone shows see-through parts as black: it gets your background color, with room around the logo. Android gets a maskable 512-pixel icon with the logo inside the safe zone, so a circle or squircle mask doesn't cut it off. Small sizes are sharpened so a 16-pixel icon keeps its edges, and a preview picture next to the ZIP shows the icon in a light and a dark browser tab and as an iPhone and an Android icon. More tools for website images, from compressing to resizing, are in Image Tools.

The ZIP holds favicon.ico with 16, 32 and 48 pixels inside, PNGs at 16, 32, 48 and 96 pixels (Google shows favicons in search results at multiples of 48), the 180-pixel apple-touch-icon, Android icons at 192 and 512 pixels, site.webmanifest and head.html. Upload an SVG and it's included as favicon.svg for browsers that use it. Your Site name goes into the manifest, and the Theme colour under More options into the manifest and into head.html, which holds the tags to paste. Put all the files in the root folder of your site, since the paths start with a slash. Logos that aren't square are centered on a square, never cropped, and Room around the icon adds 0 to 30% of space around the logo.

How to use Favicon Generator

  1. 1
    Upload your logo

    Choose or drop a square PNG, JPG, WebP or SVG, ideally 512 pixels or larger.

  2. 2
    Set background and name

    Keep Transparent background or untick it, pick the Background (when not transparent), and type your Site name.

  3. 3
    Generate the favicons

    Click Favicon Generator and check the preview picture before you download the ZIP.

  4. 4
    Add them to your site

    Unzip favicon-package.zip into your site's root folder and paste the tags from head.html into the head section of your pages.

Why use Cubfile for this

  • Right on every device

    A solid Apple touch icon for iPhones, a maskable icon for Android, and sharp 16-pixel tabs.

  • Complete icon set

    ICO, PNGs from 16 to 96 pixels, the Apple touch icon, Android icons at 192 and 512 pixels, and favicon.svg from an SVG.

  • Manifest and tags filled in

    Your site name and theme color are already in site.webmanifest, and head.html has the tags ready to paste, theme color included.

  • Preview before you unzip

    One picture shows the icon in light and dark browser tabs and as iPhone and Android icons.

FAQ

Favicon Generator: questions and answers

What files does the favicon generator create?
favicon.ico with 16, 32 and 48 px inside, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-96x96.png, apple-touch-icon.png at 180 px, android-chrome-192x192.png, android-chrome-512x512.png and maskable-icon-512x512.png, plus site.webmanifest and head.html, all in one ZIP. An SVG upload adds favicon.svg, and a preview picture comes next to the ZIP.
Why is my icon black or cut off on a phone?
An iPhone shows see-through parts of a home-screen icon as black, and Android crops icons to a circle or another shape. That's why the apple-touch-icon here always gets the background color with room around the logo, and the maskable icon keeps the logo inside the safe zone. Pick a Background (when not transparent) that suits your logo, and the favicons in browser tabs can still stay transparent.
Where do I put the files from the favicon generator?
In the root folder of your website, next to your home page, because the tags point to /favicon.ico and similar paths. Then paste the contents of head.html into the head section of every page.
Why does my icon look blurry?
Small or low-resolution logos get enlarged for the 512-pixel icons. Start from a PNG at least 512 pixels wide, or an SVG, and keep fine details simple, since the small sizes are sharpened but a 16-pixel icon only has room for a bold shape. Trimming white space around the logo with Crop Image lets it fill more of the icon.
Does the favicon generator cost anything?
No. One package is one task, with 2 in total for visitors and 2 a day for free accounts. VIP has unlimited tasks.
Share Favicon Generator with a friendIt runs in any browser, and they can try it without signing up.

Related tools

IMG Compress ImageShrink JPG, PNG, WebP and GIF with no visible loss, in bulk.
QR QR Code GeneratorMake QR codes for links, text, Wi-Fi and contacts, with your logo and colours.
IMG Resize ImageResize by pixels, percentage or social media preset, in bulk.
KBIMG Compress Image to KBHit an exact size like 20 KB, 50 KB or 100 KB for upload forms.
IMG Crop ImageCrop freely or to 1:1, 4:3, 16:9 and more. Animations stay animated.
GIF GIF MakerTurn images into an animated GIF, WebP or APNG with your timing.
😆IMG Meme GeneratorAdd captions and emoji to a picture or GIF and save the meme or sticker.
IMG Stitch ImagesJoin screenshots vertically or side by side into one image.