Favicons, those tiny iconic images displayed in browser tabs, play a critical role in website branding and user experience. Creating a custom favicon using Adobe Photoshop and embedding it into a Joomla 4 website can significantly enhance your site's professionalism and recognizability. This article guides you through each step of the ico design process.

Man Creating a favicon 1022x350

1: Designing the Favicon

Design your favicon with simplicity and brand identity in mind. Due to its small size, a favicon should be easily recognizable at a glance. Utilize your brand's colors and aim for a minimalist design that encapsulates your brand's essence. Often your company logo or a portion of your company logo can be converted into a favicon.

Let's use Cayenne Design's logo as an example. I removed the pepper icon from the logo and saved it as a jpg. A png would have been ok as well.


2: Saving the Favicon

After finalizing the image you want to use as a base for your favicon, we now need to upload it to a free online image converter that will change your image into the ico format.

Be Careful choosing your online converter!

You will find a huge number of online converters available. A large majority of them have [Continue] buttons well placed so that you mistakenly get repointed to a website asking you to download whatever app they are pushing. I use favicon.cc. Yes, it has a few unnecessary links but for the most part, it is straightforward. It also provides you with an editor enabling you to change colors and pixel layout. This is extremely beneficial as a large image is reduced to the small size of the ico image some of the icon edges become shades of color making the icon difficult to distinguish. You can see how I edited my ico in Steps 5 and 6 below.

Step One: In your browser, go to www.favicon.ico website and click on the [Import Image] button.



Step Two: Follow the numbered sequence and select the image that you want to upload to favicon.



Step Three: Click on the [Upload] button.


Making an Favicon 03


Step Four: As shown, you will see the converted image displayed in pixels on the edit screen. Using favicon's tools, edit the image so that the image displays vividly.


Making an Favicon 04

Step Five: As you edit your icon, notice that a smaller version below the editing screen also displays the edited version as seen in a browser. Use this view as a means to perfect your image.


Making an Favicon 05


Step Six: Once you are satisfied with your edited ico image, download it to your PC. In the next section, we will learn how to place it in your Joomla website so that it is displayed in the top of a browser when a guest visits your website.


 Making an Favicon 06

There is more to the story!

We succeeded in creating our .ico image, but this is not the end of the story. The .ico format is becoming outdated and replaced by .png, .svg, and .webp formats for favicons. The article, "Favicons: Importance, Formats, and Sizes," provides an overview of these new formats as well as information on how to make and employ them in your website.


"This article was initially drafted with the assistance of ChatGPT and other related GPTs, which were instrumental in generating outlines, suggesting ideas, conducting preliminary research, and creating images. However, it's important to note that all written content has undergone a thorough review process. In most cases, the material has been extensively rewritten to ensure clarity, coherence, and stylistic consistency. Moreover, the Cayenne editorial staff has meticulously checked the information presented for accuracy and reliability. Our commitment to quality and precision in our reporting and content creation process is paramount, ensuring that our readers receive trustworthy and informative articles."
ChatGPT Acknowledgment