No se si habréis notado que desde ayer al lado de la dirección de Turutanga ya no aparece la “W” de wordpress. Y es que mi chico ha creado un favicon para mí! Menos mal que él entiende de esto, porque si no, no sé qué sería de mí!

Espero que os guste y eskerrik asko Jon!!

Favicon dosyasının özellikleri
Favicon terimi İngilizce “Favorites Icon”dan kısaltılmıştır. Bu favicon dosyası siteniz – blog’unuz ziyaret edildiğinde adres satırında belireceği gibi adresiniz sık kullanılanlara eklendiğinde de site – blog adınızın baş kısmında görünecektir. Favicon dosyası 16×16 piksel boyutlarında .ico uzantılı bir grafik dosyasıdır. Modern web tarayıcıları artık .gif ve .png uzantılı dosyaları da favicon olarak gösterebilmektedirler.

Tarayıcılarda Favicon Görüntüleri

Internet Explorer 7′de Sekmelerde , Sık kullanılanlarda ve adres çubuğunda favicon gözüküyor.

Favicon Internet Explorer 6′da Sık Kullanılanlar menüsü ve adres çubuğunda gözüküyor.

Örnek favicon Hareketli favicon

Oluşturma
İlk olarak kendinize bir logo tasarlayın.Daha sonra http://www.chami.com/html-kit/services/favicon/ adresine gidin.Bu adrese sizi yönlendirmemin sebebi herhangi bir uzantıdaki resminizi (gif, jpg, bmp, png vs..) ico uzantısına çevirebiliyor olması.Aslında bunu yapan programlar da var ama en kolay ve hızlı yolu bu.Siteye girdikten sonra “gözat” butonuna basıp ikonunuzu gönderin.Source Image’den tekrar bu ikonu gösterin.Scrolling Text’e isterseniz bir yazı yazabilirsiniz.Örneğin bendeki gibi; sitemin adresi teknolojihaber.blogcu.com olması nedeniyle ikomunun yanına teknolojihaber yazını koydum.Belki siz göremiyorsunuz çünkü bu Internet Explorer’da gözükmüyor ama Firefox’ta gözüküyor..Aynı şekilde Animate Favicon’un yanına tik koyarsanız ikon hareket ediyor ama bu da Internet Explorer’da gözükmüyor.Daha sonra Download Favicon’a basıp faviconunuzu indirebilirsiniz.

Faviconu Siteye Yerleştirme , Kodları uygulama

İndirdiğiniz dosyaları rardan çıkardıktan sonra faviconunuzu ve animasyonlu ikon seçeneğini de seçtiyseniz extra klasöründeki animated_favicon.gif dosyasını upload edebilirsiniz.Ama ico uzantılı dosyaları çoğu resim upload sitesi kabul etmiyor.Peki ne yapmalısınız?
Kendi Ftp’nize atabilirsiniz tabi benim gibi blogcu değilseniz.Kendi Ftpniz yoksa sitesi olan bir arkadaşınızdan bunu isteyebilirsiniz de tabi Ben öyle yaptım arkadaşımda kırmadı beni sağolsun.
Hareketli ikon için bu geçerli değil çünkü onlar gif uzantılı kolayca upload edebilirsiniz..
Resimleri upload ettiğinizi varsayıyorum ve devam ediyorum.Peki kodları nasıl ve nereye koyacaksınız ?

< head>
< link rel="shortcut icon" href="ico uzantılı faviconunuzun adresi buraya" >
< link rel=”icon” href=”hareketli ikonunuzunda adresi buraya” type=”image/gif” >

(Etiketlerin başlarına boşluk bıraktım onları sileceksiniz..)

Hadi hayırlı olsun…

Pernah melihat favicon?

favicon (kependekan dari favorit icon), juga dikenal sebagai website icon, shortcut icon, url icon, atau penunjuk icon adalah icon berukuran 16 × 16, 32 × 32 atau 64 × 64 piksel yang dikaitkan dengan ikon situs Web atau halaman Web tertentu.

Contohnya pada situs facebook, facebook mempunyai favicon dengn gambar sbb:

Pada halaman situs facebook favicon tersebut terlihat seperti pada gambar berikut ini :

Terlihat pada screen shot diatas ada gambar icon di sebelah alamat url dan di samping nama halaman pada tab.

Following are the 10 simple steps to set a Favicon in your wordpress.com blog :

1. Open wordpress.com
2. Login to your account.
3. Go to “My Dashboard” (2nd tab at top of the page)
4. Scroll down till u get “Settings“ section in left portion of the page.
5. Click on “General“ under setting.
6. On the rightmost of the page set “Blog Picture/Icon” by browsing an image then click on “Upload Image“.
7. In next step crop the image and set….Yes its all done…
8. Now refresh your page. Now you’ll be able to see Favicon but if it does not come then clear browser history and cache.
9. Again visit your Blog, You’ll be able to see the Favicon.
10. Cheers !!!

If you found this post useful then share this :

-Abhishek Singh

Favicon files are recognized by the “.ico” extension.
A favicon, also known as a website icon, special file that is located in your Web server’s root directory/favicon.ico.

So, what’s the trick to creating  favicon SEO?

1.Create an favicon image
Creating favicons is easy with these online favicon generators:

• http://genfavicon.com/
• http://www.favicon.cc/
• http://www.degraeve.com/favicon/

2. Upload favicon.ico to your root directory.

3. Put the following code in your html page in the header:
<link rel=”shortcut icon” href=”http://www.you-domain.com/favicon.ico” />

4. Are You Ready? Excellent. You’re really smart!

5. Now submit your site/favicon.ico for free to favicon directories and get listed. Yeap, favicon directories is also a great way build quality and relevant Backlinks.

• http://www.faviconize.com
• http://www.favicon.co.uk/add.php
• http://www.freshfavicon.com

The first time a user visits your site, browsers automatically searches for this [favicon.ico] file in the root directory. Otherwise, when the favicon.ico does not exist, the error.log shows favicon.ico as “404 file not found”. If your favicon.ico file is not located in the root directory, you probably have to specify the path way to favico.ico file.

All the other web browsers can load GIF or PNG format as favicon, but crappy IE. I browsed around (about 10 websites), got following result and rules from their source code.

If there exists a favicon.icon in the root directory, non-IE browsers automatically pick up it without having to specify the link tag inside the head tag.

To make sure IEs pick up your favicon

1. Create a favicon.icon file, then locate favicon.ico file on your server (prefer  in the root directory, but you don’t have to)
2. Define this line inside head tag <link rel=”shortcut icon” href=”/favicon.ico” /> .

Something everyone is asking me about , the little picture next to the address?

something i never really noticed but is becomming unusually popular and is also great trick to cover up the fact your using a CMS , the Favicon.

Simply use this little online tool http://converticon.com/ to convert your logo(.gif etc) into a .ico or icon file, then upload you ‘.ico’ to your server.

Finally add this code to the <head> section of your index.html

<link rel=”SHORTCUT ICON” href=”http://www.sweetlook.ie/favicon.ico”>

replace my href with the location of your icon, or feel free to use sweetlooks

Enjoy

There’s been a lot of buzz this week regarding last weekend’s posting on TechCrunch about Gmail messages with favicons. Some follow-up postings have uncovered more about the approach, which was commented on by Google in a July post on their support site.

Comments on the various posts vary from “good idea – this will make things easier to find” to “I hope this doesn’t give spammers a new way to trick us” to “What criteria is Google using to decide which messages get favicons?”

We applaud Google for moving in this direction – it’s something we’ve been promoting for awhile. For a few years now, we’ve been marking messages across all major email clients using icons and logos, and we recently expanded that by using favicons as well (ironically, our post about this even includes a Gmail screen shot). As such, we’ve learned a lot about what companies and consumers care about when it comes to highlighting messages. 

First, there absolutely must be a strong underlying verification method. Highlighting messages is useless (even dangerous) if the bad guys can use it to their advantage. In our Truemark  service, we use the industry-standard email authentication methods of SPF/SenderID and DomainKeys/DKIM to verify authenticity of messages. But that’s not enough (see When Authentic Isn’t Real), since bad guys can also authenticate their messages. So, we make sure that the message came from a domain or address known to be used by the company (essentially a whitelist). Also, the image displayed to the user isn’t embedded in the email where it can be altered – it’s delivered securely in real time over the web as messages are verified.

Next, the user experience must be very simple and intuitive. We started by using a mixture of generic icons and some company logos placed in the “from” field of the inbox, which addressed the basic goal of informing users about the integrity of the message. But as the service grew to highlight messages from more than 1000 senders, users suggested that we take it a step further and make the messages easier to find. In response, we increased the number of logos and added favicons to the mix. We’re now highlighting messages from more than 1700 companies using hundreds of logos and favicons. In fact, more than 90% of the messages we highlight have a logo or favicon.

Favicons are an ideal way to visually identify a message – they’re compact, widely known via their use in browsers, and usually are as distinguishable as the company’s logo (in fact, we’ve seen some companies start to rebrand themselves using a square logo that more closely aligns with online use). Though not all companies use favicons, we’re seeing the list grow every day. And best of all, users love it – they can quickly find what they want and know they can trust it.

Hilfe zur Einbindung von Favicons – ganz einfach.

http://www.favicon-generator.de/help.aspx

Für einige wird sich das jetzt vielleicht vollkommen banal anhören und wahrscheinlich werden es die meisten auch wissen, aber man kann auch bei WordPress.com Blogs eigene Favicons benutzen! Ihr wollt gar nicht wissen, wie lange ich nach so einer Funktion gesucht habe…

Die Bilder lassen sich wunderbar einfach über das Backend hochladen und zurechtschneiden unter Einstellungen -> Allgemein ganz rechts.

btw…

Es soll auch Leute geben, die nur einen WordPress.com Blog benutzen, ihr Tutorial-Schreiberlinge da draußen! Was ich damit sagen will: WordPress.com != WordPress.org. Manchmal macht es eben doch für die Nachwelt Sinn, eine Anleitung für bestimmte Versionen entsprechend zu kennzeichnen… hätte mir jedenfalls verdammt viel Sucherei erspart

EDIT: Ok, ich nehm alles zurück! Oo
Entweder hatte ich damals Tomaten auf den Augen oder… naja, mit den richtigen Suchbegriffen spuckt jetzt auch Google etwas dazu aus. Asche über mein Haupt!

I posted here back in February how I got the name for my url. I decided to make one of these images my favicon but it’s so tiny that I’m going to post it again.

You see that little icon by the web address in your browser?Well you to can create one for your website too!
http://ping.fm/xbKym

If you do not have a favicon currently and you are interested to, here’s how to can do it.

1. First, you will need an image. Any image will do provided that it is royalty-free and not copyrighted (meaning, you cannot use Coca-Cola’s corporate logo as you favicon).
2. Go to Chami.com’s Favicon Tool page.
3. Upload you image by clicking the “Browse” button and click “Generate Favicon”
4. After Chami’s tool completed the generation, you will be presented with the link to download you favicon. Click the download link and save the favicon on your computer. (You can also test your favicon by clicking on the “Test in Browser”
5. Unzip the contents you have just downloaded and upload the favicon to your webhost (”public_html” folder, for most of you).
6. You will now need to edit your header.php of your wordpress blog. Depending on the theme you use, locate the header.php folder and edit the file by adding the following code:
   

   

7. Save your header.php file
8. Hard refresh your browser by pressing the Ctrl+F5 keys. You should now be able to see your favicon next to your URL.

Note: If you wish to change your favicon, simply replace the .ico file with another. Enjoy.

Source: amoswong

There are two major value propositions for users of the Truemark service: find what you want and know that it’s real. Last week we announced our latest step in improving the user experience in email – use of favicons to visually identify messages in the inbox (see press release here).

Prior to favicons we used either a company logo or a generic “check-lock” to highlight legitimate messages. In July we started displaying senders’ favicons in the inbox, which allows consumers to identify the sender of the message at a glance. It’s a compact way to distinguish messages in an easily recognizable way.

Through July and August we continued to add favicons and logos – we estimate that about 90% of the messages we mark today (for more than 1700 companies) have a favicon or logo.

Typical Gmail Inbox w/Favicons

The screen shot above shows a typical inbox with a mixture of messages from individuals, retailers, social networks, payment and information services. Compare this to the sea of text you normally see in an inbox. 

Users we’ve surveyed have been unanimous in their support of this change – it dramatically improves their email experience and allows them to instantly find what they want. In fact, they want us to take it a step further and give them some kind of visual indication about every message (more on that in the future).

Le favicon sono piccole ma importantissime icone per il vostro spazio web: mostrate nella barra di navigazione e nella schede del browser (almeno parlando di browser abbastanza recenti), consente agli utenti di riconoscervi immediatamente!

Visualizza

Tal y como se puede ver en su blog, Youtube ha cambiado su favicon por uno de mejor calidad hecho por un blogger de Typophile. El cambio se ha notado y mucho, solo hay que fijarse en la barra de direcciones para ver la diferencia.

En la página web se hace una comparación entre la versión antigua y la nueva, claramente mejorada.

Jika kita perhatikan di samping kiri address bar (sebelah kiri tulisan http://xxx) kadang-kadang muncul suatu icon unik untuk masing-masing website yang kita buka, misal untuk wordpress ada logo wordpress, wikipedia ada icon “W” seperti pada gambar.

Icon-icon seperti itu disebut dengan “favicon”. Ukuran dari favicon adalah 16×16, 32×32, 48×48, 64×64 bahkan 256×256 pixel; sedangkan format dari favicon dapat berupa ICO, PNG, GIF atau JPG. Format GIF dapat berupa favicon animasi.

Pada awalnya, favicon berformat *.ico dan ditempatkan pada root directory dari webserver yang akan digunakan oleh IE sebagai icon dalam bookmark. Tetapi pada perkembangannya dengan menggunakan tag HTML untuk menunjukkan tempat dimana favicon berada yang ditempatkan pada head section dapat menampilkan format lain serta pada lokasi yang lain.

Cara membuatnya dapat menggunakan bantuan online tools seperti:

1. tools.dynamicdrive.com/favicon/
2. favicon.cc
3. html-kit.com/favicon/
4. degraeve.com/favicon/
5. chami.com/html-kit/services/Favicon/
6. favicon.co.uk
7. graphicsguru.com

dan lain-lain, ketik saja “favicon generator” pada search engine, pasti akan muncul banyak sekali online tools untuk membuat favicon.

Secara umum untuk menambahkan favicon pada website kita cukup dengan mengupload file favicon kita pada website dan tambahkan pada “head section” <link rel=”shortcut icon” “http://www.websitekita.com/favicon.ico” >; kadang-kadang ada sedikit varian dengan menambahkan type, tetapi jangan khawatir karena setiap website favicon generator akan ada cara instalasinya (menambahkan di website kita), tinggal diikuti saja.
Selamat membuat favicon .

Habréis observado que arriba, al lado de la url, hay ahora un iconito, por cierto soy tan poco original que he puesto el mismo de mi gravatar xD en fin, si queréis tener el vuestro, y no el típico de la W dentro del círculo, id al Panel de control>General, y a la derecha hay un formulario, más claro agua.

Lo he descubierto gracias a este blog, aunque ya había visto esa función…

I have been looking for a way to display Favicons for web sites in the bookmark bar, in Firefox 3 for OS X. By default, Firefox only displays the page title, which takes up a lot of space.

Previously, there existed a plugin to achieve this, but it is not supported by new versions of Firefox, but I found a great alternative – the Stylish plugin!

To get Favicons in Firefox 3 in OS X, do the following:

1. Go to userstyles.org and install the Stylish plugin
2. After installing it, install the Firefox Favicon style

That’s all you have to do – now enjoy all those icons…it’s an order!