favicon


Minden honlaptulajnak lehetősége van egyéni ikont társítani lapjához, mely később a látogatók böngészőjében illetve “kedvenceiben” megjelenik. Hogy egy konkrét példát mondjak: http://www.hwsw.hu vagy a http://www.tutorial.hu :)
Az ilyen tipusú képeket (ikonokat) hívjuk favicon-nak

Saját favicon-od használatához csak az alábbi egyszerű lépéseket kell végrehajtanod:

1.) készíts egy 16×16 pixeles képet vmilyen grafikus programmal (photoshop, PhotoPaint, Paint Shop Pro, Gimp vagy akár a Paintbrush is megteszi ha más nincs kéznél)

2.) a készített képet mentsd el favicon.ico névvel, majd töltsd fel a szerveredre, ahol a honlapodat is tárolod.

Az elkészített képet – bár régebben és is azt írtam, hogy elég a BMP-t átnevezni ICO-ra – érdemes egy konvertáló programmal/szolgáltatással rendesen ICO formátummá konvertálni (általában ezt a lapot szoktam ehhez használni: FavIcon from Pics, de itt találsz sok egyéb megoldást is.

3.) a honlapod forrásában lévő <HEAD> részbe illeszd be az alábbi sort

1
<link rel="shortcut icon" href="http://www.domainneved.hu/favicon.ico">

Így fog kinézni böngészőben:

és a “kedvencek”-ben

https-s lapoknál is lehet használni, csak ebben az esetben az alábbi módon illeszd be a HEAD részbe:

1
<link rel="shortcut icon" href="https://www.domainneved.hu/teiconodneve.ico">

Megjegyzések:

Internet Explorer alatt csak akkor jelenik meg a favicon, ha az oldalt előzőleg már bookmarkoltad (kedvencekbe felvetted).

Voltak visszajelzések, hogy mindezek ellenére még mindig nem jelenik meg az IE-ben a favicon, ezzel kapcsolatban olvastam attlad tippjét a weblabor-on: ha IE-ben nem jelenik meg elsőre a favicon, akkor az általános favicon-t (fehér lap kék “e” betűvel) egy kicsivel jobbra kell vinni, pl. a http://…. szövegre húzni és ott elengedni.
Nekem még ezzel sem sikerült mindig előcsalogatni, viszont e fenti módszer és a favicon-ra történő dupla kattintás 99%-ban működött. :)

Szintén a weblabor ugyanazon topicjában található meg Károly György Tamás egyik bejegyzése is, melyben azt írja le, hogy a normálisabb böngészők a PNG-t is kezelik favicon-ként (firefox, Opera) Ez esetben a PNG-t nem kell ICO-ra átnevezni, csak meg kell adni a típust a type paraméterrel:

1
2
<link rel="shortcut icon" href="/favicon.png" type="image/png" />
<link rel="icon" href="/favicon.png" type="image/png" />

Hivatkozott Weblabor topic: Favicon megin…
További információk: http://www.favicon.com

Kapcsolódó bejegyzések:
  • Volt már egy cikk a lapon a favicon-okról, úgyhogy most nagyon nem részletezném a dolgot. Ami kapcsán a bejegyzés született, hogy találtam egy nagyon hasznos kis …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • A Firefox böngésző egyre növekvő népszerűsége miatt ajánlott annak lehetőségeit figyelni, kihasználni. Az egyik ilyen lehetőség, hogy egyéni keresőket is felvih …

  • A tutorial.hu oldalon nagyon sok mindenre megtalálni a megoldást, ha valaki elakad egy weboldal készítése közben. Volt itt már szó a kód megírásáról, új oldalra …

  • Honlapkészítés közben néha jól jön, ha az egyes böngészők különböző szabványértelmezése miatt egyes CSS részleteket, kódokat böngészőhöz kötve tudunk definiálni. …

A cikket beküldte: Harder (http://blog.harder.hu)

5 hozzászólás

  1. San says:

    Sziasztok!

    Készítettem egy favicont, itt: http://tools.dynamicdrive.com/favicon/
    fel is töltöttem a honlapomra. Ahogy fent le van írva.
    Viszont a Firefox alatt nem jelenik meg. Explorer alatt meg simán mutatja.
    Megpróbáltam a fent leírtakkal előcsalogatni, de nem ment.
    Van valami ötletetek vagy tanácsotok?
    Előre is köszönöm!

    San

  2. Blog says:

    Kösz, hasznos volt!

  3. Vincze Ákos says:

    Tök jó ez az oldal… :-)

  4. Ian says:

    Köszönöm a tippet! Jó az oldal!

  5. anonym says:

    sziasztok.
    nekem a blogspot szolgáltatónál van blogom.
    az a bajom, hogy automatik. hozzárendeli a narancssárga logót ikonnak,
    és a HTLM kódomban nincs ” ” rész, és a domain nevem akkor az, hogy divattipp.blogspot.com? és oda írjam a domainnévhez?
    valamint a blogspot blogoknak hol a tárelye?A picasa webalbumok?mert oda nem engedi feltölteni a .ico formátumú fájlokat,.:(
    segítség, kezdő vagyok.

Szólj hozzá
a favicon c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>