Keresés a blogban

2009. szeptember 30.

Favicon a blogger bloghoz - Favicon for your Blogger's blog

A favicon az az ikon, amely a böngésződ címsorában a blogod címe előtt áll, illetve megjelenik a böngésző lapjainak fülecskéin is a blogod neve előtt.


Az elnevezés a favourites icon = kedvencek ikon rövidítése, és valójában arra való, hogy ha az olvasód eltette a honlapodat a kedvencekbe, akkor annak megnyitásakor az egyéni ikon alapján könnyebben rátaláljon a lapodra a kedvencek listájában. Valamiféle logószerű ikonocska ez, amelyet ma már minden weblaphoz illik elkészíteni, egyéni képecske, melynek mérete általában 16x16 pixel, a kiterjesztése pedig .ico


Ilyen ikont számtalan helyen online generátorokkal készíthetsz magadnak. Vagy te megrajzolod képpontonként, vagy pedig meglévő képből készítesz egyet. Mivel az ikon nagyon pici, ezért nem tanácsos részletekben gazdag képből készíteni. Ilyen generátort találsz pl. itt:

http://tools.dynamicdrive.com/favicon/
http://www.favicon.cc/
http://www.favicongenerator.com/
http://www.favicon.co.uk/

Ha elkészítetted a faviconodat, akkor hozzá kell rendelned a blogodhoz, de előtte valahová fel kell töltened, hogy ki tudjad linkelni. A Picasa webalbum .ico kiterjesztésű fájlt nem enged feltölteni (számára ismeretlen ez a formátum), tehát csak a webhelyeden keresztül lehetséges az ikon tárolása.
Hozz létre egy saját webhelyet a Google fiókban. (http://sites.google.com/)
Menj a főlapra, és csatold a fájlt.
Egy másik böngészőlapon menj be a blogodba, és hozz létre egy bejegyzést pl. Faviconom címmel, de ne tedd közzé, csak piszkozatban mentsd. A kódrészletek beírásához használd ezt az online konvertert. Azt is megteheted, hogy nem egy bejegyzésben írod meg a kódot, hanem megnyitod a Jegyzettömböt, és egy txt fájlban csinálod meg a következőket, ide viszont simán berakhatod a kódokat konvertálás nélkül:
A webhelyeden kattints a fájl nevére, és a megjelenő új ablakban a címsorból másold ki a címet, és illeszd be a bejegyzésbe (vagy a txt-be).
Ilyesmit fogsz látni:

http://7333238192416730029-a-1802744773732722657-s-sites.googlegroups.com/site/wiselady/Home/favicon.ico?attachauth=ANoY7co3-54DEG8Gk43y552x0c4t1HvvQhLWYM_hV_a1g_BgN9fO7XMQpHvuruRAlxamclyeTOrrtC7w_
f07jr5yWSPcCVKG5lZbAv2jzM6C5KB6-mUfvd3qckAQHVey7TMO3t2Q90hd4j9KrfrVVwbOhlirzW_S8An6Z3TetLmnfSzB833D-wGSwIAViVNA38PD6z3EOo8TWivcbLVGOvGHpAFw5-h8Uw%3D%3D&attredirects=0


Töröld ki a pirossal jelzett felesleges részt, a maradék a faviconod elérési útja:

http://7333238192416730029-a-1802744773732722657-s-sites.googlegroups.com/site/wiselady/Home/favicon.ico

Most írd be a következő kódot a bejegyzésbe (vagy a txt-be):

<link href='atefaviconodelérésiútja' rel='shortcut icon' type='image/ico'/>

Mentsd piszkozatban a bejegyzést (vagy mentsd el a txt fájlt), majd másold ki ezt a kódot.
Most menj ide:
Irányítópult - Elrendezés - HTML-kód szerkesztése
Keresd ezt a részt
]]></b:skin>

  </head>
Illeszd be a kettő közé az előbb kimásolt kódot:
]]></b:skin>
<link href='atefaviconodelérésiútja' rel='shortcut icon' 
type='image/ico'/>
  </head>
Mentsd el a sablonod.
Nézd meg a blogodat, a faviconnak ott kell lenni a címsorban.

Animált favicon készítése.
Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady

48 megjegyzés:

Altair írta... [Válasz erre...]

Nem hagyott nyugodni a dolog és addig próbálkoztam, amíg rájöttem, hogy az eddig semmirevaló Windows live fiókomban a http://skydrive.live.com oldalon lehet .ico-t is tárolni. :o)

Már kész is a szép új rózsa faviconom és kinn van. Nagyon köszönöm az ötletet! :o)

És most mondja Fiam-11, hogy a Imagine programmal (vagy ahogy ők hívják a teknősös játékkal) lehet .ico fájlt is létrehozni. Azt pedig innen lehet letölteni: http://logo.sulinet.hu/#</a

Altair írta... [Válasz erre...]

Itt a comment mellett nem lehet megváltoztatni? :o)

Wise Lady írta... [Válasz erre...]

Nagyon szép az új faviconod! Ügyes vagy!
Szerintem felesleges kitanulni a teknőc programot csak a favicon miatt, az online eszközök tök egyszerűek és jók. Persze, ha amúgy is ismeri az ember, akkor miért ne!
A windows Live szintén jó ötlet, kösz a tippet. A fájltárolásra rengeteg lehetőség van egyébként.

Altair írta... [Válasz erre...]

Igen, de ha már úgyis az msn-nel rámtukmálták anno a W. Live-ot, legalább vegyem hasznát is. ;o)

A teknőcös programot tanulták tavaly számítástechnikaórán, úgyhogy már az egerüket is animálták a fiaim. Majd továbbképeztetem magam velük. :o)

egy ember írta... [Válasz erre...]

Hát nekem meg nem sikerült :(
Így nézett ki a kódom
A sablonod formázási hiba miatt nem értelmezhető. Győződj meg arról, hogy a sablonban az összes XML-elem megfelelően le van zárva.
XML-hibaüzenet: Open quote is expected for attribute "{1}" associated with an element type "href".

és folyton ezt a hibaüzenetet írta:
A sablonod formázási hiba miatt nem értelmezhető. Győződj meg arról, hogy a sablonban az összes XML-elem megfelelően le van zárva.
XML-hibaüzenet: Open quote is expected for attribute "{1}" associated with an element type "href".

Wise Lady írta... [Válasz erre...]

Ilyenkor általában egy karaktert vagy egy elemet hiányol pl. > vagy /> vagy lezáró taget stb. Légyszi bővebbet írj erről. Esetleg a létrehozott webhelyed nevét, hogy rákukkanthassak. Ennek a blognak is pontosan így készült a faviconja, a módszer jó. Általában valami apró hiba szokott lenni ilyenkor.

Wise Lady írta... [Válasz erre...]

Azt reklamálja, hogy a link href nincs lezárva, kellene egy per kacsacsőr (shift+6 és AltGr y)
Nézd végig karakterről karakterre, hiányzik-e valami (pontosvessző, per, kacsacsőr stb.)

Ha másképp nevezted el a favicon fájlt, akkor persze annak a nevét kell beleírni. Nálam pl. favicon1.ico-nak hívják.

Wise Lady írta... [Válasz erre...]

Közben gondolkoztam rajta, és talán rájöttem mi lehet a hiba.
Nem írod, de ezt a bejegyzésben üzeni nem?
Szóval bejegyzésbe kódrészletet nem lehet csak úgy simán beszúrni, hanem használni kell azt az online konvertáló progit, amit ebben a kettővel ezelőtti posztban írtam le: Kódrészlet beszúrása a bejegyzésbe.
Te meg csak simán akartad nem?

Altair írta... [Válasz erre...]

Nem tudnál ajánlani egy olyan oldalt vagy könyvet, ami igazán könnyen értelmezhetően leírja, hogy lépésről lépésre hogy kell egy weboldalt létrehozni?

Persze én csak saját sablont szeretnék készíteni itt a bloggeren, de sajnos egyáltalán nem értek hozzá. :o)

KAnya írta... [Válasz erre...]

Istennő vagy! És mindig kitalálod, hogy mire vágyom:-) Látom, hogy nem az igazi a kép, amit választottam, de ezt használom mindenhol, úgyhogy..., na, lehet, hogy lecserélem:-)

egy ember írta... [Válasz erre...]

ááá! sikerült! a konvetálás volt a baj, köszi a segitséget!
így néz ki
helyiturista.blogspot.com/

Wise Lady írta... [Válasz erre...]

Megnéztem, nagyszerű!

Wise Lady írta... [Válasz erre...]

Altair: a saját sablon készítés a legnagyobb falat, ami csak a blogolásban elképzelhető. Persze nem lehetetlen, egy-két év tanulással elérhető. Kell hozzá egy képszerkesztő profi ismerete, a CSS és az xml nyelvek.
Én inkább a kész sablonok testreszabását ajánlanám, de nem beszéllek le a tanulásról.

Altair írta... [Válasz erre...]

Én is kész sablonba belepiszkálásban gondolkodom, csak szeretném meg is érteni közben, hogy mit csinálok. :o)

admin írta... [Válasz erre...]

Nagyon köszönöm az ötletet, fantasztikus, egy szép VackorMacikás logót készítettem, pedig tényleg tökhülye vagyok ehhez az egészhez.
Nagyon örülök az oldaladnak, és remélem, sok ötletet meríthetek még tőled!
Üdv! m.

Wise Lady írta... [Válasz erre...]

Hát ez nagyszerű! Hol lehet megnézni?

admin írta... [Válasz erre...]

Szia!
Az az igazság, hogy egy másik blogot akartam áthelyezni ide a bloggerbe, és közben rátaláltam az oldaladra, elkészítettem a faviconomat, aztán kiderült, hogy nem tudom az eredeti blogomat exportálni (vagy importálni).
Így aztán, mivel tényleg abszolút laikus vagyok a témához, és az eredeti blogommal hozzáértés híján jó sok időt foglalkoztam, hogy úgy-ahogy most már kinéz, visszatérek hozzá, nem hagyom ott szegényt.
Mivel kedves dolgot írtál a megjegyzésemre, ráadásul rövid időn belül, megragadom az alkalmat, hogy a segítségedet kérjem, bár egy másik blogról lenne szó, vagyis nem blogger, hanem freeblog.
Ugyanis, a korrekt leírásodnak köszönhetően, bár egész máshogy nézett ki az a része sikerült beillesztenem oda is a favicont, szóval ez sikerült.
De amit nagyon szeretnék, hogy egy Vackormacikás kép a blog címe mellett is látszódjék, az sehogyan sem megy. De talán ezt lehet, hogy priviben kéne. Mit gondolsz? Van kedved segíteni nekem?
blogom helye:
http://vackormacikak.freeblog.hu/
e-mail: a92764@gmail.com
Előre is köszönöm a válaszodat!!!

Kinga

Wise Lady írta... [Válasz erre...]

Kinga megnézem.

Dulmina írta... [Válasz erre...]

Sikerült! Köszönöm szépen a részletes leírást.

Wise Lady írta... [Válasz erre...]

Dulmina Nagyon jó a faviconod, örülök, hogy sikerült.

Nargiz írta... [Válasz erre...]

Nahát sikerült, nagyon köszönöm :))

Wise Lady írta... [Válasz erre...]

Nargiz nagyon jó lett!

Nők Mozgásban írta... [Válasz erre...]

Kedves Wise Lady! A favicon is sikerült :) ma jó napom van.
Íme a mű: http://nokmozgasban.blogspot.com/
Nagyon jól leírtad!! köszönöm.

Wise Lady írta... [Válasz erre...]

Nők Mozgásban: Hát ez nagyszerű! Igazán szép és profi ez a weboldal, gratulálok!

admin írta... [Válasz erre...]

Kedves WL!
Köszönetet mondani jöttem vissza ide, rászántam magam a fentiekben emlegetett oldal átköltöztetésére, és már alakul:)
Azóta profi lettem favicon készítésben:)
Itt meg tudod nézni, még egyszer köszönöm!

Wise Lady írta... [Válasz erre...]

Nem sokat segítettem. De örülök, hogy alakul. Sajnos megnézni nem tudtam, mert zárt a blog.

FLoRiDA írta... [Válasz erre...]

húúúú... már nagyon régóta próbálkozok és végre sikerült elérnem szóóóval most nagyon boldog vagyok xD
köszi mindent!!!!!

Wise Lady írta... [Válasz erre...]

Nagyszerű!

ÉdesMindegy írta... [Válasz erre...]

Kedves Wise Lady, sikerült a favicon, csakhogy én telhetetlen vagyok, mert animálva szeretném. Mit írjak át a kódba, hogy mozgó faviconom legyen?
A webs.com oldalról sikerült, innen nem kellett kódgenerátort használnom.

Wise Lady írta... [Válasz erre...]

http://www.bloggersbloggers.com/2010/08/animated-favicon-in-blogger-animalt.html

Puszedli írta... [Válasz erre...]

Nagyon szépen köszönöm! Sikerült! :)

ÉdesMindegy írta... [Válasz erre...]

Köszönöm, küszködök vele. :)

bruercsi írta... [Válasz erre...]

Hipijájéjjjjj!!!!
Si-ke-rült!!!!!! Végre valami nekem is sikerült, nagyon köszönöm!!!!!

dett. írta... [Válasz erre...]

:D Köszönöm a segítséget, mindig sokat törtem az agyam rajta, hogy vajon hogyan lehet ilyet csinálni! imádom, és egyből sikerült, így ahogy leírtad. köszönöm!!!

http://bernadett-baji.blogspot.com

Wise Lady írta... [Válasz erre...]

@dett.
Örülök :)
Megnéztem, nagyon szuper kis favicon!

Lidia írta... [Válasz erre...]

Skin és head részeket amiket írsz hogy keressük meg a HTML kódban, nem találom!
Csak külön külön, de együtt nem, így nem tudom hová illesszem be a favicon elérési útját... Kérlek segíts! :(

Wise Lady írta... [Válasz erre...]

@Lidia
Igen, az lehet, hogy már van írva közéjük valami más is. Akkor is az a lényeg, hogy a kettő közé írj. Vagyis vagy a skin mögé, vagy a /head elé kerüljön az a sor.

Nikoletti Petra - Lakberendező írta... [Válasz erre...]

Zseniális vagy! Szuperül működött!!!! Köszönöm!
P.

Emrik47 írta... [Válasz erre...]

Én png-ben mentettem el az ikont, és picasaweb-re töltöttem, a blog képei közé. És ezt a kódot használtam:

"kacsacsőr"link href='atefaviconodelérésiútja' rel='shortcut icon' type='image/x-icon'/>

Az ico kiterjesztés annyival jobb, hogy abban több méretben is tárolja a képet(ha szükség van rá).

Ezzekkel a megoldással ugye, az a baj, hogy hírolvasókba, ugyanúgy az eredeti favicon marad.

Wise Lady írta... [Válasz erre...]

@Emrik47
Persze, így is lehet.

Csarandász írta... [Válasz erre...]

köszönöm szépen a tippet, remekül bevált.
:)
acsd

Judit írta... [Válasz erre...]

Szia!
Nem tudom megcsinálni a favicont,pedig már mindent megpróbáltam. Lehet,hogy nem jól mentettem el a bejegyzésbe,vagy mi lehet a hiba? Én egy pici fotót szerettem volna,de mást se fogad el. Volt,hogy a kódot kiírta a blogom elejére,vagy eltűnt ugyan az eredeti flavicon,de az enyém nem jelent meg. Eddig olyan ügyes voltam,most meg nem megy. :(
szeretetmhely.blogspot.com ez a blogom.
Köszi,ha segítesz.:)
Judit

Wise Lady írta... [Válasz erre...]

@Judit
Ha pici fotót akarsz, akkor is át kell konvertálnod valamelyik ingyenes faviconkészítővel a képet .ico kiterjesztésűre. Jpg, png, gif stb. nem jó. A cikkben linkelt favicongyártó oldalakon meg tudod csinálni.

Judit írta... [Válasz erre...]

ahogy írtad,csináltam egy picike ico képet,beregisztráltam a google webre és oda feltöltöttem,meg van a link kitöröltem amit pirossal mutattál,feltettem a bejegyzésekhez,aztán ami itt van link < link href='atefaviconodelérésiútja' rel='shortcut icon' type='image/ ico' (ezt most széttoltam,mert nem engedte elküldeni) ezt is átkonvertáltam,kaptam egy hosszú cuccot,azt is betettem a bejegyzésbe, aztán ezt a linket amit itt bemásoltam betettem a ]]>
után, aztán semmi se történt. Ja még elmentettem a sablont. Lehet nem jól értelmeztem valamit.Mondjuk azt nem értem,hogy miért kellet ezt a linket átkonvertálni,ha csak a bejegyzésekhez kellett tenni? Az átkonvertáltat viszont a bloghtlm nem fogadta el. Valamit sajnos nem értek,ezért nem sikerült.:(
esetleg az email cimem: horvathjudit61@gmail.com
köszi,ha segítesz.

Wise Lady írta... [Válasz erre...]

Csináld txt fájlban a bejegyzés helyett. (Bejegyzésben azért kell konvertáálni, mert anélkül a kód működne és nem megjelenne)

Judit írta... [Válasz erre...]

Köszönöm! Sikerült!:)

Yzarr írta... [Válasz erre...]

Szia!

Sikerült, be írtam mindent úgy ahogy kellett, volt egy ideig faviconom de a blogger pár napja frissített, vagy nem volt elérhető számomra vmiért pár napig, és eltünt a blogomból pár dolog. Többek közt a faviconom is. Amit már egyszer megcsináltam, és volt is legalább egy hétig faviconom, de most már nincs, és hiába próbálom beilleszteni a megfelelő helyre a favicon elérési útját, bár hiba kódot nem ír ki a blogomba mégis a blogger fav-ja látható :S Mit tegyek? o.O :'( Kicsit el vok keseredve :S nézd meg kérlek Wise Lady az oldalamat : http://halhatatlanok.blogspot.com/

A.B -studio írta... [Válasz erre...]

Üdv :) én atw.hu ingyenes tárhelyet használok, és mindent jol megcsináltam de a total commanderben miután feltöltöm a tárhelyemre a favicon.ico logomat, azt a tárhelyen már csak egy fehér papirnak jelzi és ezután megnézve a weboldalt is csak egy fehér papir van a logo helyén.. arra gondoltam hogy lehet nem támogatja valami az .ico formátumot?! :S vagy nem tudom.. légyszi segítsetek :) weboldalam: abstudio.atw.hu

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-