Favicon

[Iris17]

hoi,

ik heb een mooie favicon gemaakt, 16 x 16 pixels.
Niet zo moeilijk, het plaatsen zou ook niet zo moeilijk moeten zijn.
Echter, ik krijg het toch niet voor elkaar.

wat heb ik gedaan:
ik heb in in het 'head' deel de volgende code geplaatst:
<link rel="shortcut icon" href="images/favicon.ico"
type="image/vnd.microsoft.icon" />

In images heb ik de favicon geplaatst. Zou toch allemaal moeten werken, toch?
Echter, bij het plaatsen van de pagina, gaat het bij de favicon mis. Zou deze toch nog te zwaar zijn? (het is echt maar een paar kb).

Ik hoor graag jullie reactie.


grt


Iris

 

[fritzi]

Probeer eens om de favicon in de root directory te plaatsen (de map waar je index.html staat).

Deze code werkt bij mij altijd zonder problemen: <link rel="icon" href="/favicon.ico" type="image/x-icon">

Verder moet je even de cache legen - of andere browser opstarten - om de wijzigingen te zien.

Succes!

 

[csshunter]

Hoi Iris17,

... Echter, bij het plaatsen van de pagina, gaat het bij de favicon mis.

Voor de veiligheid: wat er mis gaat, is dat dat het uploaden niet lukt, of dat het resultaat bij opvragen van de pagina nul komma poffertje is?
Ik vermoed her laatste - volgende vraag: in welke browser gaat het mis? Alleen in Internet Explorer (welke versie?), en/of in andere browsers?

Een favicon.ico van 16x16px kan onmogelijk te zwaar zijn, dat zal het niet zijn.
Misschien is het toch op een of andere manier een ongeldig .ico bestand geworden. Met welk tekenprogramma heb je de favicon opgeslagen?

• Je zou eens kunnen proberen de favicon te openen met IrfanView (gratis te downloaden), en dan nogmaals op te slaan als ico-bestand (IrfanView maakt 100% goede favicons).
• Je zou eens kunnen proberen of het wel werkt als je het complete pad naar de favicon opgeeft, dus:

<link rel="shortcut icon" href="http://www.mijndomeinnaam.nl/images/favicon.ico" type="image/vnd.microsoft.icon" />

• O ja, Internet Explorer schijnt geen favicon te kunnen laten zien als je een site lokaal bekijkt: niet bij bekijken op je pc, maar alleen bij bekijken in het eggie op internet.
• O ja: en heb je wel een eigen domeinnaam, of zit je met een homepage-site ondergebracht bij een provider? Zo ja, laat die dan zijn eigen favicon zien? (dan ben ik bang dat er weinig aan te doen is) (hoewel het ook van de provider kan afhangen, want http://home.tiscali.nl/developerscorner/ toont bijvoorbeeld wel mooi zijn eigen favicon - in alle browsers)
• O ja: zie je de favicon trouwens wel verschijnen als je 'm rechtstreeks als URL inplakt in de adresbalk van je browser?

En heb je anders een linkje naar de pagina waar het niet werkt?

Stel je een paar simpele vraagjes, krijg je nog veel meer vragen terug!

Met vriendelijke groet,
CSShunter

 

[csshunter]

Aha, Fritzi gaf een kruispost!

• Het legen van de browser-cache (Tijdelijke Internet Bestanden) is inderdaad een goeie. Die strooit soms roet in het eten: iedereen ziet het dan goed, behalve jezelf!
• Het plaatsen in de root directory hoeft niet perse. Hij kan ook ergens anders zitten, en je kunt ook per subdirectory een ander favicon hebben.
• Volgens Wikipedia over het bestandstype ICO is alleen type="image/vnd.microsoft.icon" de enige echte geldige type-aanduiding. En rel="icon" zou moeten zijn: rel="shortcut icon".

Maar het type hoeft er niet perse bij, zegt de Engelse Wiki over favicon-pagina: *)

The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera.
    * <link rel="shortcut icon" href="http://www.example.com/myicon.ico" />
The following is also acceptable:
    * <link rel="shortcut icon" href="/somepath/myicon.ico" />

Als ik het in dit formaat doe (met "shortcut icon", met het complete pad, en zonder type), werkt het op deze manier:

<link rel="shortcut icon" href="http://developerscorner.nl/csshunter/images/csshunter48x48.ico" />

• Zie: Het Bewijs.
• Dat is een subdirectory van dit domein, en heeft een eigen favicon.

Dat zo'n klein frutseltje het toch zo lastig kan maken! :d

Met vriendelijke groet,
CSShunter
__________
*) NB: de Nederlandse Wiki-pagina over het favicon geeft wat andere (soms tegenstrijdige!) info, en ook veel minder uitleg en links. - De Engelse versie lijkt me degelijker.

 

[Iris17]

hoi

dank voor jullie reacties.
Alles geprobeerd.... niks werkt bij mij. En nee.... niet blond. Just a new Dreamweaver.....

Wie kan ik eens (liever niet door de hele site hier neer te zetten) de codering van mijn website 'in de maag splitsen' om eens te kijken wat er allemaal 'fout' is. Ik krijg 'm namelijk ook niet op google gevonden. Codering zal dus wel een rommelzootje zijn..

Wie o wie wil me een paar stapjes verder helpen?

thanks

Iris

 

[tutorial]

Het niet vindbaar zijn op Google hoeft niet zozeer aan de HTML liggen. Google indexeert nieuwe websites niet zo snel tenminste als je geen backlinks krijgt/hebt. Backlinks zijn kort gezegd links naar jouw website vanaf andere websites. Maar goed dat heeft weinig met het icoon te maken

Je kunt dit doen:

Als je nu eens kopieert wat tussen de HEAD tags staat en hier plaatst dan kunnen we misschien zien wat er mis gaat (gebruik wel de code tag wanneer je het bericht plaatst).

Verder moeten we het pad van het icoon weten.

Of dit:

1. Plaatst het icoontje in dezelfde map als het HTML bestand.

2. Gebruik de volgende HTML tag ipv de jouwe voor de icoon hernoem myicon.ico naar jouw bestandsnaam (de quotes "" zijn erg belangrijk verwijder die niet):

<link rel="shortcut icon" href="[B]myicon.ico[/B]" />

 

[csshunter]

Eh, van een afstand ontbreekt ons het aan een paar essentiële gegevens om de diagnose bij patient favicon te kunnen stellen.
Nog even terugkomend op de open vraagjes uit post nr. 3 hierboven:

1. Is het uploaden gelukt? dwz. kan je de favicon.ico zien als je in de browser de URL ernaartoe inplakt?
2. Kan je de favicon op geen enkele browser zien, of bv. alleen niet in Internet Explorer?
3. Met welk tekenprogramma heb je de favicon opgeslagen?
4. Heb je een eigen domeinnaam, of zit je met een homepage "onder" de site van je provider?
5. ... en voor alle veiligheid: het is toch niet een soort preview-venster van Dreamweaver, waarin je het (niet-)resultaat bekijkt?

En de prima vraag van tutorial:

• Kan je hier plaatsen welke code in de <head>...</head> van de pagina staat?

En een verse vraag als toetje:

• Kan je het favicon.ico hiernaartoe uploaden als bijlage (via het paperclipje bovenaan bij het reactie-venstertje)?

Met de antwoorden op deze vragen zouden we toch een heel eind moeten komen om je favicon tevoorschijn te toveren!

Met vriendelijke groet,
CSShunter

 

[Iris17]

hoi alle meedenkers,

wat kan een mens toch blij zijn met virtuele helpende handjes...

ik zie dat ik een enorme brij in mijn head to head codering heb staan (het is tenslotte mijn allereerste website...). Er staat ook style.css in. (jajaja, ik ga me vandaag eens storten op de opbouw van een site; ik kan m ook niet in google vinden dus het is gewoon een zootje (al is het eindresultaat best okay.....). Inschrijfformulier werkte ook niet... PHP is not my middle name yet (maaaarrrrrr, oh wat vind ik het leuk om websites te maken en enorm veel te leren!!)
maar mbt favicon staat het vlgd erin

<link rel="shortcut icon" href="http://www.xxxxxxxx.nl/images/favicon.ico" (xxxxx is naam van de website)
type="image/vnd.microsoft.icon" />

en dit is de favicon (gemaakt met http://tools.dynamicdrive.com/favicon/)

dusssss.

weer een lekkere hersenbreker zo voor het weekend!

alvast dank!

 

[csshunter]

Hoi Iris,
't lijkt wel alsof ze ergens niet willen dat dit probleempje wordt opgelost...

en dit is de favicon

Ehm, ehm, waar dan?

Dacht even dat je favicon toevallig een

grijs vierkantje in de kleur van de helpmij-achtergrond is (klik),
maar de broncode van deze pagina is onverbiddelijk: de ziener Xienix zou er jaloers op worden.

Groetjes,
CSShunter

 

[Iris17]

goedddd, paar kopjes koffie verder en ja hoor.... ze bedenkt dat de favicon er bij moet... Sorry...

deze had ik overigens omgezet naar favicon.ico. Echter, ik krijg geen .ico's geupload.

grt


iris

 

[csshunter]

't lijkt wel alsof ze ergens niet willen dat dit probleempje wordt opgelost...

...

Echter, ik krijg geen .ico's geupload

Zie je wel, ze willen het ergens niet. *)
Dat favicon van jou krijgen we zo nóóóóit te zien.

Maar dan gaan we het even omgekeerd doen.

• Ik heb van jouw plaatje een favicon van 16x16px gemaakt, is dit ico-plaatje geworden:
  
• Kan je hier downloaden: www.developerscorner.nl/csshunter/tests/images/favicon-iris16x16.ico

Als je dit favicon nu uploadt naar jouw server, en de naam in je bestand even aanpast, zou die-ut moeten doen.

1. HET WERKT! Hoera, dan weten we dat het aan de ico zelf lag. Klaar!
2. HET WERKT NOG STEEDS NIET! Hoera, dan weten we dat het niet de favicon was (want dit is er in elk geval eentje die werkt), maar dat de (tik)fout toch ergens in de codering moet zitten. Leuk, gaan we verder zoeken!

Met vriendelijke groet,
CSShunter
__________
*) Merkwaardig trouwens dat .ico bestanden hier verboden zijn om te uploaden.

 

[Iris17]

jij bent wel een leuke helper zeg!!
Super!

ik ga er zo mee bezig. Eerst nog ff goochelen met php en formulieren...
(is er nou nergens een Dreamweaver voor kaboutertjes???? ;-) Of zal ik Hans Klok s bellen? Die kan goed goochelen....


Iris

 

[Iris17]

helaas, het werkt niet.
ik had een lege pagina aangepakt zonder overbodige ap's enzo (dus echt leeg) met de favicon in de head. Werkt niet.

Wat ik me afvraag:

plaats je het nu als volgt: href=images/favicon.ico
of doe je het als volgt: href=www.websitenaam.nl/images/favicon.ico

ik heb beide geprobeerd, werkte niet.

een ico zet je altijd in images, toch. Ook gedaan, zowel niet als wel.

weet je wat ik ga doen? nog wachten op jullie slimme tips en anders parkeert ik het en ga maandag lekker een totaal nieuwe site bouwen. Dan komt het wel weer goed, hoop ik.

stort ik me nu nog even op php en formulieren. Ook zo'n fijne.

grt

Iris

 

[csshunter]

is er nou nergens een Dreamweaver voor kaboutertjes?

Jawel, ik heb die in een antiquariaat te pakken gekregen:

Nu moeten alleen de kaboutertjes nog langskomen.

Wat ik me afvraag:
plaats je het nu als volgt: href=images/favicon.ico
of doe je het als volgt: href=www.websitenaam.nl/images/favicon.ico

Alletwee niet!
In elk geval moeten er aanhalingstekens "..." omheen, en in elk geval moet er http:// als begin staan.
Dus:

<link rel="shortcut icon" href="http://www.xxxxxxxx.nl/images/favicon.ico" />

zoals je eerst had.
De type-aanduiding kan je eens weglaten (is niet perse nodig), misschien verslikt de server zich daarin.

En anders heb ik hier een ultiem testbestand.

• Stap 1.
  Eerst even hier bekijken: http://developerscorner.nl/csshunter/tests/favicon-test.htm. (zie ook broncode)
  Deze staat nu bij mij op de server, en geeft een groen faviconnetje. Gezien? Dan naar:
• Stap 2.
  Dit bestandje downloaden, ongewijzigd laten, en uploaden naar ergens bij jou op de server.
• Stap 3.
  Nu zou deze pagina ook bij jou het groene favicon.ico moeten laten zien. Probeer even verschillende browsers!
• Stap 4.
  Open de pagina favicon-test.htm in kladblok, verander de favicon-link naar waar deze bij jou op de server zit, en sla de pagina op als favicon-test2.htm. Uploaden!
• Stap 5.
  Die zou het nu ook moeten doen.

En zo niet, in welke stap gaat het mis?

Ik ben benieuwd!
CSShunter

 

[Iris17]

HELEMAAL BLIJ!!!!!!!!!!!

stap 1 tm 3 werken!!!!!

Nu ff kopje thee in de zon (even vreugdedansje doen) en dan de rest!!!

superdesuper.

dank so far!

(jammer dat ik me niet aan kan melden voor Dreamweaver voor kaboutertjes.... vlgs mij is dat echt iets voor mij... ;-)

 

[Iris17]

zoooooo, meer dan blij nu.
het kopje thee is nog niet gedronken; wilde eerst alles uitzoeken.

en, het is gelukt!!!!

(weet je waar het aan lag; de closing voor head stond helemaal onderaan, zo ongeveer. Had er van alles tussengebouwd. Domdomdom. Of, stomstomstom, whatever you want).

Maar goed, dit was een mooi leermoment. Heel veel dank voor je/jullie hulp!!!

(op naar het volgende leermoment!)

goed weekend,

Iris

 

[Naarling]

(weet je waar het aan lag; de closing voor head stond helemaal onderaan, zo ongeveer. Had er van alles tussengebouwd. Domdomdom. Of, stomstomstom, whatever you want).

[rant]
Een suffe fout die iedereen wel eens kan overkomen, maar ik vind het wel meer dan schandelijk dat zoiets bij Dreamweaver geen alarmbellen af doet gaan. Je betaalt er net zoveel voor als voor een heel fatsoenlijke PC en er kan niet eens een foutmeldinkje vanaf.
[/rant]

 

[csshunter]

Hallo die Iris,
Hoera dat het probleem de wereld uit is!

Domdomdom

Ja, dat is lachen geblazen, achteraf.
Maar ai, hier is nog iemand die zich voor de <head> slaat!

Want wat is het eerste dat je moet doen als een webpagina niet werkt? Dat staat rood onderstreept in mijn handtekening onder al m'n reacties: éérst de HTML-validator er overheen laten gaan!

• Die zit hier dus: http://validator.w3.org (voor in je favorieten!)

En bij alles wat ik aan vragen op je heb afgevuurd, die vraag had ik niet gesteld: "Het is toch wel valid html?"
Bij een simpele check met de html-validator was de <head> op de verkeerde plek er meteen uitgerold.
Domdomdom! :d

Maar om het goed te maken heb ik hier nog een linkje naar wat tips bij het in elkaar steken van een site:

• Golden Rules Of CSS:
  http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm

En ter ontspanning een verhaaltje:

• The Graphical Designer and the CSS Zen Guru:
  http://home.tiscali.nl/developerscorner/guru-1.htm

Succes met je verdere leermomenten!
CSShunter
_________
@Naarling: ja, gelijk heb je!

 

[Iris17]

hoi,

ja, ik zal de validator gaan gebruiken.

Geweldig verhaal van de Guru. Herkenbaar.

Heel erg veel dank voor al jullie tips. En, trust me, ik ga vaker aankloppen!

fijn weekend!


Iris