Translated from 日本語 • View original Hello. This is Tsukada, who is in charge of UI design.
Today, I would like to talk about the favicon that comes with the website.
I enjoy designing and developing logo designs and designing sites.
I always left the construction of the front-end such as coding to another staff member.
And surprisingly, one thing that tends to be overlooked is the favicon.
A long time ago, bookmarks on PC websites and subtly next to URL input frames
It was only recognized as a pict icon with a service logo on it.
I was looking for a way to create a favicon (.ico) file on a recent project.
A blogger was posted about the types of favicon.
What! There are 21 of them! !
List of > favicon favicon.ico: for IE favicon-16x16.png: for tab view favicon-32x32.png: for Safari for Mac favicon-96x96.png: for Google TV favicon-160x160.png: for speed dials up to Opera 12 favicon-196x196.png: for Android for Chrome mstile-70x70.png: for Windows 8 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-310x150.png apple-touch-icon-57x57.png: for iOS apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon.png apple-touch-icon-precomposed.png
(The following is quoted from the summary of "IT Exploration")
There are so many of them^^;
Until about 10 years ago, it was good to set up the favicon of the website with a PC browser in mind.
Since Steve Jobs announced the iPhone about 8 years ago,
iPhone, Android, iPad, iPod touch and other multimedia terminals have appeared,
A situation where the design must be adjusted for each icon that is exposed according to those devices and OS.
In particular, a blind spot for me as a Mac user was the favicon that goes into the panel design of Windows 8.
The OS design has been flattened, and the picto icon is neatly placed on each color background.
Therefore, if you don't adjust the icons for Windows 8 with white blanking, the design tone will not match the other elements...
I can't make these many of them one by one.
If I spend more time creating a favicon, I **want to spend more time on design! ! **
So what I found this time was...
「Favicon Generator for all platforms」（Real Favicon Generator.net）。
This website automatically generates all the 21 Favicon files mentioned above at once. This is easy chin ♪
When you load a prepared favicon image and press the auto-generate button...
On the next screen, adjust the icons of iOS, Android Chrome, and Windows 8 to the device exposure destination.
You can set detailed settings such as icon color, background color, and margin size to suit your preferences.
In addition, as an optional function, it seems that it is possible to customize the settings of file size compression and scaling algorithms.
What's even more pleasing is that at the same time as the automatic generation of various icons for favicon,
The website
It also generates source code for writing in the internal elements.
By adding this code, you can greatly reduce the time spent on creating troublesome favicons☆
Now, when you finish installing the favicon on the website you are working on,
Next, we need to check how it was implemented on various terminals.
This is another simple and troublesome task...
However, "Favicon Generator for all platforms" is a favicon installed on the website
It will automatically check how it is displayed on various terminal browsers! This is a nice feature ^^
Of course, site debugging on actual various OS browsers must be done properly,
By utilizing this generator tool, you can significantly reduce the time it takes to create a favicon.
Designers, let's save time on tedious tasks like favicon production and spend **more time on creative work! **