<
  • Главная
Статьи

Kaip sukurti svetainę: naudingi patarimai ir paslaugos

  1. Kaip sukurti favicon
  2. Kaip padaryti, kad „Photoshop“ būtų „favicon“
  3. Kaip išsaugoti favicon
  4. Kaip įterpti favicon svetainę
  5. Kaip pakeisti favicon
  6. Kaip sukurti sudėtingesnius faviconus

Sunku atspėti, kas yra favicon, kai pirmą kartą girdite šį žodį. Tai miniatiūrinė piktograma , kuri rodoma naršyklių skirtukuose, adresų eilutėse ir kitose srityse, priklausomai nuo naudojamos operacinės sistemos ir interneto naršyklės. Jis gali būti saugiai vadinamas vienu sudėtingiausių ir sudėtingiausių svetainės dizaino elementų.

Geros favicon sukūrimas yra gana sudėtingas, nes piktograma yra maža, ji turėtų būti aiški ir rodyti kažką, susijusį su jūsų svetaine
Geros favicon sukūrimas yra gana sudėtingas, nes piktograma yra maža, ji turėtų būti aiški ir rodyti kažką, susijusį su jūsų svetaine. Sukurti favicon, kuris yra suderinamas su visomis populiariomis naršyklėmis, taip pat gali būti nelengvas uždavinys. Šiame straipsnyje aptarsime visus sudėtingus jos kūrimo aspektus. Jei taip pat reikia logotipo, mes turime straipsnį kaip tai padaryti.

Kaip sukurti favicon

Pradėkime nuo favicon dizaino. Geras dizainas, nepaisant kompaktiškumo, turėtų atspindėti jūsų svetainės esmę ir būti organinės tapatybės dalimi. Paprastai piktograma yra įmonės grafinis ženklas (piktograma), o ne visas logotipas (piktograma, tekstas ir šūkis).

Šiose svetainėse, kaip favicon, naudojamos jų piktogramos (arba jų artimi vaizdai) Šiose svetainėse, kaip favicon, naudojamos jų piktogramos (arba jų artimi vaizdai).

Favicon tekstas neturėtų būti naudojamas, nes šis tekstas bus neskaitytas dėl mažo vaizdo dydžio. Vienintelės šios taisyklės išimtys yra žinomi teksto ženklai, kurie automatiškai susieti su konkrečiu prekės ženklu. Pavyzdžiui, „Wikipedia“ internetinis šaltinis palieka „Favicon“ didžiosios raidės „W“ ir „Facebook“ - raidę „F“.

Šiuose faviconuose yra raidžių, kurie yra glaudžiai susiję su konkrečiu prekės ženklu
Šiuose faviconuose yra raidžių, kurie yra glaudžiai susiję su konkrečiu prekės ženklu. Pavyzdžiui, „Facebook“ naudoja savo grafinį ženklą. Taip pat atkreipkite dėmesį, kad „Disney“ vaizde matomi pikseliai. Taip yra todėl, kad ekranas buvo paimtas iš tinklainės ekrano, kuris yra suderinamas su 16 × 16 piktogramomis, o svetainės naudoja 32 × 32 piktogramas.

Kadangi faviconai yra maži vaizdai, kiekvienas pikselis vaidina svarbų vaidmenį. Kartais po logotipo sumažinimo matomi atskiri pikseliai, dėl kurių vaizdas tampa „neryškus“. Siekiant aiškumo, reikia redaguoti piktogramą pikselių lygiu.

Norėdami to išvengti, reikia pakeisti logotipo dydį naudodami specialius redaktorius, pvz
Norėdami to išvengti, reikia pakeisti logotipo dydį naudodami specialius redaktorius, pvz., „Photoshop“ arba „GIMP“. Pirmiausia reikia sumažinti vaizdo dydį iki 64x64 pikselių (tai yra didžiausias dydis). Tada turite redaguoti kiekvieną pikselį naudodami pieštuko įrankį, kol vaizdas bus aiškus. Tai yra sunkus procesas, tačiau rezultatas yra verta. Kai favicon 64x64 yra parengtas, reikia atlikti tą patį darbą su 16 × 16, 24 × 24 ir 32 × 32 pikselių vaizdu. Tiek daug dydžių, kuriuos reikia atvaizduoti teisingai, rodomi visose naršyklėse ir programėlėse:

  • 64x64 - „Safari“ naršyklės žymės;
  • 32x32 - didelės skiriamosios gebos ekranai (tinklainė);
  • 24x24 - žymės „Internet Explorer“ ir „MicroSoft Edge“;
  • 16x16 - „Google Chrome“ ir kitos naršyklės.

Kaip padaryti, kad „Photoshop“ būtų „favicon“

Pirmiausia reikia sukurti keletą drobių, kurios turi aukščiau nurodytus matmenis.

Tada jums reikia pridėti piktogramą, raidę ar kitą vaizdą į drobę
Tada jums reikia pridėti piktogramą, raidę ar kitą vaizdą į drobę.

Tada jums reikia pridėti piktogramą, raidę ar kitą vaizdą į drobę

Kaip išsaugoti favicon

Sukūrę skirtingo dydžio piktogramas išsaugokite kiekvieną kaip skaidrią PNG failą (24 bitų). „Photoshop“ programoje galite naudoti funkciją „Išsaugoti žiniatinklyje“, esančią meniu Failas. Tada jums reikia sujungti visus PNG failus į vieną ICO failą. Vienu metu galite naudoti tiek PNG failus, tiek ICO failus, tačiau dažnai net „Safari“ ir „Chrome“ pageidauja tik ICO formato. Mano nuomone, lengviau sukurti vieną ICO failą. ICO formatas nėra labai dažnas, tačiau, laimei, yra daug įrankių, kurie gali padėti jums konvertuoti failus į šį formatą. Šiuo tikslu aš norėčiau naudoti X-Icon redaktorius . Tai nemokama internetinė paslauga, kuri iš karto atsisiunčiamas nuotraukas paverčia į vieną ICO failą, po kurio galite jį atsisiųsti. Tai nėra sudėtinga, tiesiog vadovaukitės svetainės instrukcijomis. Jei manote, kad esate beviltiškas žmogus, galite eksperimentuoti su šios paslaugos pikselių redaktoriumi ir patraukti favicon. (Nors norėčiau redaguoti „favicons“ profesionalesniame redaktoriuje, pavyzdžiui, „Photoshop“).

Įkeliant PNG vaizdus į „X-Icon“ redaktorių, išvesties metu gausite vieną ICO failą
Įkeliant PNG vaizdus į „X-Icon“ redaktorių, išvesties metu gausite vieną ICO failą.

Kaip įterpti favicon svetainę

Taigi, jau turite ICO failą. Dabar jūs turite jį įtraukti į svetainę. Pervardykite failą į „favicon.ico“ ir įdėkite jį į savo svetainės šakninį aplanką (kur saugomas index.html failas ir kiti standartiniai failai). Po sėkmingo papildymo galite jį peržiūrėti savo svetainėje .com / favicon.ico. Beveik visos naršyklės ieško failo favicon.ico šakniniame aplanke. Todėl svarbu, kad atsisiuntėte favicon į šį aplanką. Dėl suderinamumo su skirtingomis naršyklėmis geriau neįtraukti jokių HTML elementų ar nuorodų, rodančių jo vietą. Šis triukas veikia visoms naršyklėms, iki IE6. Be to, jei turite „WordPress“ svetainę, tada daugelyje temų temos nustatymuose galite pridėti „favicon“. Šis metodas taip pat gali būti naudojamas.

Kaip pakeisti favicon

Dėl kai kurių nepaaiškinamų priežasčių naršyklės ją prideda prie talpyklos. Todėl, kai įkeliate naują ICO failą, naršyklė gali ir toliau rodyti jūsų seną favicon. Ką daryti šiuo atveju? Galite pridėti laikiną HTML failą, rodantį naujos favicon vietą. Taip pat URL pabaigoje turite pridėti trumpą užklausos eilutę:

<link rel = "nuorodos piktograma" href = "tavo svetainė .com / favicon.ico? v = 2" />

Taigi naršyklė manys, kad tai yra unikalus URL, todėl bus priverstas rodyti naują piktogramą. Atnaujinus „favicon“, šis HTML kodas gali būti visiškai pašalintas. Jei reikia atlikti favicon pakeitimus, naudokite tą patį metodą, kiekvieną kartą didinant skaičių po užklausos eilutės „v“. Taigi, naršyklė kiekvieną kartą suvoks šį URL kaip unikalų ir parodys naują versiją. Ir nepamirškite ištrinti HTML kodą po sėkmingo atnaujinimo.

Kaip sukurti sudėtingesnius faviconus

Šiame straipsnyje norėjau apibūdinti visuotinį ir paprastą būdą sukurti faviconus, kurie veiktų beveik bet kurioje platformoje. Tačiau interneto dizaino ir tobulinimo srityje tobulumo nėra. Jei norite sužinoti, kaip sukurti sudėtingesnes piktogramas, galite pabandyti naudotis šia paslauga favico.js . Tai leidžia kurti dinaminius vaizdus su įvairiais numeriais. Dėl šios piktogramos galite matyti neskaitytų pranešimų skaičių, net jei atitinkamas skirtukas nėra aktyvus. Jei norite sukurti animuotus faviconus internete, galite pabandyti naudoti „favicon“ generatorių favicon.cc .

Daugiau internetinių generatorių galite rasti čia .

Jei norite pasidalinti savo patarimais, kaip sukurti faviconus ar užduoti klausimą, laukiu jūsų komentarų!

Ką daryti šiuo atveju?
Ico?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью