Set a Favicon for Your Website

In this guide, learn how to upload and manage your website's favicon — the small icon that appears on the browser tab next to your site's title. A favicon adds a professional touch to your site and helps users recognize your brand instantly across different browsers and devices.

Accessing Site Settings

Open the Grigora editor and look at the left panel. Click on the settings icon to access your site settings where you can manage various aspects of your website's configuration and branding.

Finding the Icons Section

Once in settings, navigate to the second tab labeled "Icons". This is where you can manage all your site's visual identity elements and upload the icons that will represent your brand across different platforms and devices.

Managing Your Site's Visual Icons

 

In this section, you can upload three key elements that define your website's visual identity:

Site Logo: Your main website logo that appears on your site

Favicon: The small icon that appears in browser tabs next to your page title

Apple Touch Icon: The icon used when your site is saved to an iPhone or iPad home screen, ensuring your brand looks professional on mobile devices

Optimal Icon Dimensions

For optimal display, make sure your icons are the correct size for each platform. You can hover over the info button next to each upload option to see the recommended dimensions for best results:

Favicon should be 32×32 pixels for crisp display in browser tabs across all browsers

Apple Touch Icon should be 256×256 pixels for high-quality display on iOS devices when users save your site to their home screen

Uploading Your Icons

Upload your properly sized icons by clicking the upload buttons and selecting your files from your computer. Make sure you have prepared your icons in the correct dimensions beforehand for the best visual results.

Automatic Implementation

After uploading your icons, they'll automatically appear in browser tabs when visitors access your website, and when users bookmark or save your site to their devices. This seamless integration ensures your brand is consistently represented across all user touchpoints.

Professional Impact

These small details make a big difference in your site's professional appearance. A well-designed favicon and proper touch icons help users instantly recognize your brand and create a more polished, professional web presence that builds trust and credibility.

Pro Tip: Design your favicon to be recognizable even at small sizes, and ensure it matches your overall brand colors and style for consistent visual identity across all platforms.

 


Was this article helpful?