How to Create a Favicon for Your Drupal Commerce Store

turned on MacBook Pro beside gray mug

A favicon is a small icon that appears in the browser tab next to the page title or bookmark icon. It is a great way to make your Drupal Commerce Store stand out and look more professional. A well-designed favicon can also help establish your brand identity and make your site more memorable to visitors. In this article, we will show you how to create a favicon for your Drupal Commerce Store in a few simple steps.

Step 1: Choose Your Design

The first step in creating a favicon is to choose the design you want to use. Your favicon should be a simple and recognizable symbol that represents your brand or website. You can use your logo, a letter from your company name, or any other design that you feel represents your brand. Just keep in mind that the favicon is small, so the design should be simple and easy to read.

Step 2: Create Your Image

Once you have chosen your design, it’s time to create your image. You can use any image editing software, such as Adobe Photoshop or GIMP, to create your favicon. The image should be 16×16 pixels or 32×32 pixels in size. It is important to make sure the image is clear and easy to see at this small size.

Step 3: Save Your Image

After you have created your image, save it in either PNG or ICO format. PNG is the more modern format and is widely supported by all browsers. ICO is an older format that was specifically designed for favicons but may not be supported by all browsers. It is best to save your image in both formats to ensure compatibility.

Step 4: Upload Your Favicon

Once you have saved your image in the correct format, it’s time to upload it to your Drupal Commerce Store. Log in to your Drupal Commerce Store and navigate to Configuration > Performance. Scroll down to the Favicon section and click on the "Upload image" button. Select your favicon image and click "Save configuration" to upload your image.

Step 5: Test Your Favicon

After uploading your favicon, it’s important to test it to make sure it’s working correctly. Open your Drupal Commerce Store in a web browser and look for the favicon in the browser tab. If the favicon is not visible, try clearing your browser cache and reloading the page. If the favicon is still not visible, you may need to check your Drupal Commerce Store settings or ask for help from a developer.


Adding a favicon to your Drupal Commerce Store is a small but important step in creating a professional and branded website. By following these simple steps, you can create a favicon that represents your brand and helps your site stand out from the competition. Remember to choose a simple and recognizable design, create a clear image, save it in the correct format, and test it to make sure it’s working correctly. With a little bit of work, you can create a favicon that helps establish your brand identity and makes your site more memorable to visitors.

Scroll to Top