Tips en trucs

Een favorieten icoontje maken, FAVICON genoemd
dat in de adresbalk van de browser
voor de URL van de blog of site verschijnt

Regelmatig ziet u bovenaan in de adresbalk van de browser een icoontje voor het internetadres van websites staan en als de bezoeker de website toevoegt aan zijn Favorieten zorgt het er voor dat de site opgemerkt wordt in de lijst van de Favorieten.

De website is, door de aanwezigheid van de favicon, ook gemakkelijker terug te vinden op het bureaublad, wanneer een snelkoppeling naar de URL van deze site werd gemaakt.

Maar ook bij Blogs kan zo'n favicon aan het blogadres worden gekoppeld

Zie hierboven een screenshot van een snelkoppeling op het Bureaublad naar mijn blog Blogtips

Hierna een tweetal screenshots van een favicon in de adresbalk in IE en Firefox.

Als u klikt op de plaatjes ziet u ze meteen in werkelijkheid staan.

hierna bekeken in Mozilla Firefox

Een Favicon is een .ico bestandje en heeft een formaat van 16 bij16 px of van 32 x 32 pixels.

Zo'n ikoontje kun je maken met een icon editor of met een online generator.

Een gifplaatje converteren naar een .ico bestandje zou zelfs mogelijk zijn met het gratis programma http://www.irfanview.com/

Na het uploaden naar de server, zodoende een URL te bekomen voor de icon, wordt deze gekoppeld aan het internetadres van de website of blog.

Werkwijze:

Stap 1: Een geschikt plaatje kiezen

Zoek een .png, .bmp, .jpg of .gifplaatje van 32 x 32 px groot en sla het op de harde schijf op.
Is het iets groter, bij voorbeeld 48 x 48, dat is geen probleem.

Op internet kom je heel wat sites tegen met kleine png, bmp, jpg of gifplaatjes die daarvoor in aanmerking kunnen komen of waarmee u ze kan maken

Zo hebt u o.a.:
   http://www.franksicons.com/
   http://sig.graphicsfactory.com/
   http://www.bewegende-plaatjes.net/galerij/icons/icons-index.html

U kan ook zelf een jpg of gifplaatje maken of een bestaand plaatje bijknippen of verkleinen met bij voorbeeld: Photofiltre, Photoshop, Photoscape of een ander grafisch programma.

Stap 2:  Het mini plaatje omzetten naar een ico.bestand

Met een online Favicon generator kan u snel van een .png, .gif, bmp of .jpg plaatje een favicon (.ico) bestand maken

De meeste Favicon generators ondersteunen de formaten .png, .jpg, .gif en .bmp plus transparantie.
De bestandsgrootte mag max 150 KB zijn

Standaard wordt er een icoon van 16 x 16 px gemaakt, maar het is ook mogelijk om er eentje van 32 x 32 te genereren, dat laatste vind ik het beste formaat, zeker wanneer nadien ook nog een snelkoppeling naar de blog of site op het bureaublad wordt gemaakt.

Hierna vind u een paar links naar Favicon generators, waaruit u kan kiezen, maar er zijn er nog meer te vinden via de google robot

http://tools.dynamicdrive.com/favicon/
http://www.favicon.co.uk/
http://www.html-kit.com/favicon/

► Klik op op "Bladeren"
► Duid het jpg of gif bestandje op de harde schijf aan, zodat het pad in het veld bij "Bladeren" verschijnt
► Klik een vinkje of bolletje of duid met het pijltje "Afmeting 32 x 32 px" aan, waar de mogelijkheid hiervoor voorzien wordt
► Bij gebruik van:
Dynamicdrive: Klik op "Create Icon" > ga met de schuiflat naar beneden en klik op "Download Favicon".
Favicon.Co.uk: Klik op: Generate Favicon > Download your Favicon Here > Opslaan
HTML-kit: klik op "Generate Favicon.ico"
HTML-kit geeft de mogelijkheid van:
- een zipbestand te downloaden, voorzien van een gif- en ico.bestand.
Klik hiervoor op "Download Favicon Package" - zie verder op deze pagina.
of hetzij
- onderaan de webpagina enkel het ico.bestand op te slaan,
klik hiervoor op "Download only Favicon.ico"
Rechtsklik op de ico en kies voor "Opslaan".
Geef het .ico bestand een naam.

----------------------------------------------------

Kiest u ervoor een favicon, bestaande uit tekst en achtergrondkleur, aan te maken

Met de hiernavolgende generator kan u een ikoontje maken van in totaal 8 letters of cijfer, hetzij max 4 bovenaan en max 4 onderaan

http://antifavicon.com/

Alvorens de knop "Save As Favicon File" aan te klikken,
klik best eerst op de link "ON" bij "Click on the icon to toggle zoom on/off"

Voor de bloggers bij seniorennet en www.bloggen.be: Klik Hier

Stap 3: Uploaden naar internet

Om het ico bestand te kunnen koppelen aan het internetadres van een website of blog, dient het bestandje eerst geüpload te worden naar internet, zodat het bestand een URL (=internetadres) bekomt.

Voor websites:
Plaats het ico bestand op de server in de rootdirectory (de hoofddirectory van uw site), op dezelfde hoogte waar ook de index pagina en de overige webmagina's zich normaal bevinden, zoniet dient u de verwijzing in de link-tag (zie stap 4 hierna) aan te passen

Voor de blogs bij seniorennet en www.bloggen.be

Voeg het ico bestand toe in een blogbericht van de middenkolom

Klik onder "Extra's", bij "Overige bijlage van harde schijf" op "Bladeren"
duid het .ico bestand aan & klik "OK".

Nadat het blogbericht is toegevoegd (opgeslaan), kan de URL gekopieerd worden in de adresbalk van de browser.
Klik hiervoor op:
"Terug naar overzicht gaan" > "Bijlagen bekijken/Verwijderen"
Zoek en klik op de link van het ico.bestand, zodat de favicon verschijnt
Je kan nu de URL (internetadres) kopiëren in de adresbalk van uw browser

Een andere mogelijkheid om de URL te kopiëren is deze:
Rechtsklik op de link en kies voor "Eigenschappen".
Bij "ADRES (URL)" vind je de URL van de favicon.

Voor meer uitleg, klik en lees onderstaand blogbericht:

Allerlei bestanden uploaden naar een bericht in de middenkolom
http://blog.seniorennet.be/blogtips/archief.php?ID=317004

Stap 4: Het icoontje koppelen aan de website of blog

Tenslotte dient in de Head van de website of blog een verwijzing naar het favicon (.ico) bestand te worden gemaakt.

Voor het koppelen aan een website:

Plak de hiernavolgende link-tag tussen de <head> en de </head> tag van de index.pagina en ook in de <head> sectie van alle webpagina's om de icoon op te roepen

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Zie voorbeeld hierna:

Vergeet niet de naam "favicon" in de link-tag te vervangen door de naam van uw .ico bestand, indien u uw .ico bestandje een andere naam hebt gegeven.

De hier bovenstaande code: href="/favicon.ico" bevat een /

Hiermee wordt aangegeven dat het favicon.ico bestand in de rootdirectory (hoofdmap) staat.

Indien u het bestand niet in de rootdirectory, maar daarentegen in een map onder de hoofddirectory plaatst, dan dient u uiteraard de verwijzing in de link-tag aan te passen

Stel dat uw favicon.ico bestand zich in een subdirectory met naam "images" bevindt, dan dient eveneens naar deze directory (map) verwezen te worden:
Een voorbeeld:

href="/images/favicon.ico"

Wanneer de ikoon niet werkt, dan komt dit meestal door een foute verwijzing te maken naar het bestand.

Voor het koppelen van de favicon aan een blog

Plak de code (link-tag) in de <head> sectie van de blog (tussen <head> en </head>) en maak een absolute verwijzing.

Bij een absolute verwijzing wordt steeds het volledige internetadres (URL) van het ico bestand opgegeven.

Hierna de werkwijze voor het plaatsen van de code op de blogs van www.bloggen.be en blog.seniorennet.be:

Klik op "Uitzicht (Design) Wijzigen Blog" en plak onder "Geavanceerd - Uitzicht aanpassen"
juist boven de </head> de hieronderstaande link-tag

<link rel="shortcut icon" href="http://www.naamvansite.be/favicon.ico" type="image/x-icon" />

Vervang in de link-tag:
http://www.naamvansite.be/favicon.ico door de URL van uw favicon.ico

Dat ziet er dan zo uit:
In deze code is de URL van mijn ico.bestand -geüpload naar eigen blog- aangebracht

Klik vervolgens onderaan op "WIJZIGEN"

Hierna ziet u het resultaat, klik op het plaatje

Pas na het laden van de webpagina verschijnt het ikoontje zichtbaar in de adresbalk van de browser.

Een animated favicon aanmaken en koppelen aan een website

Indien u gebruik maakt van de browser Mozilla Firefox, dan is het u waarschijnlijk al opgevallen, dat er bij sommige websites bovenaan in de adresbalk van de browser, bij het begin van het internetadres een bewegend (animatie) icoontje te zien is.

Internet explorer geeft zo'n bewegend effect helaas niet weer.

Hierna vind u 2 generators, waarmee u een jpg of gifplaatje kan omzetten naar een animated favicon.

http://www.html-kit.com/favicon/
http://www.animatedfavicon.com/

Sla het verkregen zipbestand op de harde schijf van uw PC op.
Na uitpakken bekomt u een favicon.ico en animated_favicon.gif bestand.

Werkwijze voor het koppelen van de animated favicon aan de website:

Plaats het gif- en ico bestand in de rootdirectory van uw website, waar ook uw index pagina en de overige webpagina's zich bevinden.

Ga op dezelfde wijze tewerk als voor de gewone favicon hierboven, maar gebruik voor een animated favicon de hiernavolgende link-tag in plaats van de link-tag voor een gewone favicon

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="animated_favicon.gif" type="image/gif">

Uploaden en koppelen van een animed favicon aan de URL van een blog

Upload de beide gif- en ico bestandjes naar de blog, zodoende een URL te bekomen voor deze bestanden. (Zie de uitleg hierboven voor een gewone favicon)

Plak de hiernavolgende link-tag tussen de <head> en de </head>

<link rel="shortcut icon" href="http://www.naamvansite.be/favicon.ico">
<link rel="icon" href="http://www.naamvansite.be/animated_favicon.gif" type="image/gif">

Vervang in de link-tag:
http://www.naamvansite.be/favicon.ico   door de URL van uw favicon.ico
http://www.naamvansite.be/animated_favicon.gif door de URL van uw animated_favicon.gif

P.S. : Denk er aan dat een animated favicon niet in alle browsers beweegt.

Wanneer goed aangebrachte favicons nalaten in IE 7 te verschijnen:
Ga naar EXTRA > INTERNETOPTIES en klik op VERWIJDEREN bij BROWSEGESCHIEDENIS.
Klik achtereenvolgens op BESTANDEN - COOKIES en GESCHIEDENIS VERWIJDEREN, sluit het venster en klik op OK.
Sluit de browser en start IE terug op.
Normaal zouden dan de icoontjes moeten verschijnen