Сайт үшін favicon жасау: пайдалы кеңестер мен қызметтер

  1. Favicon жасау әдісі
  2. Фотосуретте favicon жасау
  3. Favicon-ды қалай сақтауға болады
  4. Favicon торабын қалай қосуға болады
  5. Favicon дегенді қалай ауыстыруға болады
  6. Күрделі фавикондарды қалай жасауға болады

Бұл сөзді естігенде фавиконның қандай екенін түсіну қиын. Бұл сіз қолданатын операциялық жүйеге және интернет браузеріне байланысты браузерлердің қойындыларында, мекенжай жолдарында және басқа аймақтарда көрсетілетін кішкентай белгіше . Бұл веб-сайттың дизайнында ең күрделі және күрделі элементтердің бірі деп атауға болады.

Жақсы фавицонды құру өте қиын, өйткені белгішесі кішкентай, анық болуы керек және сіздің сайтпен байланысты нәрсе
Жақсы фавицонды құру өте қиын, өйткені белгішесі кішкентай, анық болуы керек және сіздің сайтпен байланысты нәрсе. Барлық танымал браузерлермен үйлесімді favicon жасау өте қиын міндет. Осы мақалада біз оның барлық күрделі аспектілерін қарастырамыз. Егер сізге логотип қажет болса, онда бізде бар мақала мұны қалай жасауға болады.

Favicon жасау әдісі

Favicon дизайнымен бастайық. Жақсы дизайн, оның жинақы болуына қарамастан, сіздің сайтыңыздың мәнін көрсетеді және корпоративтік сәйкестіктің органикалық бөлігі болуы керек. Әдетте, белгіше компания логотипі (белгішесі) емес, жалпы логотип (белгіше, мәтін және ұран) емес.

Фавикон ретінде бұл веб-сайттар өздерінің белгішелерін пайдаланады (немесе суреттерге жақын) Фавикон ретінде бұл веб-сайттар өздерінің белгішелерін пайдаланады (немесе суреттерге жақын).

Фавикондағы мәтінді қолдануға болмайды, себебі бұл мәтін кішкентай сурет өлшеміне байланысты оқылмайды. Бұл ереженің жалғыз ерекшеліктері - белгілі брендпен автоматты түрде байланыстырылатын әлемге әйгілі мәтін таңбалары. Мысалы, Википедияның онлайн-ресурсы фавиконда «В» бас әріптерімен және Facebook-да «F» әрпін қалдырды.

Бұл фавикондарда нақты брендпен тығыз байланысты хаттар бар
Бұл фавикондарда нақты брендпен тығыз байланысты хаттар бар. Мысалы, Facebook өзінің графикалық белгісін пайдаланады. Пиксельдер Дисней суретінен көрінеді. Бұл скриншот 16 × 16 белгішімен үйлесімді Retina дисплейінде алынып, веб-сайттар 32 × 32 белгішесін пайдаланады.

Фавикондар кішкентай суреттер болғандықтан, әрбір пиксел маңызды рөл атқарады. Кейде логотипті азайғаннан кейін, жеке пикселдер көрінеді, бұл кескін «бұлдыр» болады. Түсінікті болу үшін белгішені пиксель деңгейінде өңдеу қажет.

Бұны болдырмау үшін, Photoshop немесе GIMP секілді арнайы редакторлар арқылы логотипті өзгерту қажет
Бұны болдырмау үшін, Photoshop немесе GIMP секілді арнайы редакторлар арқылы логотипті өзгерту қажет. Алдымен кескіннің өлшемін 64x64 пикселге дейін азайту керек (бұл фавиконның ең үлкен өлшемі). Әрі қарай, қаріптің көмегімен әрбір пиксельді кескін тазалау керек. Бұл өте қиын процесс, бірақ нәтиже тұр. Favicon 64x64 дайын болғанда, сіз 16 × 16, 24 × 24 және 32 × 32 пиксел суретімен бірдей жұмысты орындауыңыз керек. Барлық браузерлерде және гаджеттерде кескінді дұрыс бейнелеудің көптеген өлшемдері:

  • 64x64 - Safari браузерлерінің бетбелгілері;
  • 32x32 - жоғары ажыратымдылықты дисплей (Retina);
  • 24x24 - бетбелгілер Internet Explorer және MicroSoft Edge;
  • 16x16 - Google Chrome және басқа браузерлер.

Фотосуретте favicon жасау

Алдымен жоғарыда көрсетілген өлшемдермен бірнеше кенепті жасау керек.

Содан кейін кенепке белгіше, хат немесе басқа сурет қосу керек
Содан кейін кенепке белгіше, хат немесе басқа сурет қосу керек.

Содан кейін кенепке белгіше, хат немесе басқа сурет қосу керек

Favicon-ды қалай сақтауға болады

Әртүрлі өлшемдегі белгішелерді жасай отырып, әрқайсыңызды мөлдір PNG файл ретінде сақтаңыз (24 бит). Photoshop бағдарламасында File мәзіріндегі қол жетімді веб-сақтау мүмкіндігін пайдалануға болады. Содан кейін барлық PNG файлдарын бір ICO файлына біріктіруіңіз керек. Сіз PNG файлдарын және ICO файлдарын бір мезгілде пайдалана аласыз, бірақ жиі Safari және Chrome тек ICO пішімін артық көреді. Менің ойымша, бір ICO файлын жасау оңайырақ. ICO форматы өте жиі кездеседі, бірақ бақытымызда файлдарды осы форматқа түрлендіруге көмектесетін бірқатар құралдар бар. Осы мақсатта мен пайдаланғым келеді X-Icon редакторы . Бұл жүктелген кескіндерді бір ICO файлына дереу түрлендіретін тегін онлайн қызметі, содан кейін оны жүктеуге болады. Бұл күрделі ештеңе емес, сайтта берілген нұсқауларды орындаңыз. Егер сіз өзіңізді үмітсіз адам деп есептесеңіз, сіз осы қызметтің пикселдік редакторымен тәжірибе жасай аласыз және өзіңізді фавиконды салуыңызға болады. (Фавикондарды тағы да кәсіби редакторларда редакциялауды қалаймын, мысалы, Photoshop).

PNG кескіндерін X-Icon Editor бағдарламасына жүктеу арқылы сіз бір ICO файлын шығарылымнан алады
PNG кескіндерін X-Icon Editor бағдарламасына жүктеу арқылы сіз бір ICO файлын шығарылымнан алады.

Favicon торабын қалай қосуға болады

Сонымен, сізде ICO файлы бар. Енді оны веб-сайтқа қосу керек. Файлды favicon.ico атына өзгертіңіз және оны веб-сайтыңыздың түбірлік қалтасына орналастырыңыз (index.html файлы және басқа стандартты файлдар сақталған жерде). Сәтті қосылғаннан кейін, оны веб-сайтыңызда көре аласыз .com / favicon.ico. Шамамен барлық браузерлер favicon.ico файлын түбірлік қалтадан іздейді. Сондықтан, осы қалтадағы favicon жүктеу маңызды. Әртүрлі браузерлермен үйлесімді болу үшін, оның орналасқан жерін көрсететін кез келген HTML элементтерін немесе сілтемелерін қоспау керек. Бұл трюк барлық браузерлер үшін жұмыс істейді, IE6 дейін. Сондай-ақ, WordPress сайтыңыз болса, онда көптеген тақырыптарда тақырып параметрлері үшін favicon қосуға болады. Бұл әдісті де қолдануға болады.

Favicon дегенді қалай ауыстыруға болады

Кейбір түсініксіз себептер бойынша браузерлер оны кэшке қосады. Сондықтан жаңа ICO файлын жүктегенде, браузер ескі фавицонды көрсетуді жалғастыруы мүмкін. Бұл жағдайда не істеу керек? Сіз жаңа favicon-дың орнын көрсететін уақытша HTML файлын қоса аласыз. Сондай-ақ, URL соңында сіз қысқа сұрау жолын қосуыңыз керек:

<link rel = «сілтеме белгішесі» href = «yours website .com / favicon.ico? v = 2» />

Сондықтан браузер бұл бірегей URL деп ойлайды, сондықтан жаңа белгішені көрсетуге мәжбүр болады. Favicon жаңартқаннан кейін, бұл HTML кодын толығымен алып тастауға болады. Егер сіз favicon-ға өзгерістер енгізгіңіз келсе, бірдей техниканы қолданыңыз, әр жолы сұрау жолындағы «v» санынан кейін сандарды көбейтіңіз. Осылайша, браузер бұл URL-ні әрқашан бірегей етіп қабылдайды және оның жаңа нұсқасын көрсетеді. Сәтті жаңартудан кейін HTML кодын жоюды ұмытпаңыз.

Күрделі фавикондарды қалай жасауға болады

Бұл мақалада мен кез-келген платформада жұмыс істейтін фавикондарды жасаудың әмбебап және жеңіл әдісін сипаттауды қаладым. Бірақ веб-дизайн мен әзірлеуде жетілуге ​​ешқандай шектеусіз. Егер сіз күрделі белгішелерді қалай жасауды үйренгіңіз келсе, қызметті қолдануға тырысуға болады favico.js . Бұл әртүрлі сандармен динамикалық суреттерді жасауға мүмкіндік береді. Осы белгішенің арқасында, тиісті қойынды белсенді болмаса да, оқылмаған хабарлар санын көре аласыз. Интернеттегі анимациялық фавикондарды жасағыңыз келсе, favicon генераторын пайдаланып көріңіз favicon.cc .

Қосымша онлайн генераторларды таба аласыз мұнда .

Егер сіз фавикондарды жасау бойынша кеңестеріңізбен бөлісіңіз немесе сұрақ қойғыңыз келсе, мен сізді түсініктемеде күтемін!

Бұл жағдайда не істеу керек?
Ico?

Добро пожаловать , Гость !

Мы настоятельно рекомендуем Вам зарегистрироваться, если вы ещё этого не сделали. регистрация откроет Вам новые функции.

Войти или Зарегистрироваться

www.silvio-berluskoni.ru © Все права защищены © 2016.