Utilia
Kategoritë ▾
Gjuha: sq ▾

Gjenerator i favicon

Krijo favicon.ico, ikona PNG, apple-touch-icon dhe site.webmanifest nga një imazh ose emoji, me etiketa HTML gati për t'u ngjitur. Shkarkim ZIP, pa ngarkim.

Burimi

Përshtatja
site.webmanifest

Si të krijosh një favicon

  1. Te Burimi, zgjidh Imazh ose Tekst ose emoji. - Imazh: hidh një PNG, JPG, WebP ose SVG. Funksionon më mirë një logo katrore prej të paktën 512 × 512 px. Zgjidh I gjithë imazhi që ta përshtatësh brenda ikonës, ose Mbush dhe preje që të mbulojë katrorin. - Tekst ose emoji: shkruaj një shkronjë, inicialet ose një emoji, pastaj zgjidh Shkronjat, I trashë dhe Ngjyra e tekstit.
  2. Vendos Ngjyra e sfondit, ose zgjidh Sfond i tejdukshëm. Zgjidh një Forma (Katror, Me qoshe të rrumbullakosura ose Rreth) dhe një Hapësira e brendshme (%) për të lënë vend rreth përmbajtjes.
  3. Opsionalisht hap site.webmanifest për të shkruar Emri i aplikacionit (web manifest), Emri i shkurtër, Ngjyra e temës dhe URL e dosjes së ikonave (lër / nëse skedarët shkojnë në rrënjën e sajtit tënd).
  4. Kliko Gjenero favicon. Ikonat shfaqen në madhësinë e tyre reale, pranë një skede të simuluar shfletuesi. Pas kësaj, çdo ndryshim i përditëson menjëherë.
  5. Kliko Shkarko ZIP, ngarko skedarët në sajtin tënd, pastaj Kopjo etiketat dhe ngjiti brenda <head> të faqeve të tua.

Çfarë ka në ZIP

Skedari Madhësia Përdoret nga
favicon.ico 16, 32 dhe 48 px Skedat e shfletuesit, faqerojtësit, shfletuesit e vjetër, Windows
favicon-16x16.png 16 × 16 Skedat e shfletuesit
favicon-32x32.png 32 × 32 Skedat në ekrane me densitet të lartë, shkurtoret në shiritin e detyrave
apple-touch-icon.png 180 × 180 Ekrani kryesor i iPhone dhe iPad
android-chrome-192x192.png 192 × 192 Ekrani kryesor i Android (web manifest)
android-chrome-512x512.png 512 × 512 Ekranet e hapjes gjatë instalimit (web manifest)
site.webmanifest — Emri, ngjyrat dhe ikonat e një sajti të instalueshëm
favicon-tags.html — Etiketat HTML, për referencë

Skedari ICO mban tri imazhe PNG, një format që e lexojnë Windows (që nga Vista) dhe çdo shfletues i sotëm. Apple-touch-icon ruhet gjithmonë mbi një sfond të plotë, sepse iOS i shfaq pikselat e tejdukshëm si të zi; me sfond të tejdukshëm përdoret e bardha.

Etiketat HTML

Etiketat e gjeneruara duken kështu (me URL-në e dosjes sate):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Shfletuesit kërkojnë automatikisht edhe /favicon.ico në rrënjën e domenit tënd, prandaj mbajtja e tij atje ndihmon edhe në faqet pa etiketa.

Këshilla për dizajnin

  • Mbaje të thjeshtë. Në 16 × 16 px, detajet zhduken. Një shkronjë e vetme, një simbol i trashë ose versioni më i thjeshtë i logos lexohet më mirë.
  • Kontrollo pamjen paraprake në madhësi reale. Ikona 16 px te skeda e simuluar është ajo që shohin vërtet vizitorët.
  • Mendo për modalitetin e errët. Një logo e errët mbi sfond të tejdukshëm mund të zhduket në temat e errëta të shfletuesit; një sfond me ngjyrë ose një hapësirë e vogël e brendshme ndihmon.
  • Emoji duken ndryshe në çdo sistem, sepse çdo platformë i vizaton emoji në stilin e vet. Skedarët PNG e ruajnë pamjen e pajisjes sate.

Pyetje të shpeshta

Cilat madhësi i duhen një favicon?

Në praktikë: një favicon.ico me 16, 32 dhe 48 px, një apple-touch-icon 180 px dhe PNG 192 e 512 px për web manifest. Ky mjet i krijon të gjitha nga një burim i vetëm.

A mund të përdor një logo SVG?

Po. Skedarët SVG vizatohen në rezolucion të lartë para se të krijohen ikonat. SVG shfaqet si imazh i thjeshtë, ndaj skriptet e tij nuk ekzekutohen kurrë.

Si ta bëj një favicon me emoji?

Zgjidh Tekst ose emoji, shkruaj ose ngjit emoji-n, zgjidh një sfond ose lëre të tejdukshëm, dhe gjenero. Rezultati është PNG dhe ICO e vërtetë, ndaj funksionon në çdo shfletues.

Pse nuk shfaqet favicon-i im i ri?

Shfletuesit i ruajnë favicon-et fort në memorie. Ringarko me memorien e pastruar, hap sajtin në një dritare private, ose shto një version te URL-ja, si /favicon.ico?v=2.

A ngarkohet imazhi im?

Jo. Ikonat, ZIP-i dhe manifesti krijohen në shfletuesin tënd; asgjë nuk largohet nga pajisja jote.

Mjete të ngjashme