Мне тоже периодически хотелось прикрутить нечто подобное к тому или другому своему сайту. Но до сих пор либо это желание было недостаточно сильным, либо среда активно сопротивлялась - в общем не отображался значок и баста. Теоретически всё просто: нарисуй иконку 16х16, сохрани как favicon.ico в корне сайта и будет тебе счастье. Если очень хочется соблюсти все приличия - пропиши ещё пару строк в заголовке. Практика же всегда изобиловала разными неожиданностями.

Среди таких неожиданностей останавливавших меня раньше оказывались отсутствие поддержки Internet Explorer'ом предыдущих версий этой иконки до тех пор, пока сайт не добавлен в избранное, интерпретация хостингом файла иконки как угодно кроме правильного варианта, ...

Теперь же аналогичное пожелание возникло у моих заказчиков и проблему стало проще решить, чем обойти стороной. Сайт заказчика обитает на приличном хостинге т.ч. технически favicon поддерживается. Правда описанный выше "теоретический вариант" не прокатил. Пришлось пошарить в Google. В результате непродолжительных поисков на одном из форумов обнаружил содержательное описание, которое и привожу ниже.

У кого-то еще 100-процентно не отображается favicon?

Самое главное заблуждение, на мой взгляд, – это то, что нарисовать можно и в фотошопе, а затем сохранить в .bmp или .gif и вручную переименовать в .ico – НИЧЕГО ПОДОБНОГО. Переименованный GIF однозначно не сработает. GIF-файл (в том числе и анимированный) не имеет никакого отношения к формату .ico и понимается только браузерами Firefox последних версий.
А переименование расширения .bmp может у кого-то когда-нибудь и сработало, но прозрачного фона иконки таким методом добиться точно невозможно.

Вообще, сохранить файл .ico при помощи Adobe Photoshop нельзя. Для этого существуют IconWorkshop или, например, MicroAngelo.

А в остальном, не объясняя почему именно (объяснять можно довольно долго), если у Вас ДО СИХ ПОР не отображается эта иконка, необходимо принять к сведению следующее:

1. Имя favicon.ico не обязательно. НО ОЧЕНЬ И ОЧЕНЬ ЖЕЛАТЕЛЬНО.
2. Основной формат картинки для favicon.ico – 16х16 пикселов, 256 или 16.7 млн. цветов. Но не помешает также знать, что формат ICO может содержать в файле НЕСКОЛЬКО картинок разных размеров и разного качества. Более того, это могут быть абсолютно РАЗНЫЕ картинки. В частности, некоторые посетители сайтов добавляют ярлыки сайтов на рабочий стол. Если Вы хотите, чтобы иконка вашего сайта выглядела прилично и на рабочем столе, стоит включить в нее картинки больших размеров (32 пиксела и, возможно, 48 пикселов). Главное, чтобы она при этом имела разумный "вес".
3. ПРЕДПОЧТИТЕЛЬНОЕ местонахождение файла favicon.ico – корневая папка вашего веб-сайта.
4. Оптимальный код для задействования иконки:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
5. Браузер Internet Explorer – это единственный браузер на сегодняшний день, который показывает иконку только в том случае, если сайт добавлен в "Избранное".
6. Если браузер Internet Explorer не показывает иконку даже после добавления сайта в "Избранное", в первую очередь действительно рекомендуется почистить кэш. Если и это не помогает, попробуйте просмотреть иконку браузером напрямую:
http://ваш-сайт/favicon.ico
Если она откроется в окне браузера – это есть хорошо.
Но если браузер будет пытаться загрузить иконку как файл (в т.ч. файл неизвестного типа) – это означает, что сервер, на котором находится ваш сайт, не настроен на отображение файлов .ico.
В этом случае, если у вас есть возможность создать или отредактировать файл .htaccess в корневой папке вашего сайта, можно добавить в него строку:

AddType image/x-icon .ico

Если Ваш хостер не предоставляет Вам такую возможность – про favicon.ico, к сожалению, в данной конкретной ситуации придется забыть...

В моём случае дело решилось редактированием htaccess. Да, не забудте очистить кэш браузера, чтобы увидеть только-что прикрученную к сайту иконку.

И на последок - есть специальный сайт для изготовления favicon из любой картинки - favicon.ru.

To add this image in your DotNetNuke Portal is very simple:

• Draw your GIF image 32x32 pixel, or use an Image that you have even if it has different sizes
• Go to one if the sites that transform your GIF file in an ICO file
• Save the ICO image with the name favicon.ico
• Move the file in the Your Portal Directory (eg. /dnn/portals/0)
• Check if you like it :)

To create my favicons, I've used the portal http://www.html-kit.com/favicon/ it is simple to use, just provide the image file, and click the button. It resizes  the image, if needed, and provide the file to download and also the possibility to test it in the browser.

Maybe it is a too simple topics, but when I've discovered how it was simple I thought that it could be useful for a real newbie.

Cheers,

Enzo

The favicon is based on the logo, so it can unleash its power much better when used in connection with the logo, but can also be used on its own as it has the letters “u” and “l” inside, standing for UserLogos(.org).

The Logo itself tries to show the adaptability of UserLogos.org and its users by having different versions, different shapes, different effects (shadow or glow) and different colors.

The items themselves should act as generic logos, trying to represent logos itself without having to be connected with for example Google, Ebay, Wikipedia and so on.

For the case the background is dark, this version should be chosen:

And finally the favicon:

Oh so tiny!

That's it! What do you think? What could I improve?

Para elegir estos 5 favicon probaron más de 300 variaciones del logo. También puedes enviar tu propio favicon y si les gusta tu idea podrá ser vista por millardos de personas al día.

There seems to have been a lot of negative reaction to this, which might seem a small issue, but it's always strange when a well-established company changes some part of its branding. It reminds me of the changes Apple made to their logo, from the rainbow apple to the glossy white.

In both cases, there is something I like about the original, something comforting, perhaps nostalgic. But this is a warning signal: I never like to make decisions based on nostalgia. There is something in our minds resistant to change and it fights to keep the familiar, even when the new is better. For this reason, when you make a change to anything, you shouldn't expect a wholly favourable reaction.

I think in a few years this new look will be firmly entrenched and seem completely natural.

New! From the creator of Better Friendfeed "subscribed to me" is an even potentially cooler script, Better Friendfeed "recommended". Sick of Friendfeed's dull, static recommended page? Use "better recommended" to ACTUALLY find some interesting friends! How does it work, you ask? It loads up your subscriptions, then loads up your subscriptions' subscriptions, and lists in order the most popular subscriptions that your subscriptions are subscribed to! WTH did you just say, you ask? I have no clue; it's 5am on a Sunday! YAY!

Anyway, you can install Better Recommended here.

...or Better Subscribed To Me here.

...or Add Favicon to FriendFeed Room links here.

...or Add FriendFeed Profile here.

Google recently changed is favicon. The way they managed this change is very interesting because they implicate their "customers" in their creative process. That is very new!

In a classical company, a brand agency would have made some proposition of logo declination to the marketing or communication department and they would have make some tests or focus groups to choose a solution. And then (not a big event it is just a declination) a brand book send to "collaborators" and graphics instructions and budget indications to manage the cost of the evolution.

Google, has just jumped over the branding agency step by organizing a competion with their customers. And they even allow themself to test some icons "live".

This process is very interesting in how they include their clients in their corporate culture. That highlights two points of the internet nature :

1. the agility and the zero cost whith which you can move your brand design
2. the community spirit that live in web users. I mean every web users feel being part of a movement.

Thus, the challenge that face every brand now is really to create a community and to find some ways to imply it in the inner brand culture. 

A favicon (short for favorites icon), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. A web designer can create such icons in several ways and many recent web browsers can then make use of them.

The Favicon is the little icon you see on the open tab of the web page you are currently viewing... The one you are on should look like a navy blue 'w'. Well, Midsummer Night's Design now has one... I almost forgot it too. It is easy to overlook such a thing. This is why I am commisioning my Project Manager (love you!) to start a checklist of 'often overlooked items' in web design... this one goes to the top! When the list is finished (which it may never be!), I will post it here.

The Favicon is not SO important so as to draw great attention... but something does seem wrong when it is NOT there. Such a little thing lends a lot more credibility to a page.

Just a note to those who wish to tinker with favicons in your design... check out a google search on the subject and use the snippet of code in the head of the page... without it, some browsers will not use the favicon. Also -- there are favicon generators on that search. It makes it idiotproof.

• FavIcon Generator - Use this online tool to easily create a favorites icon (favicon) for your site. Capable of generating desktop icons as well.

• favicongenerator - Create free favicon.ico page icons with Favicon Generator, instantly make custom Favicons for your website.

• FavIcon from Pics - Free and easy to use online tool that can create favicon (.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.

• favicon.cc - favicon.cc is a tool to create or download favicon.ico icons, that get displayed in the address bar of every browser.

• freefavicon - Generate a free favicon for your website from an image.

• ^{editor's pick} Favicon Editor - Make your own favicon with this online editor.

• 256 Pixels.com - 256 Pixels - a daily favicon design challenge.

• ajaxload.info - Ajaxload - Ajax loading gif generator

• ^{editor's pick} Favicon Generator - Favicons generated here contain text instead of images in order to be descriptive, but are colored to be nice looking.

• Buddy Icon from Pics - Buddy Icon from Pics.

• CoverIcon - Convert ICO to PNG or PNG to ICO with this little web application.

• Favicon Generator - Web script lab, Free and easy to use online tool that can create a favorites icon (favicon.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.

• Favicon Generator and Gallery - Create favicon.ico files to customize the marketing logo in Internet Explorer's favorites/bookmarks using our free online tool.

• ^{editor's pick} Favicon Icon Drawing Program Online Free - Draw your own favicon or icon online for free using this entirely, web-based, non-Java icon gnerator.

• GraphicsGuru - Free and easy to use online Favicon Generator tool that can create Firefox-compatiable favicon .ico images.

• Generate It - Free online favicon generator. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up.

• Favicon Generator Tool -A web-based favicon generator that can create custom favicon icons for your website.

Did I miss some good ones? Let me know in the comment.

Related articles
How to Add a Favicon to Your New Blogger?
How to Add a Favicon to Your WordPress Blog?

Seguimos los siguientes pasos:
Para linux (trabajé en ubuntu hardy):

1. Abrimos una terminal.
2. Navegamos hasta el directorio donde está instalado el firefox, así: cd /usr/lib/firefox-3.0/searchplugins/
3. Abrimos el archivo google.xml para editarlo, así (si usas gnome gedit o kedit si usas kde): sudo gedit google.xml
4. Localizamos la sección que empieza con <Image width=”16″ height=”16″>. Podrás ver que a su lado sigue una larga serie de caracteres (el ícono de Google codificado).
5. Reemplazar la codificación del ícono de Google con este código. Asegúrate que la etiqueta </Image> permanezca allí.
6. Guardar los cambios y reiniciar Firefox.

Para win2 (trabajé en vista):

1. Vamos al directorio C:/Archivos de programa/Mozilla Firefox/searchplugins
2. Abrimos el archivo google.xml con un editor de textos.
3. Seguir los pasos 4, 5 y 6 del apartado anterior.

Saludos :D

Fuente: Mozilla links

pwano

McDonalds may have dropped their "Supersize" menu upgrade due to increased attention on American's diets and tendency to overconsume.  But the "moderation" bandwagon isn't exactly overcrowded, as evidenced by walking down any grocery or convenience aisle, attending any major sporting event, or flipping through any consumer magazine.

Fact is, brands are scrambling to reach their audiences, impress them repeatedly to help build affinity, and ultimately incite (lure?) them to trial through a myriad of seemingly unconventional ways.  Sometimes the format is large, splashy, and in-your-face (uh, how about the beloved interstitial ads?).  But occasionally it's more subtle than that.

Enter the favicon.  A pint-sized pictograph.  A visual cue.  A graphical stimulus processed by your brain as a brand entity you relate to, welcoming you like a warm blanket, and perhaps increasing your propensity for trial.

A recent Webiscope post, Completing Your Brand with a Favicon, inspired me to comment on favicons.  The canvas on which to express your brand is only 16x16 or 256 pixels. 

This little piece of real estate can be one of the power tools in your brand identity toolbox.  While often displayed beside a bookmarked or favorite site, they are also on the tabs of tabbed browsers like Firefox and IE7, and in the address bar. 

Favicons are also earning higher profiles as elements of many social bookmarking sites, syndication tools, and API-enabled mashups.  Many blogs use favicon-based buttons to encourage visitors to hit Digg, Reddit, etc.

Favicons for mobile platforms is inevitable.  Tiny and mighty, small yet pervasive. 

Old Favicon	New Favicon

Some people seem to like to new icon, while many others (including myself) seem to prefer the old one. I personally think that the old favicon was instantly recognizable as the initial "G" from "Google", while the new one does not have that quality. For a brand name like Google, I believe it is very important to have a logo (or even something as small as a favicon) that can be recognized.

Google's reason for this change (as mentioned on their blog) is the following:

..we wanted to develop a set of icons that would scale better to some new platforms like the iPhone and other mobile devices..

They also state that the selection process was not easy, since they had to chose from among more than 300 different permutations. Some of the other alternatives they came up with are:

Seeing these designs, personally I would have chosen one of the more colorful designs with the capital "G" in it, since these two features (the capital "G" and the colors) are what comes to mind when you think Google. However, they also say that this is not the final design, but rather a first step to a more unified set of icons. So, hopefully, they will come up with something better. They also welcome suggestions, so if anyone can come up with a idea for a design, they can submit it here.

So, what do you think about the new favicon? Do you like it or not? and why?

Instead of a capitalized boxed 'G', you will now see the second g in Google.

It's amazing how significant a small icon in the browser address bar can be. I hadn't realised how often I subliminally use these icons. I'm pretty sure that when I glance at my open Firefox tabs that I use these icons to quickly determine what is what. I even get pee'd off when a site doesn't have one. Which shows you that an icon is worth a thousand few words. Although this isn't the case when I get into a lift (that's an elevator) and they have those buttons. You know the ones. Someone is dashing for the closing doors and you quickly try to re-open the doors but somehow can't.

The lift buttons look way too the same, in my opinion. That's why I prefer the simpler(?) 'OPEN' and 'CLOSE' buttons instead of icons that look like each other.

So maybe that's why Google changed their favicon. Maybe they were worried about looking too similar to everyone else. After all, bold capitalized letters are all the rage:

And it's suprising how quickly we humans adapt to change: at first I hated the new small g, but now I don't mind it at all.

sus creativos han diseñados varios favicon:

Incluso estan recibiendo propuestas, puedes crear un favicon para google y luego enviarselo:

http://www.google.com/faviconideas/

Información Oficial:
http://googleblog.blogspot.com/2008/06/
one-fish-two-fish-red-fish-blue-fish.html

Via:
http://blogandweb.com/2008/06/09/
detras-del-nuevo-favicon-de-google/

• tamanho 16x16
• formato .png, .gif ou .ico
• tamanho de 5kb no máximo
• e tranparência.

Ainda há algumas dicas no site como usar uma das cores básicas da Google, uma das letras... Só até o dia 20 de junho. Bye,bye and good luck!!

Favicon.ico oluşturma sayfasında, Web sayfanız için oluşturduğunuz Favicon dosyasını, web sitenizin root (ana dizin) klasörüne Upload etmelisiniz. Favicon dosyaları mutlaka 16*16 veya 32*32 piksel boyutlarında olmalıdır.
Favicon dosyanızın adı mutlaka " favicon.ico " olmalı. index ve default dosyanız olabilen; index.html veya index.htm veya index.php dosyanızda

<head> ... </head>

HTML tagları arasına

<link rel="shortcut icon" href="favicon.ico">

satırını eklemelisiniz.

Eğer, animasyonlu Favicon.ico kullanmak istiyorsanız;
dosyanızın adını " animated_favicon1.gif " olarak düzenledikten sonra, web sitenizin root (ana dizin) klasörüne Upload etmelisiniz.

index.html veya index.htm veya index.php dosyanızda

<head> ... </head>

HTML tagları arasına

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >

satırını eklemelisiniz.

Sitenize ilk defa girildiğinde genelde dikkat çeken elemanlardan biri de faviconlardır. Eskiden çoğu site favicon tasarlamaz, tarayıcının logosunu oraya koymasına izin verirdi. Fakat web'in gelişmesiyle standartlar arasına giren favicon kullanımı ile sitelerimiz biraz daha canlandı. Bazı site sahipleri faviconlar hakkında sorun yaşadıklarını belirttiler. Bunun üzerine favicon'larla ilgili şu bildiri ile karşılaştım. Birçok favicon sitesini indeksleyen bildiri, favorilere eklenecek cinsten.

and google's style/philosophy has become the favourite among us

but for this...i really cannot agree, it is UGLY

http://googleblog.blogspot.com/2008/06/one-fish-two-fish-red-fish-blue-fish.html

they did show their design process as well

to my surprise- all are ugly, ugly and ugly.

Se trabajo entre 300 setter de las que han quedado como finalistas las siguientes:

Si tiene algún diseño sobre google y quiere enviarlo, aun está a tiempo de poder hacerlo ya que el proceso de selección sigue abierto. Trae un poco de extrañeza ver a google cambiar tanto de estética pero abra que esperar si finalmente decide cambiarlo o por lo contrario introduce el diseño de algún usuario.

Si quiere subir su propio favicon pincha en el siguiente enlace. Sube Tu Propio Favicon

Si no sabes cómo empezar a construir uno, no hay problema aquí pensamos en todo. En la siguiente pagina podrás comenzar a fabricar un favicon desde cero y de una forma muy fácil.

www.favicon.cc

Al respecto Marissa Mayer escribe un post en el blog oficial de la empresa contando las razones por las cuales lo han cambiado (después de 8 años y medio de usar el mismo), en realidad se trata de nuevos diseños que escalen mejor en nuevas plataformas como el iPhone y otros dispositivos móviles, estas son las versiones actuales:

Aparentemente no son versiones finales, siguen haciendo pruebas e inclusive piden a los lectores que envíen sus propias ideas de diseño (algo nuevo en Google). El SDG es fuerte, definitivamente.

Enlace: One Fish, Two Fish, Red Fish, Blue Fish

Sitenize ilk defa girildiğinde genelde dikkat çeken elemanlardan biri de faviconlardır. Eskiden çoğu site favicon tasarlamaz, tarayıcının logosunu oraya koymasına izin verirdi. Fakat web’in gelişmesiyle standartlar arasına giren favicon kullanımı ile sitelerimiz biraz daha canlandı. Bazı site sahipleri faviconlar hakkında sorun yaşadıklarını belirttiler. Bunun üzerine favicon’larla ilgili şu bildiri ile karşılaştım. Birçok favicon sitesini indeksleyen bildiri, favorilere eklenecek cinsten.