Simply enter your text, choose a font and color, then click the download button. The system will automatically generate icon files in various sizes. You can preview the effect in real-time as the generated icon will appear in your browser tab.
What effects are supported?
Currently, three main effects are supported: shadow (adjustable blur and offset), outline (customizable width and color), and gradient (both linear and radial). You can combine these effects to create unique icons.
How to adjust text position?
Use the position adjustment sliders to change the horizontal and vertical position of the text. Both horizontal and vertical positions range from -100% to 100%, allowing precise control over text placement in your icon.
Why are multiple download sizes offered?
Different devices and platforms may require different icon sizes. For example, iOS devices might need larger sizes, while regular website favicons use smaller sizes. Providing multiple sizes ensures your icon displays perfectly in all scenarios.
How to use color templates?
Click on any preset color template you like, and the system will automatically apply that color scheme to your icon design. These templates are carefully designed to ensure good contrast and visual appeal.
What icon formats are supported?
Currently, both PNG and ICO formats are supported. PNG format is suitable for modern browsers and devices, while ICO format is the standard format for traditional favicons. You can choose the appropriate format based on your needs.
How to download all icon sizes at once?
Click the "Download All Sizes" button, and the system will automatically generate a ZIP file containing icons in all sizes for both PNG and ICO formats. This feature is particularly useful for users who need a complete icon set.
How to adjust text transparency?
In the color control panel, there's an opacity slider under each color option, ranging from 0% to 100%. You can adjust the opacity of both text and background independently to create semi-transparent effects.
How to adjust font size and spacing?
In the basic styles control panel, you can use sliders to adjust font size (12-188px), letter spacing (-50px to 50px), and line height (0.8-3). These options allow you to precisely control how the text appears.
How to set icon border radius?
Use the "Border Radius" slider in the basic styles control panel to adjust the icon's corner roundness. The radius ranges from 0% to 100%, with 100% creating a perfect circle.
What fonts are supported?
The system offers a variety of carefully selected fonts, including modern ones like Playfair Display, Roboto, Open Sans, Montserrat, Poppins, as well as decorative fonts like UnifrakturMaguntia and MedievalSharp. All fonts are optimized for best display.
How to use gradient effects?
Select gradient in the effects panel and choose between linear or radial gradient. You can set start and end colors, and for linear gradients, adjust the angle (0-360 degrees). These options allow you to create rich gradient effects.
How to use bold and italic styles?
In the font settings panel, click the "Bold" or "Italic" button to apply the respective effect. These styles can be used individually or combined to create bold italic text. Note: Not all fonts support both styles.
How to center-align the text?
Text is centered by default. If adjustment is needed, use the horizontal and vertical position sliders in the position adjustment panel to fine-tune the text position until the desired effect is achieved.
How to apply the created icon to a website?
After downloading the icon, add it to your website's root directory and include the following code in your HTML head section: . For comprehensive device support, it's recommended to use multiple icon sizes.
How to use Emoji in Favicon?
You can directly input Emoji (😊 🎉 ❤️ etc.) in the text content. Emojis are treated as regular text, and you can adjust their size, color, and effects. Using a single large Emoji is recommended for best visibility.
How to display multiple lines in a Favicon?
Press Enter while entering text content to create a new line. You can adjust line height to control spacing between lines and adjust font size to ensure all text is clearly visible. When using multiple lines, it's recommended to increase the icon size for better clarity.
