In 10 seconds flat for FREE
(jpg, png, gif or bmp format images smaller than 30 mb supported)
No photo has been uploaded
This free online icon maker will convert a photo to a series of high resolution icon that can be used on your website, Windows, MacOS, Iphone, Ipad, Touch and Linux in one operation directly from your browser.
* The icon maker will maintain the aspect ratio of the image you upload. If your image is not square the best result will come from using a photo or image with a transparent background.
|Operating system/Device||Supported sizes in pixels||Filetypes|
|Microsoft Windows||16x16,32x32,48x48, 64x64 and 256x256||Format: .ICO .... using 16x16 icons|
|Mac OS X||16x16, 32x32, 128x128 and 512x512||Format: .ICNS (Format not supported).|
|Linux||16x16, 24x24, 48x48, 96x96||Format: .PNG .... More about icon generators|
|iPhone + iPod Touch||57x57, 72x72, 114x114, 144x144, 512x512||Format: .PNG .... More about iPhone favicons|
|iPad||29x29, 50x50, 72x72, 144x144, 512x512, 1024x1024||Format: .PNG .... More about iPad favicons|
|Web (Favicon)||16x16||Format: .ICO|
One of my clients had the need to create a link to a web service for their customers. They wanted to put their icon on the link! This started me looking for photo to icon converter services on the net.
I actually found quite a few, but none that really solved my problem.
Some only did favicons, others did the right thing but resized the uploaded image without maintaining the aspect ratio.
So I decided to solve it my self.
By far the best online service i found was Prodraw.net Pic to icon converter. If my service doesn't meet with your expectation or need, give theirs a go!
For more information on how to use the icons you create read this fabulous article by http://www.visualpharm.com masters of ui design and of course icons.
This site is listed in W3
With the increasing popularity of smartphones and tablets having 1 favicon for your website is no longer enough. Since Apple introduced the Add to Home Screen feature in their iOS operating system, iPhones, iPad’s, iPod’s and newer Android devices have supported adding a web site specific touch icon to the home screen of a mobile device.
Touch icons are the favicons for mobile devices and tablets. As with favicons, supporting touch icons adds to the professional look and feel of your website.
To add a touch icon to your site is relatively easy if you know HTML, and have access to the files of your website. In its simplest form you must add the following line to the header of all pages on your website:
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
Please note that the name and path of the image file can be anything you want as long as it’s specified in the header.
And of course put the corresponding .png file in the specified place for the visitor’s browser to find it.Start converting your images to icons Now!
According to Apple specifications you should provide either 1 high resolution 144x144 pixels image that will be automatically resized to 114x114 pixels icon for iPhones with the Retina display, or resized to a 57x57 icon on all other devices. Or you can specify each size and icon individually like this:
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/apple-touch-icon-144x144-precomposed.png" />
Also be aware that Apple devices will automatically add rounded corners, reflective shine and drop shadow to your touch icons unless you specifically tell them not to. You do that by using the precomposed keyword in your specification.
The computer interface with a desktop, icon, mouse and a keyboard as the primary interface was invented by Rank Xerox in 1973. But it was first when the company Apple reintroduced the concept with the first Macintosh Personal Computer that icons became popular. Since then Microsoft has also adopted icons for their Windows Operating System. And today we see icon based interfaces on everything from smartphones to professional workstations. Icons are simply everywhere, on the desktop of our devices, inside apps and in web applications. Without icons the world of computing would definitely be very different.
As app- or web-developers we need icons to build user interfaces. Then as now, an icon is a computer file containing one or more images stored in a special format. Initially there where several icon formats. Today only 2 icon formats are still in regular use: The Microsoft Windows ICO format, and the Apple Macintosh ICNS format. Linux and most other UNIX systems have discarded special icon formats altogether and are now using the standard image format PNG for their icons. All icon formats are similar in the way they are structured, and in how they are used. If you develop for all platforms you might need them all.Start converting your images to icons now!
A computer icon is by convention a square - Or in other words the width and height of the icon are the same. Today they range in sizes from 16x16 icons to 1024x1024 icons. As screen resolutions grow better, we will also see an increase in icon sizes. Depending on the context where the icon is shown it may be resized as it is shown on the screen, if an appropriate sized icon cannot be found in the associated icon file.
Most modern computers, tablets and smartphones support standard 24bit color and transparency, so there is no limit to the number of colors that can be used in an icon.
I still use 16x16 icons for the bulk of my user interface designs. A little old fashioned you might say. Especially in light of ever increasing screen sizes and higher and higher resolutions available on today’s computing devices, - but I actually think it makes perfect sense.
In designing icons I live by 3 rules:
Icon sizes vary greatly between platforms and devices. As a rule of thumb applications on devices with touch screens have bigger icons (red: they must fit standard size fingers) than the more traditional desk- and laptop computers. So even if you develop for iPad’s with the new 2048x1536 pixels 9.7inch Retina display, icon sizes should never go below 32x32 pixels, as you risk users being unable to “hit” the icons confidently with their fingers. If you develop user interfaces for more traditional PC’s and Mac’s 16x16 icons are still the standard.Start converting your images to the right format now!
What I find especially difficult is getting icons that convey the right message. There are of course many beautiful icon sets that can be bought or found for free on the internet. Often I find them lacking the specific icon I need or imagined for my application. And I have the choice to go with a less than “perfect” icon or have one made to order. As you may imagine, customers tend to focus on functionality and the bottom line not on the beauty of the application. If you are a professional developer like me you learn to live with it. Especially with applications made for business use, my experience is that the meaning of the icon used in your application is learned quickly. And thus the exact message of the icon is of small if of any importance to the usability of the application.
The best icons are very simple and show symbols that are widely understood. A printer for triggering the print function, 2 vertical lines for triggering the pause function, a simple triangle for triggering the play function and so on. Too many details in an icon is generally a bad thing, especially if the icon is small. But used with flair on high resolution tablets or smartphones big and detailed icons can definitely add to the wow factor of your application.
I personally prefer icons with loud colors. Colorful icons work best if used with a simple color scheme: I normally use RED for data delete functions, YELLOW or BLUE for editing or adding data, and GREEN for information functions, printing of reports etc.
I prefer placing icons in the order of most critical (red: to the left) to least critical (red: to the right) as a normal usage pattern in the western hemisphere is to drift to the right, in the Middle East and most of Asia I would expect the opposite.
If you design web applications to be integrated into an existing corporate solution using simple black and white transparent icons is by far the easiest way to integrate graphically.
Good luck with your projects