Visst, vid mer än ett tillfälle har du hört talas om ett favoritikon. Detta är nära relaterat till webbdesign, och det är en viktig punkt att det på varje sida, vare sig det är en webbutik, en blogg, en webbplats etc. de kommer att fråga dig. Men, Vad är ett favicon? Vad är det för? Och viktigast av allt, hur görs det?
Om du har många tvivel om detta kommer vi här att ge dig nycklarna så att du förstår det och framför allt så att du kan presentera det inom ditt projekt och få en bättre presentation. Vi försäkrar dig!
Vad är ett favicon
Vi ska börja med att förklara vad ett favicon är så att du förstår det. Och för detta, inget bättre än att ge dig ett praktiskt exempel. Tänk dig att du surfar just nu (faktiskt läser du oss). Men du har inte bara en flik utan flera av dem. Du kanske har märkt att namnet på det som sidan återspeglar visas i var och en av dem, vare sig det är YouTube (för att du lyssnar på bakgrundsmusik), Gmail (eftersom du har din e-post öppen) eller den här sidan.
Bredvid varje namn, till vänster, visas en liten bild i en fyrkant. Den på YouTube och Gmail kommer säkert att identifieras av de logotyper de har, men hur är det med resten av flikarna?
Det du ser är faktiskt favicon. Med andra ord är det en ikon som är relaterad till sidan du besöker, Det är därför det är så viktigt att vara uppmärksam på denna detalj, för när du lägger till en sida i favoriter eller genvägar blir favicon "bilden" på den sidan och det är därför du måste ta hand om dess design så att den är relaterat perfekt (och ser framför allt bra ut att skilja det från andra).
Denna lilla ikon har vanligtvis en storlek som är 16 × 16 pixlar (även om den också kan ställas in på 32x32px). Inuti den måste du se till att allt du lägger ses korrekt eftersom det annars kommer att se ut som en liten identifierbar plats (och det ger en mycket dålig bild av din sida).
Varför är favicon så viktigt?
Nu när du vet vad favicon är och att du har hittat det på de sidor som du brukar öppna, har du märkt att det idag är färre och färre sidor som saknas? Det beror på att det verkligen är viktigt att ge en vision om elegans och kunskap. Det vill säga att du kommer att förmedla en varumärkes- eller företagsimage som bryr sig om detaljer.
Favicon har dock också andra användningsområden som:
- Servera som identifiering av din sida. Vanligtvis är denna favicon relaterad till logotypen som du har på din webbplats, bara i mindre storlek. Men när logotypen är för stor och inte syns på den lilla knappen, brukar du välja något som är relaterat till den.
- Du hjälper användare som har sparat din sida att visuellt identifiera den. Så, även om de inte kommer ihåg webbadressen eller företagets namn, kommer de att hitta den på grund av faviconets bild.
- Att vara "bra" med SEO. Detta måste tas med en pincett. Och det är att ha eller inte ha ett favicon inte direkt påverkar SEO (det vill säga det kommer inte att placera dig bättre eller sämre för att ha det eller inte). Nu är det mer och mer vanligt att det, när en webbläsare går in på en sida, letar efter det faviconet, och när det inte hittar det, då ger det ett 404-fel. på en sida.
Hur man gör ett favicon
Efter att ha sett är det tydligt att ett favicon är ett viktigt element när man har en webbsida. Hur gör du en?
Du borde veta att det i de flesta fall är vad det gör välj logotypen för den webbplatsen, eller om den är för stor, något som identifierar den. Tänk dig till exempel att du har en tv-webbplats som du ringde på något sätt. Men det i favicon är för stort. Istället kan du lägga en bild av en TV så att de berättar om den. I dessa fall rekommenderas att du bär samma färger som din webbplats för att bättre identifiera den.
Och nu, hur kan vi skapa ett favicon? Du har flera alternativ:
Photoshop, Gimp ...
Med andra ord talar vi om bildredigeringsprogram eftersom ett favicon skapas exakt samma som en bild. Naturligtvis måste du spara den i .ico-format för att den ska kännas igen som sådan eftersom den inte kan lämnas som jpg, gif eller liknande.
Detta sätt att göra det låter dig anpassa favicon mycket bättre, lyckas skapa den från grunden och ge den den finish du vill ha. Normalt för detta arbetar du med en bild i normal storlek och anpassar den sedan till storleken på den knappen.
I själva verket bör det laddas upp och testas i olika webbläsare för att se om det ser bra ut, är representativt och framför allt förstås.
Använda onlineverktyg
I det här fallet hänvisar vi till webbsidor som tar hand om att konvertera vilken bild du vill till ett favicon på några sekunder. Men du har också möjlighet att utforma din favicon direkt med dessa sidor.
Om du vill ha den förra (ladda upp bilden och konvertera den) rekommenderar vi Favicon Generator eller Favic-o-matic. Men om du vill ha det senare (designa det från grunden), satsa på favicon.io eller x-icon editor.
Med WordPress
Är din sida gjord i WordPress? Och vet du att du kan använda det systemet för att skapa ditt favicon. För detta kan du använda några plugins som låter dig skapa den här knappen baserat på en bild som du har laddat upp (eller som du laddar upp). Också genom "Utseende / anpassa" kan du göra det.
När du väl har gjort faviconet måste du bara lägga det på din webbplats och låta det känna igen det för att kunna visa det i vänstra delen av namnet på din sida, samt när du sparar det i favoriter. På så sätt kommer de lätt att känna igen dig utan att behöva sluta läsa om det är den sida de verkligen ville besöka.