Written by Juan Pedro Catalá
Índice
One of the things that most represents a company or a brand is its logoTherefore, it should be present in favicons or icons so that when the visitor navigates through our page, saves it in favorites or saves a link in the cell phone, our company logo appears.
Currently, most websites already use the favicon for browsers, but not the rest of the icons optimized for other devices or systems. Next, we will see the correct way to specify icons for all devices and operating systems.
How to create an icon for browsers
We start with the logo of our company in a 512px x 512px .png image, from this we have to generate an image of 16px x 16px in .ico format which is the one we will use as favicon.
To generate this browser icon or favicon we can use free online tools such as the one provided by DynamicDriveThe program also generates the respective icon for the Windows desktop versions, so that if a person drags the browser icon to the desktop, he/she will use the larger version so that it can be seen correctly.
By standardization, this generated image must be called favicon.ico and must be placed in the root of our website. For example, on our website it is located at https://www.humanlevel.com/favicon.ico. Now we would only have to indicate in the section <head> of the HTML of our page the route where our icon is located, for this we would use the following code:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
By default, most browsers look for the favicon.ico file in the root without specifying the above code, but it is always best to specify it in case a browser does not.
Nowadays, browsers already support .png or .gif favicons, but it is advisable to continue using the .ico format for compatibility with older browsers.
How to create icon or web clip for iPhone, iPad and Android
Apple invented a specification, to declare the icons for the iPhone that they have later adopted in all their devices and that Android supports since its version 2.1.
The code to specify in the section <head> would be the following:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
The image must be a .png of 57px x 57px. iOS devices will automatically apply effects to make it look like a button, rounding corners, applying shadows, etc. The latter format is not compatible with Android devices, so I do not recommend its use. If you do not want these effects to be applied and support Android you have to change the code to the following:
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
With the increasing resolution of Apple devices, icons were required to be larger and larger in order to display properly on retina displays and not look pixelated. To do this, Apple introduced a variation of the above code in which the icon size is specified, so that different devices could choose the icon that worked best with their screen resolution. The icon size specification for Apple is done through the “sizes” attribute.
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
Images should be the same size as specified in the “sizes” attribute, i.e.: 72px x 72px; 114px x 114px and 144px x 144px.
As with favicons, the names specified in the images are standardized and should always be so. These icons should be in the root of our web, since by default the devices look to see if the files exist even if they are not specified in the code.
How to create the icon or tile for Windows 8
Just as Apple did, Microsoft came up with a specification for declaring the icons used on the start screen in Windows 8.
To do this, you must generate a .png of minimum 144px x 144px, if it is larger it is fine as long as it is square, and specify the following code in the <head> of the page:
<meta name="msapplication-TileImage" content="/tile.png" />
<meta name="msapplication-TileColor" content="#d83434" />
In the first goal, we specify the path to the image and in the second one the background color we want the tile to have in RGB format.
How to create the icon for MAC dock
MAC does not natively support any tag to grab the icon, for this there are applications such as Fluid.app that encapsulate web applications as if they were desktop applications.
This application checks for the following code in the <head> section of the page’s html to obtain the icon and the name of the website.
<link rel="fluid-icon" href="http://www.midominio.com/fluidicon.png" title="Nombre de tu empresa o marca" />
The image must be a .png of 512px x 512px to support any desktop resolution.
