创建一个图标

我如何为我的网站创建一个图标？

65917 次浏览
小开

GIMP is a good program for that. Just save the image as PNG, then add 

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

on the <HEAD>section of your page.

小开

You create a icon file that's 16x16 or 32x32 or 64x64. Name it favicon.ico and place it in the root of your website public folder.

There are websites that will convert other graphic formats to .ico for you. ie. http://tools.dynamicdrive.com/favicon/

小开

And if you are using asp.net try this way to apply favicon to your page :

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

but you can find more information here : http://doctype.com/

小开

If you want to create .ico files, you can also use GIMP to create favicons. Modern browsers can use normal image files, but originally I think it was just .ico files. It's an open source image editor similar to Photoshop. Create and edit an image of the right size (say 32 x 32), flatten to one layer (Unless you want multiple icons in the same file), and save as a .ico. It'll format it correctly, then use Stefano's <link rel="SHORTCUT ICON" HREF="/favicon.ico"> to use it in your webpage.

小开

I make my favicons either 16 x 16 or 32 x 32 using Photoshop. I save it as gif then and I use IrfanView to convert the gif to an ico.

小开

I use the open source Paint.net program along with the Icon plugin.

You can then create and save an image in the .ico format with all the different sizes embedded into the .ico file.

小开

Searching about favicons, I discovered I needed more than 10 kinds of files to work in all browsers and devices :(

I got pissed and created my own favicon generator, that creates all these files and the correct HTML header for each one of them: faviconit.com

Hope you enjoy it.

小开

If you already have a logo image that you want to transform into a favicon, then you can convert it using http://www.favicomatic.com/. It creates crisp favicons, and I haven't had to edit them after creating them. It will generate favicons at 16x16 and 32x32 and to quote them: "Every damn size, sir!". The site also supports/preserves transparency present in some pngs. Also, their site looks cool and is easy to use.

For example here is a stackoverflow logo: enter image description here

Here are some of the generated favicons:

enter image description here enter image description here enter image description here enter image description here enter image description here

They also generate the needed html:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

I looked at the first 20 or so google results, and this was by far the best.

小开

One of the best online favicon tools is FaviconGenerator.com. Fast, modern design, no fluff.

小开

When creating a favicon, you want to take the following factors into account:

  • Supported platforms Ten years ago, you only wanted to support desktop browsers and the solution was to generate the classic favicon.ico picture. Nowadays, you want to support iOS (and iOS Safari) and Android (and Android Chrome). Maybe Windows 10 (and Edge) and the new Mac Book Pro Touch Bar, too (macOS Safari). You cannot just use a single "one size fits all" image anymore.
  • Design As soon as you support multiple platforms, you are facing multiple design guidelines. For example, Google is using transparent icons for its own native apps on Android, while iOS icons cannot be transparent at all. You cannot just use a "single design fits all" approach.
  • Generated icons and HTML code For two or three years, the reference has been to generate as many icons as possible in order to cover all cases. I am afraid I created this trend all by myself :-/ The problem is that you end up with 20-something lines or HTML, which is way too much. In order to have a satisfying technical solution, you need to balance the amount of generated icons/HTML and the supported platforms.

As usual, you can create all these assets manually. Unless you have very, very specific needs and a budget, this is definitely not the way to go.

The right way for most people is to use a favicon generator that lets you decide of the look of all the icons and takes care of all the details. The only one which does this is Real Favicon Generator. Full disclosure: I am the author of this site.


提交答案