Skapa ett anpassat favicon

Innehållsförteckning:

Anonim

Jag kommer att erkänna något slags geeky. Jag gillar verkligen favicons. De är roliga. De är ett bra varumärkesverktyg. Och de är något enkla som småföretagare kan göra för att krydda sina webbplatser och till och med öka användbarheten för användarna.

Om du inte vet vad en favicon är, låt mig erbjuda lite hjälp:

$config[code] not found

Favicons är den minsta 16 × 16 pixelgrafik som representerar din webbplats i adressfältet, i en användares lista med bokmärken eller i deras webbläsarflikar. De tillåter dina besökare att skapa en visuell anslutning till din webbplats.

Propert! Hur skapar du en?

Designa din favicon:

  • För hand: Öppna ditt favoritgrafikprogram och ta dig till det. Du vill antingen skapa en ny fil som är 16 × 16 pixlar och zooma in tills området är användbart eller öppna ett område som är större, men fortfarande en typ av multipel av 16 × 16. När du utformar ditt favicon för hand, använd något som exakt representerar ditt varumärke - oavsett om det är ett vanligt färgschema, företagsnamn, etc. Oavsett vad du skapar måste du stå för de hårda begränsningarna på 16 × 16 pixlar.
  • Med verktyg: Om du är utmanad (inga bekymmer, jag är också) finns det några bra verktyg som gör det enkelt för även människor som att vi ska skapa bra favicons. Till exempel, Favicon.cc kommer att ge dig lite struktur och låter dig bygga din direkt från deras webbplats eller FavIcon från Pics låter dig ladda upp en bild och skapa favicon för dig. Enkel!

Spara ditt favicon: När du sparar din fil, minska den till 16 bitar och spara som "favicon.ico" om du använder Photoshop eller "favicon.gif" eller "favicon.png" om du använder något annat. Om du använder Photoshop och vill ge ditt favicon lite extra oomph rekommenderas det att du hämtar pluginprogrammet för Windows Icon-filformat så att du kan spara i ICO-formatet.

Ladda upp ditt favicon: Anslut till din server och ladda upp ditt favicon till rotmappen på din webbplats. Lägg sedan till följande HTML-kod i huvuddelen av din webbsida (mellan de två huvudkoderna) (välj din filtyp):

Uppdatera: När du är klar, uppdatera din webbläsare och du bör se ditt favicon visas. Om inte, ge det några minuter. Ibland tar det lite för att allt ska synkroniseras.

Och det är allt! Fyra steg och du har ett bra märkesfavicon som hjälper användare att känna igen din webbplats i listan med bokmärken eller i webbläsaren. Ganska enkelt, eller hur?

Bara för skojs skull, här är några av mina favoritfavicons på webben:

  • Michigan fyrverkerier
  • Jeffrey Zeldman
  • Boing Boing
  • Encyclopedia.com
  • Fool.com
  • Michael Greys SEO Blog

Vilka andra personliga favoriter?

17 Kommentarer ▼