Favicon-generator

Favicon är den lilla ikonen som sitter i din webbläsarflik, som dyker upp bredvid din webbplats i bokmärken och historik, och som visas bredvid sökresultaten. Den är liten, men den är en av de mest synliga delarna av ditt varumärke. Varje gång någon öppnar en flik på din webbplats är den lilla fyrkanten det första de lägger märke till, vilket är anledningen till att en skarp, igenkännbar favicon betyder mycket mer än dess storlek antyder. För att göra det rätt krävs bara en bra bild och några klick med detta verktyg.

Det här är haken som de flesta inte förväntar sig: en enda favicon är sällan tillräcklig. Skrivbordswebbläsare begär favicons vid 16 och 32 pixlar, Android-enheter och progressiva webbappar använder 192 och 512, iOS-hemskärmar vill ha en stor pekikon, och appbutiker kräver en bild vid 1024 pixlar. Att manuellt storleksändra en logotyp till allt detta innebär att öppna designprogram, justera canvasstorlekar och exportera fil efter fil. Denna favicon-generator gör allt detta åt dig på några sekunder och förvandlar en uppladdad bild till åtta PNG-ikoner i rätt storlek.

När du laddar upp din bild skapar generatorn ikoner vid 16x16, 32x32, 48x48, 64x64, 128x128, 192x192, 512x512 och 1024x1024 pixlar. Den uppsättningen täcker nästan alla situationer du kommer att möta: den lilla flikikonen, mellanstorlekar som webbläsare och operativsystem begär, stora ikoner som mobilens hemskärmar och webbappens manifest använder, och bilden i full storlek som appbutiker kräver. Du granskar varje resultat i förhandsvisningsrutnätet och laddar bara ner de storlekar du faktiskt behöver.

Det enklaste sättet att få bra resultat är att börja med en kvadratisk bild. Ikoner är alltid kvadratiska, och verktyget skalar din källa för att fylla en kvadratisk canvas, så en icke-kvadratisk bild kommer att sträckas ut. En transparent PNG på 512x512 eller större är idealisk. Om din logotyp, säg, är tusen pixlar bred men bara fyrahundra hög, beskära den till en kvadrat innan du laddar upp snarare än att låta generatorn förvränga den.

Att skala en stor logotyp ned till 16 pixlar är verkligen svårt. Text försvinner, tunna linjer suddas ut, och subtila övertoningar blir till brus. Generatorn använder webbläsarens högkvalitativa bildutjämning för att hålla kanterna så rena som möjligt i varje storlek, men varje verktyg har gränser när designen är rörig. Enkla, djärva märken med stark kontrast överlever resan ned till 16 pixlar; komplexa bilder klarar det sällan.

Integritet är en av de främsta anledningarna till att människor föredrar detta tillvägagångssätt. Hela konverteringen sker inuti din webbläsare med HTML5 canvas-API:t. Din bild laddas aldrig upp, lagras eller skickas någonstans, vilket gör verktyget lämpligt för opublicerade produkter, kundlogotyper och allt du helst inte vill ha på en tredjepartsserver. Stäng fliken när du är klar så försvinner varje spår av din uppladdning.

Det är också värt att vara tydlig med vad verktyget inte gör. Det matar ut PNG-ikoner, vilket är vad nästan varje modern plattform accepterar. Det skapar inte en .ico-fil, paketerar inte allt i ett zip-arkiv och genererar inte ett webbapp-manifest åt dig. I praktiken är detta sällan ett problem: moderna webbläsare har i åratal använt PNG-favicons gladeligen, och .ico-formatet är mestadels ett arv. Ladda ner de storlekar du vill ha, lägg sedan till ett par link-taggar på din sida.

Att koppla ikonerna till en webbplats är rakt på sak. I sidans head-sektion lägger du till en link-tagg som pekar på din primära favicon, till exempel en 32x32 PNG, plus en apple-touch-icon-länk för iOS och, om du kör en progressiv webbapp, 192x192- och 512x512-poster i din manifest.json-fil. Ladda upp filerna till din server, peka taggarna mot dem, så visas ikonen i flikar, bokmärken och på hemskärmar.

Tänk på de vardagliga situationer där detta kommer in. En bloggare vill ha en riktig webbplatsikon för WordPress och vill inte öppna Photoshop. En utvecklare lanserar en webbapp och behöver en favicon plus PWA-ikoner i projektmappen. En startup förbereder en App Store-annons och behöver en kvadratisk 1024x1024-ikon som också fungerar som en liten startikon. En student bygger ett klassprojekt och vill att det ska se färdigt ut. Alla dessa kan använda samma verktyg på under en minut.

Här spelar designval större roll än verktyget. Håll favicon nära den enklaste formen av din logotyp, använd dina varumärkesfärger och undvik text som bara är meningsfull i stora storlekar. Om din ikon har en transparent bakgrund, kom ihåg att webbläsarflikar finns i både ljusa och mörka teman, så testa den mot båda. Om den har en solid bakgrund kommer den att se konsekvent ut överallt utan extra ansträngning.

Ännu en praktisk notering: webbläsare cachar favicons aggressivt. Efter att du uppdaterat din webbplatsikon kan du fortsätta se den gamla ett tag. En hård uppdatering eller en snabb kontroll i ett inkognitofönster bekräftar att den nya ikonen är live. Att hålla filen liten hjälper också, eftersom favicon efterfrågas vid varje sidladdning och ofta är en av de första filerna som hämtas.

Du behöver varken designerfarenhet eller installerad programvara för att använda detta. Det körs helt i din webbläsare, fungerar på Windows, macOS, Linux och till och med på en telefon, och det finns inget konto att skapa och inget att betala. Ladda upp så många bilder du vill, så ofta du vill, och ladda bara ner de storlekar du behöver. Det är ett av de små verktygen som tyst räddar dig från en förvånansvärt tråkig uppgift.