Hur man skapar ett Favicon.ico: 5 steg (med bilder)

Innehållsförteckning:

Hur man skapar ett Favicon.ico: 5 steg (med bilder)
Hur man skapar ett Favicon.ico: 5 steg (med bilder)

Video: Hur man skapar ett Favicon.ico: 5 steg (med bilder)

Video: Hur man skapar ett Favicon.ico: 5 steg (med bilder)
Video: 1-Minute Photoshop - Juicy HDR Effect! 2024, Maj
Anonim

När du besöker en webbplats som Google, Yahoo eller wikiHow kanske du märker att det finns en liten ikon till vänster om adressfältet. Detta är känt som en favicon, och du kan skapa din egen för en webbplats. Förutom att ge din webbplats en mer professionell känsla, kommer ikonen att visas i användarens bokmärken bredvid alla sidor på din webbplats som de lägger till sina favoriter. Detta kan hjälpa dem att hitta din webbplats enklare.

Steg

Skapa ett Favicon.ico Steg 1
Skapa ett Favicon.ico Steg 1

Steg 1. Skapa en bild som är 16x16 pixlar stor

Det ska vara en enkel bild så att den genast känns igen.

Skapa ett Favicon.ico Steg 2
Skapa ett Favicon.ico Steg 2

Steg 2. Konvertera bilden till en favicon.ico -fil

Det måste heta exakt detta, annars kan webbläsaren inte känna igen det. Ett enkelt sätt att göra detta är att använda Dynamic Drive FavIcon Generator. Ett annat sätt är att använda en gratis bildredigerare GIMP och spara 16x16 -bilden i ICO -format.

Skapa ett Favicon.ico Steg 3
Skapa ett Favicon.ico Steg 3

Steg 3. Ladda upp den genererade filen till din webbplats

Skapa ett Favicon.ico Steg 4
Skapa ett Favicon.ico Steg 4

Steg 4. Lägg till följande kod i din webbplats HTML

Du bör placera den i avsnittet i koden och se till att sökvägen till ikonen är korrekt i förhållande till webbsidan. Koden följer (förutsatt att både.html och.ico finns i samma toppkatalog):

Skapa ett Favicon.ico Steg 5
Skapa ett Favicon.ico Steg 5

Steg 5. Uppdatera sidan, gå tillbaka och beundra din webbplats vackra nya ikon

Tips

  • Även om din ikon kommer att vara väldigt liten, se till att andra människor lätt kan läsa/förstå den.
  • Om du använder Linux kan du konvertera filen direkt till din dator. Välj bara en lämplig bild, öppna din kommandorad, navigera till katalogen där du lagrar bilden och skriv: convert image-p.webp" />

Rekommenderad: