Tag Info

Hot answers tagged

13

The basics from Favicons - Best practice for 2013: ICO favicon.ico (32x32) PNG favicon.png (96x96) Tile Icon tileicon.png (144x144) Apple Touch Icon apple-touch-icon-precomposed.png (152x152) And a "painfully obsessive" cheat sheet to favicon sizes/types on GitHub. Always worth a read: ...


6

Regarding how this is possible, according to wikipedia: ( http://en.wikipedia.org/wiki/ICO_%28file_format%29 ) An ICO or CUR file is made up of an ICONDIR ("Icon directory") structure, containing an ICONDIRENTRY structure for each image in the file[...] (emphasis is mine) Header ICONDIR structure Offset# Size (in bytes) Purpose 0 2 ...


6

This tool is a super time saver. Try it out! It takes care of everything for you. Upload your image at something around 800px x 800px so its nice and crisp. http://realfavicongenerator.net/ Also add this meta tag so you can name your icon if some saves to there iOS device. <meta name="apple-mobile-web-app-title" content="Website Name"> Hope that ...


5

As mentioned, you need to re-draw the icon in the correct size. I've found this a bit difficult to do in Photoshop, so what I did was export an image in full size, and then use the favicon.cc generator to adjust the pixels manually. You can do this in any program, but I find this tool quite useful.


5

If you look at any good website you'll see that their favicon is not their logo, it's a tiny version that is similar enough to look right with the site. The simplest way that I've found, for conveying the brands message consistently in the favicon, is using the two most prominent colours or the colour scheme of the logo and the first letter of the company ...


4

Just to demonstrate that it is possible to produce a favicon with little rework and an automatic process, here's a badge which is used by a group I'm associated with. It's a heart and a fleur-de-lys. To create the favicon, I removed the thin lines in the fleur-de-lys and thickened the "outline" line where it pokes through the top of the heart. It could ...


3

The tricky thing about favicons is that they are tiny (well, while the classic favicon was 16x16 px, you can now use 24x24 px. Still quite small). Because of this, and just as it happens when working with small icons in general, you need to create a version of it pixel by pixel. Scaling just doesn't do. Check this related question: Tools or methods for ...


3

A tiny version of an icon must be created for the specific size. Even in the print world, we often do two versions of a company logo (which is, when you think about it, an icon with another name): one for "normal" use and one for small applications such as a business card, but it's even worse when your work is constrained to a grid of great big blocky ...


2

Generally, you can't "rework" anything. The best course is to recreate the fav icon by drawing every pixel specifically. Trying to reduce any image down to a 16x16 pixel image will result is essentially an unidentifiable blob.


2

Not sure of the 'why', but I know how to solve it – I had the same problem but just discovered Real favicon generator via this thread: StackOverflow: best practice for favicons 2013 and it does the job perfectly! You just need to throw in a high-res version of your icon and it generates all the icons you need (for mobile and tablet as well as desktop).


2

When I tried doing this, I got some cryptic error message when trying to save as PNG… anyway, I eventually did this: http://regx.dgswa.com/html/Gimp+ico+how+to Open your image in Gimp Make your canvas square Resize your layer to the image Scale the layer to the largest size in your .ico file like 64 pixels Duplicate the layer Scale the ...


2

you can do any version of your design while you are working in a bigger version of it by using symbols here you are the steps. illustrate you design in any dimension you like. select all your final illustration and drag and drop it in the symbols panel, and name it as you want. now drag your new symbol into your artboard dag as many versions you want to ...


1

Use this GRUNT task to generate all possible variants: https://github.com/gleero/grunt-favicons Generates all known types and sizes icons from PNG image. Uses ImageMagick. Input: square logo in png. You can also keep near the source files with resolution prefix e.g. source.16x16.png. Output: favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address ...


1

After digging around some more, I realized it behaves just like Photoshop. Window > New Window, then adjust the window appearance accordingly.


1

http://faviconit.com will create about 15 different icon sizes for all devices from one hi-res PNG.


1

If you need 16X16 icon then you should start design in 16X16 canvas. Resizing from a larger image is always going effect the clarity and crispness no matter what you try and tbh its not the right way to do. If you need series of icons 16/32/64/128 etc. Then all need to be designed in its original size. No easy!


1

ICO files are native to Windows and can include multiple images with varying resolutions and pixel depths. Usually they're embedded into an application as a resource file. They worked their way onto the web in Internet Explorer 5 as "favicons". If you're on Windows, there's a very nice tool called IcoFX to create multi-image icons from a single (or multiple ...


1

With device proliferation going exponential, this is becoming more common. I recently produced a favicon file with 7 different sizes. I don't know what the developer did to make them all work in the right situations. I try not to hurt my brain with that stuff.



Only top voted, non community-wiki answers of a minimum length are eligible