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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

5 HOZZÁSZÓLÁS

  1. 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. 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.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét