What sizes should a favicon include?

At minimum, provide 16×16 (standard browser tab) and 32×32 (high-DPI tabs and taskbar). Adding 48×48 covers Windows shortcuts. 180×180 is required for Apple Touch Icons (iOS home screen bookmarks). Modern PWAs should also include 192×192 and 512×512 for the web app manifest.

What HTML tags do I need?

The downloaded ZIP includes a snippet: , , and . Paste these into your element.

Can I use an SVG as input?

Yes — modern browsers can draw SVG images onto a canvas element. Upload the SVG file in Image mode and the tool will rasterize it at each target size. Note that very complex SVGs may render slightly differently across browsers at small sizes.

Why are favicons always square?

Browser vendors and OS platforms expect square icons. Non-square images are cropped or letterboxed, which almost always looks bad at 16×16. The image crop tool ensures you select the square region that best represents your brand before downsampling.

What is the Apple Touch Icon?

When a user adds your website to their iOS or iPadOS home screen, Safari looks for a 180×180 PNG linked as apple-touch-icon. Without it, Safari takes a screenshot of the page instead, which looks poor as an app icon.

Developer 免费无需注册

Favicon Generator

Generate favicon files in multiple sizes from text or an uploaded image using Canvas API. Download individual PNGs or a ZIP with all sizes and ready-to-use HTML link tags.

正在加载工具…

关于此工具

Create professional favicons for your website without Photoshop or an online service that uploads your files. The generator works entirely in the browser using the Canvas API. Two creation modes give you flexibility. Text favicon mode lets you type 1–2 characters (initials, an icon glyph, or a symbol), choose from several font families, set the foreground color, background color, and optionally enable rounded corners or a circular shape — perfect for quickly generating a branded icon for a project. Image favicon mode lets you upload any image (PNG, JPG, SVG, WebP) and crops it to a square by letting you pan and scale the crop window, then downsizes it to each target resolution. The tool generates all standard sizes: 16×16 (browser tab), 32×32 (taskbar), 48×48 (Windows), 64×64, 128×128, and 180×180 (Apple Touch Icon for iOS bookmarks). A browser tab mockup shows a realistic preview of how the favicon looks at 16×16 next to a sample page title. Each size is available for individual PNG download. Clicking Download All as ZIP packages every size plus a snippet of the recommended HTML link tags ready to paste into your document head.

使用方法

1 Choose 'Text' or 'Image' mode.
2 For Text mode: type 1–2 characters, pick a font, foreground color, and background color, then adjust the shape (square, rounded, circle).
3 For Image mode: upload an image, use the crop tool to select the square region you want, then click Apply Crop.
4 Preview the favicon at 16×16 in the browser tab mockup.
5 Click the download icon next to any individual size to save that PNG.
6 Click 'Download All as ZIP' to get all six sizes plus the ready-to-use HTML snippet.

关于此工具

使用方法

常见问题