How do I make a favicon, and how do I generate it?

como crear un favicon

What is a Favicon and what is it for

In this post, I will show you how to create a professional looking favicon for your website, because, when creating a blog, sometimes we forget the little details. Even if you’ve never created any other kind of icons before, I think I’m safe in saying that most people reading this will have managed to make a favicon at some point.

In fact, generating a favicon is easier than you might imagine. If you don’t use image processing software, you can also create it online or download a favicon from a webspace.

What is a favicon

Its main characteristics are:

  1. It is pronounced fave-icon.
  2. It is a small, iconic image that represents your website.
  3. It is most often found in the web browser address bar, but can also be used in bookmark lists and feeds aggregators.
  4. It is designed to match the logo or theme of a website.
  5. It makes it easy for users to have a quick way to recognize a website.

Other interesting facts about favicons are:

  1. They have been around since the early 2000s and are supported by all major web browsers.
  2. Firefox, Internet Explorer and Safari display them in the address bar, but Google Chrome only displays them in page tabs.
  3. Most browsers support them saved as .GIF, .PNG or .JPG files, but Internet Explorer only displays favicons saved in the .ICO format.

What is the origin of the word favicon?

Some clues as to the origin of these icons are:

  1. They first appeared in Internet Explorer 5.
  2. When a user bookmarked a web site for quick access, the page name was listed next to the icon. Hence the name “icon of a bookmarked site“.
  3. In the beginning, placing such an icon at the root of a website caused a 16-pixel square image to appear next to the URL in the address bar and in bookmark lists, without requiring HTML.
  4. These are also called shortcut icons.

How do you create a favicon

Create an image 16 by 16 pixels in size. These are very small dimensions, but that’s what this icon format requires. You should also limit yourself to the standard Windows colors.

If you wish, you can also create a 32 by 32 pixel icon, which will fit the size for the Favorites menu and location bar. You can even put 16 by 16 and 32 by 32 pixel icons in the same icon file. Windows will use the former for its menus and the latter when the user opens a folder that is set to display large icons.

However, you can skip this step of creating two icon sizes. Making the favicon with Photoshop can be a good alternative for any website.

Save the image as an ICO file (called “favicon.ico”, for example).

Upload it to your website or blog. You don’t need to upload one to every directory on your site if you don’t want to waste space. Simply place it in your root directory and web browsers will locate it.

What is a favicon for

A favicon is a small icon used to identify a website in a browser. Most browsers display it on the left side of the address bar, next to the URL. Some may also display it in the browser tab, next to the page title. They are also automatically saved along with bookmarks or “favorites.”

The difference between favicons and application icons is that their purpose is not to summarize an action or overcome language barriers, but to represent the site as a signpost and extend your branding in the browser.

As such, it will almost always be a smaller version of the site logo. Fortunately, it’s generally easier to recreate a logo in 16 pixels than an application icon.

While much larger sizes can also be used these days, a 16 px version is essential and an ideal place to start if you’re new to icon design.

How to create a favicon with Photoshop

First you have to have an image that is square. All favicons measure the same width as height. Now, you have to resize the image to 32 x 32 px to make it the size of a favicon. Another correct size would be 16 x 16 pixels, but the recommended size is 32 pixels.

At that size it will be difficult to make any modifications to the favicon, so if you don’t like the way it looks, I recommend that you go back to the original size and make any changes you think are appropriate from there.

There are different formats to be able to create the favicon:

  1. GIF
  2. JPG
  3. PNG

All of them are valid since the last step will be to save it as .ico but the best image format and that gives us better options is PNG, since we will be able to have transparent background in the favicon. In case your favicon does not need transparent background, you can choose any other option and it will be valid to create your file.

Well, we already have the correct size and format chosen and now, how do we pass it to .ico and convert an image into an icon?

Steps needed to convert image to .ico with Photoshop

First step: We need to download the photoshop file to be able to save in .ico format with the program.

With Photoshop, you cannot save or convert a file from a jpg or png to the .ico extension. On the positive side, there is already a solution for this problem and we only have to download a file and add it to the Photoshop plugins on our computer.

To download it, you can do it from these links:

  1. Download here the 32-bit Windows version of the plugins.
  2. Download here the 64-bit Windows version of the plugins.

Second step: Now it’s time to go to the Photoshop program path on your computer to paste the file in the plugins folder.

Once you have the file downloaded, unzip it wherever you want and keep the file ICOFormat64.8bi.

Right path:C:Program Files:Adobe Photoshop:

Third step: Saving or converting to icons

We just need to reopen Photoshop and add the Favicon to it

Once you have the file open and prepared with the perfect measurements, you have to go to File >> Save As and select the extension .ICO in the dropdown below.

If you don’t see this option, you have made a mistake in some step, go back through the guide and restart Photoshop to make sure everything is working correctly.

Create a favicon online or download it

One of these icons is a way to stand out from other websites. Although it is a small resource, it can help in content marketing and SEO strategy. There are many great strategies that can differentiate your website.

But, sometimes, the small details make all the difference. Especially, because many websites and businesses ignore those little things, among which is the favicon.

Creating a favicon online and downloading a favicon are simple tasks

Well done, it can lend credibility to your website and generate brand awareness. Creating one online and downloading it is one of the quickest and easiest ways to get a quality one for your site.

There are numerous applications such as Favicon.cc, Genfavicon. com, Realfavicongenerator.net or Favicon-Generator.org. They are versatile tools, which will help you to generate these icons, also for different mobile devices with various operating systems.

Generate a favicon, useful to gain professionalism

If there is one thing in running a website that is not essential, that is creating a favicon. In fact, few people even notice its existence and it really is too small to include any useful information in it when making a favicon.

Perhaps most importantly, creating such an icon adds professionalism to your site and identifies you as a web designer who attends to details of this kind.

How many people bookmark your website

This element used to have an interesting side effect. You could find out how many Internet Explorer users had bookmarked your site by simply counting the requests you had in your web server logs.

From the number of requests, you can estimate the total number of people bookmarking your site by applying this formula: the number of Explorer bookmarks divided by the fraction of your visitors who use that browser.

However, this effect is no longer relevant today. All major browsers load the favicon.ico to display in the web address bar of your visitors, whether they bookmark your site or not.

Leave a Comment

Your email address will not be published. Required fields are marked *

  Acepto la política de privacidad

  • Responsable: Santos Muñoz
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Registro en mi Newsletter: Alojada en Active Campaign
  • Destinatarios: los datos que me facilitas estarán ubicados en los servidores de Sered (proveedor de hosting de blog-seo.com) dentro de la UE. Ver política de privacidad de Sered. (https://sered.net/legal).
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
  • Información adicional: Más información en nuestra política de privacidad.

Scroll to Top