lørdag den 2. januar 2010

At lave sit eget favicon til Blogger

Som jeg skrev i nat lavede jeg mit eget favicon og fik Blogger til at vise det, i stedet for Bloggers standard. Og jeg synes det er meget lækkert at have.

Så her er en beskrivelse af, hvordan man kan gøre.

I gamle dage skulle et favicon være et windows icon, i et bestemt format af typen .ico; det er vist ikke så strict nu om dage, man kan vist både bruge .gif og .png (og vist endda animerede gif'er). Men det har jeg ikke så meget styr på, så jeg holder mig til .ico'en.

Og det er desværre ikke noget alle tegneværktøjer giver mulighed for at gemme i, da det mest er noget udviklere har gjort i (men se herunder om IconJ for konvertering fra andre formater). Hvis du ikke har noget du kan lave ikoner i, kan man gratis finde værktøjer på nettet. Jeg har prøvet IcoFX, og synes det fungerer strålende.

Så tegner du dit ikon - husk at bruge "gennemsigtig farve" og ikke hvid, der hvor det skal være gennemsigtigt. Et ikon for et website skal være 16x16 pixels, men det kan være en fordel også at lave det i højere opløsninger (hvis man skal kunne gemme det på skrivebordet eller lignende). Hold det i så få farver som muligt (af hensyn til download hastighed).

Når ikonet er færdigt skal du have det hostet et sted. Det er nemmest hvis du har et eget website et sted, eller adgang til et, men der findes også steder på nettet der gør det. For eksempel er der IconJ, som gratis hoster og endda konverterer fra andre formater, såvidt jeg kan se. Jeg har ikke prøvet det, skal understreges.

Nu skulle du gerne have en offentlig tilgængelig url på dit ikon. Den kan foreksempel se således ud: www.mitsite.dk/mitikon.ico .

Så skal du ind i Bloggers betjeningspanel, under Layout og Rediger HTML. Og som altid når du begynder at redigere din template er det en god idé at tage en backup af den, for det tilfælde at du fucker noget op!

I dit <head> afsnit skal du tilføje følgende:
<link href="http://www.mitsite.dk/mitikon.ico" rel="shortcut icon" type="image/ico" />
Du skal naturligvis lige rette url'en i ovenstående til at pege på dit eget ikon!

Det enkleste er hvis du tilføjer det tilsidst i headeren, altså umiddelbart før </head>-tagget. Men ihvertfald skal det efter en eventuel linie hvor der står <b:include data="blog" name="all-head-content" /> - her inkluderes nemlig blandt andet Bloggers standardikon, og det er den sidst linkede som vinder. (Lidt dirty at have to ikoner linket, men det lader til at virke.)

God fornøjelse :)

7 kommentarer:

  1. Fantastisk.. Jeg overvejerde for nogle uger siden om jeg skulle undersøge hvordan man lige bixede sådan et icon, men bestemte mig for at lade være.. Men der kan man ae se, en fix og færdig guide..

    SvarSlet
  2. Det vil da glæde mig hvis den kan bruges til noget! :)

    SvarSlet
  3. Mange tak for dit indlæg :) Det var en stor hjælp

    SvarSlet
  4. ved du hvordan man kan få sit eget icon på bloglisterne og ved kommentarer?

    SvarSlet
  5. Glæder mig :)

    Desværre har jeg ikke kunnet finde ud af nogen måde at få ikon'et i blogrullerne - det kræver såvidt jeg har kunnet finde ud af, at ikonet ligger på den faktiske server, så det ville være en ny feature fra Blogger, at de skulle kunne hoste billedet.

    (Nogle feed-standarder åbner vist nok op for, at man kan specificere sit ikon der, så hvis man kan finde ud af at redigere feedet, kan man i princippet lægge det ind; men da jeg samtidig har læst at ingen af de større blogsystemer understøtter den metode, er det ikke noget jeg har givet mig i kast med.)

    Jeg er ikke sikker på, hvad du mener med ved kommentarer? Der bruger Blogger jo dit profilbillede - så hvis du vil, kan du erstatte det med dit ikon?

    SvarSlet
  6. Men det her er lidt i familie - jeg ved ikke om du kan bruge det til noget?

    SvarSlet
  7. Mange tak. Jeg må prøve om det kan lader sig gøre. :) Jeg er ikke super-skarp i html.

    SvarSlet

Se eventuelt dette indlæg med hjælp til kommentar-formatering (hvordan man linker, for eksempel).