Earlier we wrote about how to create a favicon in Adobe Photoshop. Now it is the turn of more progressive material – learn about how to connect a favicon to the site and, most importantly, for all possible platforms and mobile systems. A bonus attached optimized action, which will help to automate our follow-up.
Preparation of logo template in PSD format
So, first we need to prepare for a future template (logo that will appear at the top next to the address of our website). Open it using Adobe Photoshop and looking up when you go to menu Image-Image Size (Image – Size image) the true parameters of the picture – we are primarily interested in picture resolution that is sure to change to 300 pixels per inch in order to subsequently perform operations on the new document and keep all the proportions.
1. Open the document and see its dimensions:
2. If necessary, change the image resolution to 300 pixels per inch:
3. Now then crop it so the image got a 1 to 1 ratio – this point is selected as the main to remove unnecessary parts of the logo.
4. Check what we did by opening the previous menu item – Image-Image Size (Image – image Size) and make sure the correct aspect ratio (should be square).
Formats icons for each of the devices
Definitely need to keep up with the times, and it is the tablet and ultra modern laptops and mobile devices. So we have to clarify what exactly the icon set as a favicon. In the table below we have tried to answer this question.
The iOS version
The size of the icons
6 and below
8 and above
The previous icon sizes 57х57 pixels for Apple Touch icon on shiny Retina iPad. Too dull and not promising.
Huge icon sizes 152х152 for the device Apple Touch icon for Retina iPad. Very neat and beautiful.
The use of the code and the Declaration of PNG files as icons of the website
To all the previous steps have generated, it is necessary to predetermine the icons and put them inside the main file in the header.
To convert into the right variant logos, you must first prepare. Simply create a template with the action (link at the bottom of the article + video on how to use it), and save each file format .PNG at the resolution specified above. Next, list the code and enjoy the result on all devices.
In addition, you can learn the correctness of the input data and their relevance. Also to properly display icons favicon.ico in Chrome, you will need to write the code: