Sådan opretter du et Favicon til din Blog

har din blog et brugerdefineret favicon? Hvis ikke, burde det virkelig. I dag lærer vi, hvad et favicon er, hvorfor du har brug for en, og endelig hvordan du opretter et favicon til din blog eller hjemmeside.

jeg ser stadig masser af blogs uden en, så hvis din blog er en af dem, gør dig selv en tjeneste og opret en nu ved hjælp af vejledningen nedenfor. Jeg lover, at det ikke tager lang tid, og det er også sjovt!

opdateret: 11/4/2020

offentliggørelse: dette indlæg kan indeholde tilknyttede links (betegnet med en*), hvilket betyder, at jeg muligvis modtager en lille provision, hvis du vælger at foretage et køb med mit link. Jeg sætter pris på din støtte og vil aldrig anbefale produkter, jeg står ikke alene.

Hvad er et Favicon?

en Favicon, udtales fave-ikon, er en forkortelse for foretrukne ikon, som blev navngivet, fordi de vises i din liste over Hjemmeside bogmærker, med andre ord, dine foretrukne hjemmesider. Favicons er en lille version af dit logomark, der vises som et ikon for fanen, et bogmærkeikon eller et genvejsikon.

Favicons er en hurtig måde for brugerne at genkende din hjemmeside ved første øjekast. Tag et kig på mine faner nedenfor. Kan du genkende de fleste af de hjemmesider, Jeg har åbent her?

hvorfor skal du oprette et Favicon?

når du ikke tildeler en brugerdefineret favicon til din blog eller hjemmeside, bliver enten et generisk ikon eller intet ikon overhovedet tildelt det. I værste fald bruger din blog dit hostingfirmas favicon. I bedste fald tildeler hver bro.ser sin egen ting til dig: Chrome tilføjer en lille klode (se billedet ovenfor), Safari tilføjer den første initial af din hjemmesides URL i en grå boks (se billedet nedenfor), og Firefoks tilføjer slet ikke noget. Uanset hvad, tal om kedeligt!

se igen på fanerne ovenfor. At have genkendelige ikoner gør det nemt at klikke frem og tilbage hurtigt mellem hjemmesider gør det ikke? Hvis du gemmer en hjemmeside til dine bogmærker, vil du også se favicon i din bogmærkeliste. Dette gør det nemt at hurtigt finde det, du leder efter. Hjælp dine læsere med hurtigt at finde din blog i deres faner eller bogmærker ved at inkorporere et favicon.

der er et andet sted, jeg vedder på, at du ikke tænkte på, hvor favicons vises: hvis du har hjemmesider, du ofte besøger på din telefon, kan du altid tilføje dem til telefonens startskærm som en genvej. Hvis dine læsere elsker at besøge din hjemmeside ofte, kan de tilføje en genvej til det fra deres startskærm, så du helt sikkert vil have dem til at have en flot ikon til at skille sig ud fra de andre app ikoner, de allerede har tilføjet.

og her er en ny faneblad fra Safari. Billede din hjemmeside genvej her. Du vil ikke have din blog repræsenteret af et kedeligt gråt ikon som “C” – ikonet nedenfor gør du?

sådan designer du et Favicon til din Blog

nogle designregler for oprettelse af et Favicon

lad os først tale om nogle bedste fremgangsmåder til design af dit favicon.

1. dit favicon skal være synligt og øjeblikkeligt genkendeligt
   den bedste måde at gøre dit favicon genkendeligt på er at bruge dit logo som udgangspunkt. Selvom din blog ikke er super berømt endnu, er det ok. Brug af ensartede designelementer og temaer i hele din branding hjælper det med at skille sig ud fra resten og hjælpe folk til sidst med at genkende dit brand.Her er et par muligheder for dig at overveje, når du designer dit favicon:
   • dit logo eller logomark
   • enklere variation af dit logo
   • et symbol eller ikon, der repræsenterer dit brand
   • initialerne (eller bare den første initial) af dit brandnavn – sørg for, at initialernes stil matcher dit oprindelige logos design og stil
   • et simpelt foto – for nylig har jeg set bloggere ved hjælp af deres profilbilleder til at oprette et FavIcon
2. dit favicon skal bruge et meget simpelt design
   se godt på favicons dine bro.ser faner lige nu. Hvad bemærker du? De er små! Det typiske favicon vises med 16 gange 16 billedpunkter. Af denne grund er det vigtigt at sikre dig, at du bruger en meget forenklet version af dit logo eller brandingelement. Detaljeret og detaljeret grafik skaleres ikke godt i en så lille størrelse. De vil sandsynligvis ligne et sløret rod.
3. sørg for, at dit favicon kontrasterer godt med lyse og mørke baggrunde
   afhængigt af dine læsers præferencer kan deres bro.ser-faner være hvide, sorte, lyse eller mørkegrå. Af denne grund vil du sørge for at oprette et favicon med farver, der kontrasterer godt på både lyse og mørke baggrunde.Nogle favicons har gennemsigtige baggrunde, og de fungerer, fordi deres farver kontrasterer godt på enhver baggrund. Hvis din grafik er for lys eller for mørk, kan det hjælpe med at tilføje en Ensfarvet cirkel eller firkant bag grafikken eller logoet for at hjælpe det med at skille sig ud og være læsbart på enhver farvet fane.
4. se på dine bro.ser faner for inspiration
   klik rundt på nettet og se på favicons bruges på dine foretrukne hjemmesider. Bemærk, om de vil arbejde på lyse eller mørke baggrunde. Har grafikken en gennemsigtig baggrund, eller er den på en farvet firkant eller cirkel?

Favicon Inspiration

Favicons bruger gennemsigtighed

bemærk, hvordan disse ikoner kan skille sig ud på enten en mørk eller lys baggrund, bortset fra den sidste, ‘Sig Ja.’Den skulle sandsynligvis have været placeret på en hvid firkant. Og det er lidt svært at fortælle, men det fjerde ikon, lotusblomsten har faktisk en meget fin sort kontur. På denne måde kan du nemt se det, selvom det ses på lyse faner.

Favicons ved hjælp af en farvet baggrund

disse favicons blev designet med en firkantet eller afrundet firkantet baggrund for at sikre, at de er tydeligt synlige på både mørke og lyse faner.

Favicons ved hjælp af initialer

nogle af disse initialer ikoner bruger en farvet backround, nogle bruger en gennemsigtig. Uanset hvad skal du sørge for, at den er læsbar.

Favicons brug af et profilbillede

brug af et profilbillede ser ud til at være en ny trend, der fanger. Hvis du går denne rute, sørg for at bruge det samme profilbillede i alle dine online profiler, så det øjeblikkeligt kan genkendes.

Sådan opretter du et Favicon til din Blog

Opret en Favicon-fil trin for trin

1. Opret grafikken i en billededitor
   ved hjælp af en billededitor som Photoshop (Tilmeld dig gratis prøveperiode)*, PLR, BeFunky eller Canva,* Opret din favicon-fil på 512 gange 512 punkter. Selv om det vises på kun 16 liter 16 i bro.ser faner, det vil også blive vist på større størrelser i nogle af de andre programmer, jeg nævnte ovenfor.
2. få vist din Favicon i Lille størrelse
   hvis du er færdig med at oprette et grafisk favicon, skal du forstørre billedet, indtil din grafik bliver lille, omtrent på størrelse med de faviconer, du ser i din bro.ser. Er det stadig læsbart? Giver det mening? Hvis det gør det, godt, gå videre til næste trin.
3. Gem filen
   Gem først din grafik som en redigerbar fil i dit program, så du kan gå tilbage og finjustere den, hvis du har brug for det.Gem det derefter som en PNG-fil.
4. Generer et Favicon.ICO-fil
   brug en favicon-generator til at konvertere din PNG-fil til en ICO-fil. Dette trin er nødvendigt, da nogle brugere kun vil læse ICO-filer.

alternativer til at designe din egen fra bunden

hvis du vil have en hurtig og nem måde at oprette en tekst eller initialer favicon, skal du bruge teksten > ICO favicon generator. Jeg oprettede hurtigt denne til DYOB:

du kan også bruge Emoji > ICO favicon generator, hvis du virkelig vil gøre det nemt for dig selv.

Tilføj endelig dit nye Favicon til din Blog eller hjemmeside

ordtryk

den nemmeste måde at tilføje et favicon i en selvhostet blog er at logge ind på dit dashboard. Gå derefter til udseende > Tilpas, og klik derefter på fanen site Identity. Vælg dit nye favicon under sektionen Site Icon.ICO fil til upload.

og boom, du er færdig, tjek det ud i din bro. ser! Bemærk, at du muligvis skal opdatere et par gange og/eller rydde cachen i din bro.ser, før den vises.

Sådan tilføjes et favicon til en WordPress.com blog.

firkant

det er meget nemt at tilføje et favicon til firkant også.

Blogger

Log ind på din blog og klik på Indstillinger i venstre kolonne. Klik derefter på Favicon under det grundlæggende afsnit. Upload derefter dit favicon.ICO fil, Gem og boom!

Test dit nye Favicon

hvis du vil teste, hvordan dit favicon ser ud i forskellige platforme og indstillinger, skal du bruge denne Favicon-Checker. Hvis du ønsker at redigere den måde, dine ikoner ser ud på nogen af platformene, siger iOS (iPhones), kan du bruge generatoren til at optimere dem til hver indstilling. Følg derefter bare instruktionerne for at tilføje dem alle til din blog.

du har lige lært at oprette et Favicon

Tillykke! Når du designer din egen blog, vil du sikre dig, at du ikke udelader nogen detaljer, selv de mindste. Tilføjelse af et brugerdefineret favicon til det hjælper ikke kun dine læsere med hurtigt at finde din blog i deres faner eller bogmærker, det viser, at du er interesseret i at holde din branding konsistent.

nu er det din tur

Lad mig det vide i kommentarerne, hvis du har spørgsmål om, hvordan du opretter et favicon, eller hvis du har brug for hjælp til at identificere en type favicon, der skal oprettes til dit brand. Ellers kan du dele din favicon med os i kommentarerne!
og hvis du har nydt denne tutorial, kan du dele det ved at klikke på et af ikonerne under min underskrift!
dette indlæg blev oprindeligt offentliggjort den 8/14/2013 og opdateret den 2/11/2015, derefter igen den 11/4/2020.