Inom webbdesign, som du säkert vet, är varje detalj viktig. En person som har bytt till din resurs ser inte vart och ett av elementen separat, utan uppfattar hela bilden som ett paket bestående av andra små detaljer. Således, om du missar något i processen att utveckla din resurs, kan denna detalj senare förstöra hela komplexet, hela kompositionen.
En sådan bagatell kan till exempel vara bakgrunden till en knapp, ett felaktigt v alt typsnitt av något litet element, och till och med en favoritikon. Se verkligen själv - stora, välkända webbplatser har en individuell ikon som indikerar det i avsnittet "Bokmärken" i användarens webbläsare. Utan den hade utvecklarna av resursen inte kunnat skapa den komposition de ursprungligen strävade efter.
Därför, när du skapar en design för din webbplats, bör du ta hand om en sådan detalj som favoritikonen. I den här artikeln kommer vi att prata om hur man matchar den till resursens allmänna stil, samt vilka storlekar den här bilden ska ha.
Webbplatsikon
Först, låt oss definiera vad detta element är. Just nu, ta en titt på titeln på din webbläsarflik. Som du kan se finns det en liten bild till vänster om den, som indikerar en förenklad version av resursens logotyp. Samma bild finns också nära namnet på webbplatsen som visas i sökresultaten. Detta är vad användaren vägleds av när de ser titeln.
Många webbansvariga förstår att en sådan bild behövs – men få människor vet vilken favoritstorlek för sajten som är mest lämplig. Därför kommer vi i den här artikeln inte bara att ge information om hur man gör en sådan ikon och hur du kan installera den på din resurs, utan också prata om bildstorlekar.
Syftet med favoritikonen
Så, bilden nära sidans rubrik används för identifiering. Detta är dess ursprungliga syfte: att uttrycka webbplatsen vars namn vi ser, och att få den att sticka ut i restens ögon. Detta görs så enkelt som möjligt genom att använda grafik: vi uppfattar intuitivt information i bilder mycket snabbare och enklare än i textformat. Favoriter hjälper oss att göra just det. Men glöm inte att storleken på favicon är minimal i användarens ögon. Detta är inte en logotyp i "huvudet" på webbplatsen, som kan innehålla ytterligare information i form av inskriptioner, vissa förtydliganden eller kontaktinformation. Allt som kan visas i ikonen bredvid namnet ska passa storleken på favicon så mycket som möjligt. Och han, som redan nämnts, är helt enkelt miniatyr (endast 16 gånger 16 pixlar).
Hur man väljerfavicon?
Så hur kan en webbansvarig designa en ikon för sin webbplats? Det bör noteras att det oftast inte fungerar att bara komprimera webbplatsens logotyp. På emblemen som sätts i form av en logotyp för en viss resurs, är olika element ofta synliga, som inte alltid kommer att visas korrekt i en miniatyrform. Det är bättre att omedelbart överge ett sådant åtagande.
Naturligtvis, storleken på favicon tillåter inte att man pratar om att bara infoga en inskription där. All text kommer helt enkelt att vara osynlig vid denna upplösning. Vi måste utveckla en ny ikon som skulle förmedla stilen på sajten. För att hitta lösningar, låt oss återigen gå till de största webbplatserna.
Många använder den stiliserade första bokstaven i tjänstens namn som en favoritikon. Detta är till exempel Bing, Yahoo, Yandex, Wikipedia, Google. Det finns ett annat tillvägagångssätt - om du har ett kort webbplatsnamn kan du ställa in det som bakgrund för din ikon. För att storleken på faviconen (i pixlar når den, jag upprepar, 16 x 16 pixlar) korrekt ska visa denna inskription, bör den inte vara längre än 3 bokstäver. Detta är till exempel vad Aol-tjänsten gör.
Hur skapar man en favoritikon?
Det finns flera sätt att skapa en ikon för webbplatsens namn. Det enklaste är förstås att arbeta med olika färdiga lösningar. Vi kan prata om vissa tjänster eller program som låter dig skapa en ikon från en fullfjädrad bild genom att minska den. Jag skulle dock rekommendera att utveckla en sådan logotyp på egen hand. Detta kommer först att gemöjligheten att lära sig något; och för det andra kommer det att ge fler verktyg. Allt du behöver veta för detta är vad du ska rita, och även veta vilken storlek favoritikonen ska ha i den slutliga versionen. Vi kommer att prata om ikonstorleken för webbplatsen lite senare, men för närvarande kommer vi att notera några finesser i att arbeta med sådana bilder. I synnerhet, utan att nämna storleken på faviconen för webbplatsen, bör formatet på en sådan bild förtydligas. Som erfarna designers noterar måste bilden sparas som en-p.webp
Du kan spara bilden, till exempel med Photoshop, där emblemet kommer att ritas.
Favicon dimensions
Så, nu ska vi prata om hur stor bilden som vi ser bredvid webbplatsens namn i sökresultaten ska vara. Som standard är dess storlek, som redan nämnts, endast 16 pixlar (på varje sida). Men om du försöker redigera den här bilden i Photoshop kommer du själv att se hur obekvämt det är. Därför rekommenderar vi att du arbetar med en förstorad bild, som i framtiden helt enkelt kan komprimeras längs kanterna och sparas i önskat format.
Multiplatform
Men på tal om hur stor favoritikonen ska vara på din webbplats så finns det ytterligare en sak att tänka på. Alla plattformar visar inte en resursbild på samma sätt. Till exempel, enheter med en Retina-skärm "ser" din favoritikon på 32 gånger 32 pixlar. Och i Safari och på den nya Windows-plattformen, och överhuvudtaget, når dessa ikoner en storlek på 64pixlar.
Därför rekommenderar vi att du sparar olika versioner av ikonen och helt enkelt ser till att den ändras beroende på användarens plattform i framtiden. En annan intressant punkt - du kan försöka ladda ikonen i det största formatet, och räkna med att den kommer att "krympa" beroende på webbläsaren.
Utsidans redaktörer
Självklart är det bra om du är bra på Photoshop och vet vilken storlek favoritikonen ska ha och hur du uppnår den samtidigt som du sparar din bild. Det finns dock många nybörjare som bara inte har stött på grafiska editorer så nära tidigare, så de kan inte rita den önskade bilden så lätt. För att hjälpa sådana webbansvariga finns det olika tjänster som gör att du automatiskt kan skapa den ikon du är intresserad av. Många av dem är till och med gratis, vilket inte kräver någon investering från användaren.
Ibland behöver man bara registrera sig för att jobba, men som du förstår görs detta en gång – trots allt byter företag inte sin favorit så ofta. Ta en titt på Google, som byter logotyp varje dag, men som inte rör ikonen.
Hur installerar man en favicon?
I allmänhet är det väldigt enkelt att ställa in din webbplats på ett sådant sätt att den korrekt visar bilden du behöver. Det räcker med att utföra en rad enkla steg som gör att sökmotorer, såväl som enkla webbläsare, kan läsa informationen.
För att göra detta måste den resulterande bilden sparas medheter favicon.ico och placeras i roten av din resurs. Det var allt, nu kommer din bild att kännas igen automatiskt och efter en tid kommer den att länkas till din webbplats.
Utöver denna bindning kan du lägga till ytterligare en rad som kommer att "föreslå" var din ikon finns. Det ser ut så här:
Installera koden i sidhuvudet.
slutsatser
Så, efter att ha läst vår artikel kom du på vilken storlek en favoritikon ska vara för en webbplats och vad den är. Dessutom tror jag att du förstod att det är en nödvändighet att hitta rätt ikon för din resurs, eftersom det spelar dig i händerna både när det gäller ökat erkännande och i form av ytterligare en utmärkelse bland dina konkurrenter. Åtminstone de största sajterna gör detsamma, vilket kan tas som ett utmärkt exempel. Och dessutom orsakar det inte mycket ansträngning - efter att ha gjort en favicon en gång och installerat den korrekt på din webbplats, kan du glömma det under de närmaste månaderna.
Därför, experimentera gärna, hitta på något nytt, prova - och allt kommer att ordna sig!
