ເນື້ອຫາ
- ກົດລະບຽບການອອກແບບ Favicon
- 01. ເຮັດໃຫ້ມັນສາມາດຮັບຮູ້ໄດ້
- 02. ໃຊ້ໂລໂກ້ຂອງທ່ານ
- 03. ໃຫ້ມັນແຈ່ມແຈ້ງ
- 04. ສ້າງສອງສະບັບ
- cheatsheet ຂະຫນາດ Favicon
- ໂປແກຼມທ່ອງເວັບທີ່ມັກ
- ວິທີການສ້າງໂປແກຼມທ່ອງເວັບຄອມພິວເຕີ້
- ຈາກຫນາກແອບເປີ
- ວິທີການສ້າງໂປແກຼມ Apple Touch favicons
- Android, Chrome ແລະ Opera
- ວິທີການສ້າງ Favicon ສຳ ລັບ Android, Chrome ແລະ Opera
- Safari
- ວິທີການສ້າງ Favicon ສຳ ລັບແທັບທີ່ຖືກ pinned ຂອງ Safari
- ປະເພດອື່ນໆທີ່ມັກ
JUMP TO: - ກົດລະບຽບການອອກແບບ Favicon
- cheatsheet ຂະຫນາດ Favicon
- ໂປແກຼມທ່ອງເວັບທີ່ມັກ
- ຈາກຫນາກແອບເປີ
- Android, Chrome ແລະ Opera
- Safari
- ປະເພດອື່ນໆທີ່ມັກ
ການອອກແບບ Favicon ແມ່ນ ສຳ ຄັນກວ່າທີ່ທ່ານຄິດ,. ຂະ ໜາດ ສຳ ຄັນຢູ່ທີ່ນີ້ຍ້ອນວ່າໂລໂກ້ທີ່ຖືກອອກແບບດີຕ້ອງເປັນທີ່ຍອມຮັບໄດ້ໃນຂະ ໜາດ ໃດກໍ່ຕາມທີ່ມັນເຫັນ. ມັນ ຈຳ ເປັນຕ້ອງໄດ້ປັບຂະ ໜາດ ຈາກ ໜ້າ ຈໍຂະ ໜາດ ໃຫຍ່ຕັ້ງແຕ່ນ້ອຍລົງໄປຫາໄອຄອນທີ່ສາມາດມີຂະ ໜາດ ນ້ອຍຂະ ໜາດ 16 x 16 ພິກເຊວ, ເຊິ່ງເອີ້ນວ່າ Favicon. ຕົວຢ່າງທີ່ດີຂອງການອອກແບບ favicon ແມ່ນສັນຍາລັກຂອງ Google. ມັນເຮັດວຽກໄດ້ດີເລີດ ສຳ ລັບ ໜ້າ ຈໍທີ່ໃຫຍ່ກວ່າດ້ວຍ 'G' ໃຫຍ່ແລະຕົວ ໜັງ ສືທີ່ມີສີ່ສີ. ແລະມັນຍັງເປັນທີ່ສາມາດຮັບຮູ້ໄດ້ໃນເວລາທີ່ຫົດຕົວລົງໄປຫາ 'G' ສີ່ສີນ້ອຍໆທີ່ເຫັນໃນແຖບທີ່ຢູ່ຂອງຕົວທ່ອງເວັບ.
Favicon ສາມາດເຫັນໄດ້ວ່າເປັນສັນຍາລັກທາງລັດ, ຮູບສັນຍາລັກແຖບຫຼືໄອຄອນ ໝາຍ, ດັ່ງນັ້ນມັນ ຈຳ ເປັນຕ້ອງເບິ່ງສ່ວນ. ເພື່ອເບິ່ງການອອກແບບ favicon ທີ່ເຮັດວຽກ, ເບິ່ງການລວບລວມການອອກແບບໂລໂກ້ຂອງພວກເຮົາແລະກວດສອບການລວບລວມຮູບສັນຍາລັກຂອງແອັບ app iOS ທີ່ ໜ້າ ປະທັບໃຈ.
ໃນບົດຂຽນນີ້, ພວກເຮົາ ກຳ ລັງຈະ ດຳ ເນີນການໂດຍຜ່ານຂັ້ນຕອນວິທີການອອກແບບ Favicon ທີ່ດີເລີດ. ພວກເຮົາຈະມີ ຄຳ ແນະ ນຳ ສະເພາະ ສຳ ລັບການສ້າງ Favicon ສຳ ລັບ Apple ອຸປະກອນ, Android, Chrome, Opera ແລະ Safari. ບວກກັບຄູ່ມືແນະ ນຳ ທີ່ ເໝາະ ສົມກັບຂະ ໜາດ ແລະຮູບແບບຂອງ favicon ທີ່ທ່ານຕ້ອງການຮູ້. ໃຊ້ລິ້ງດ່ວນ (ຂວາ) ເພື່ອເຕັ້ນໄປຫາສ່ວນທີ່ທ່ານຕ້ອງການ.
ການອອກແບບ Favicon: ການເຊື່ອມໂຍງດ່ວນ- ລະບຽບການອອກແບບ Favicon
cheatsheet ຂະ ໜາດ Favicon
- ໂປແກຼມທ່ອງເວັບທີ່ມັກ
- Apple Touch favicons
- ລະບົບ Android, Chrome ແລະ Opera
- ແຖບທີ່ມີ pinned ຂອງ Safari
- ຊອກຫາຮູບສັນຍາລັກທີ່ແຕກຕ່າງກັນບໍ? ເບິ່ງຄູ່ມືຂອງພວກເຮົາໃນຊຸດໄອຄອນຟຣີທີ່ດີທີ່ສຸດ
ໃນຊ່ວງຕົ້ນໆຂອງເວບໄຊທ໌, Favicon ແມ່ນພຽງແຕ່ແຟ້ມຂະ ໜາດ 16x16px, ແຕ່ປະຈຸບັນມັນມີຄວາມສັບສົນເລັກນ້ອຍ. ມີຂະ ໜາດ ແລະຂະບວນການທີ່ ເໝາະ ສົມ ສຳ ລັບສະພາບການທີ່ແຕກຕ່າງກັນ. ການສ້າງ Favicon ທີ່ ເໝາະ ສົມແມ່ນວິທະຍາສາດ.
ສະນັ້ນ, ພວກເຮົາ ກຳ ລັງຈະເລີ້ມຕົ້ນດ້ວຍ ຄຳ ແນະ ນຳ ອັນດັບ ໜຶ່ງ ສຳ ລັບສິ່ງທີ່ Favicon ຂອງທ່ານຄວນເບິ່ງ, ແລະຈາກນັ້ນກ້າວໄປຫາ ຄຳ ແນະ ນຳ ສະເພາະກ່ຽວກັບວິທີສ້າງ Favicon ສຳ ລັບສະພາບການທີ່ແຕກຕ່າງກັນ. ພວກເຮົາ ກຳ ລັງໃຊ້ຮູບແບບທີ່ມີຢູ່ໃນ Apply Pixels ເພື່ອສ້າງຂະ ໜາດ favicon ທີ່ແຕກຕ່າງກັນແລະງ່າຍດາຍ, ແລະ Favicon ຈາກ Apply Pixels ເປັນຕົວຢ່າງ.
ກົດລະບຽບການອອກແບບ Favicon
01. ເຮັດໃຫ້ມັນສາມາດຮັບຮູ້ໄດ້
ສິ່ງທໍາອິດທີ່ຄວນພິຈາລະນາໃນເວລາທີ່ການອອກແບບ Favicon ແມ່ນສິ່ງທີ່ຕ້ອງການເປັນຕົວແທນໃນຜ້າໃບ. ຈົ່ງຈື່ໄວ້ວ່າ Favicon ຂອງທ່ານຈະຖືກສະແດງໃຫ້ຜູ້ໃຊ້ເຫັນເທົ່ານັ້ນເມື່ອພວກເຂົາໃຊ້ແລ້ວຢູ່ໃນເວັບໄຊທ໌ຂອງທ່ານຫຼືໄດ້ ໝາຍ ໄວ້ແລ້ວ. ດັ່ງນັ້ນບໍ່ ຈຳ ເປັນຕ້ອງລອງແລະດຶງດູດຜູ້ໃຊ້ດ້ວຍ Favicon ຂອງທ່ານ.
02. ໃຊ້ໂລໂກ້ຂອງທ່ານ
ພິຈາລະນາ favicons ເປັນປ້າຍສັນຍານ sober ທີ່ຊ່ວຍຜູ້ໃຊ້ໃນການຮັບຮູ້ເວັບໄຊທ໌ຂອງທ່ານໃນເວລາທີ່ຊອກຫາລາຍຊື່ເຄື່ອງ ໝາຍ ແລະ ໜ້າ ຈໍເຮືອນຂອງພວກເຂົາ. ເພາະສະນັ້ນ, ທ່ານຕ້ອງການໃຊ້ສັນຍາລັກຂອງທ່ານ, ຫລືສັນຍາລັກອັນໃດທີ່ເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດຮັບຮູ້ເວັບໄຊທ໌ຂອງທ່ານໄດ້ງ່າຍທີ່ສຸດ. ຖ້າທ່ານບໍ່ມີໂລໂກ້ທີ່ ເໝາະ ສົມກັບຜ້າໃບສີ່ຫລ່ຽມ, ໃຫ້ໃຊ້ສ່ວນທີ່ເປັນທີ່ຮູ້ຈັກຂອງໂລໂກ້ຂອງທ່ານ.
03. ໃຫ້ມັນແຈ່ມແຈ້ງ
ມັນຍັງມີອີກສອງສາມຢ່າງທີ່ທ່ານຄວນຫລີກລ້ຽງ. ຢ່າໃຊ້ Favicon ເປັນເຄື່ອງມືການຕະຫຼາດ - ນັ້ນ ໝາຍ ຄວາມວ່າບໍ່ມີປ້າຍລາຄາ, ປ້າຍໂຄສະນາ 'ໃໝ່' ຫລື 'ອັບເດດ' ແລະອື່ນໆ. ໃນຄວາມເປັນຈິງ, ທ່ານບໍ່ຕ້ອງການທີ່ຈະເອົາຂໍ້ຄວາມພາຍໃນ Favicon ໃຫ້. ຂໍ້ຄວາມບໍ່ສາມາດຂະຫຍາຍໄດ້ດີ, ແລະໂອກາດທີ່ມັນອາດຈະຜິດກົດ ໝາຍ ຢ່າງໃດກໍ່ຕາມ. ສຸດທ້າຍ, ຢ່າໃຊ້ຮູບຖ່າຍ - ມັນຈະເປັນຕົມແລະບໍ່ສາມາດຮັບຮູ້ໄດ້ເຖິງຂະ ໜາດ ທີ່ມັນຈະປາກົດຢູ່.
04. ສ້າງສອງສະບັບ
ໃນເວລາທີ່ favicons ໄດ້ຖືກນໍາສະເຫນີຄັ້ງທໍາອິດໃນ Internet Explorer 5, ພວກເຂົາປາກົດຢູ່ໃນແຖບ URL ແລະຢູ່ໃນບັນຊີເຄື່ອງຫມາຍ. ໃນມື້ນີ້, favicons ຖືກສະແດງໃນຫຼາຍໆສະພາບການອື່ນໆ, ລວມທັງລາຍຊື່ເຄື່ອງ ໝາຍ, ເມນູທາງລັດແລະແມ້ແຕ່ເຮືອນໂທລະສັບມືຖືແລະໂທລະພາບ. ນີ້ເຮັດໃຫ້ມັນຍາກທີ່ຈະຄາດເດົາວ່າວິທີການທີ່ທ່ານມັກຈະຖືກສະແດງໃຫ້ຜູ້ໃຊ້ສຸດທ້າຍ.
ເພື່ອຮັບປະກັນວ່າ Favicon ຂອງທ່ານເບິ່ງດີໃນຫລາຍສະພາບການທີ່ແຕກຕ່າງກັນ, ມັນຄວນຈະສະແດງຢູ່, ແນ່ນອນທ່ານຄວນສະ ໜອງ ສອງຮູບແບບ favicon:
ໂລໂກ້ກ່ຽວກັບພື້ນຫລັງໂປ່ງໃສ
ສະບັບນີ້ແມ່ນສະແດງຢູ່ໃນແຖບ URL, ລາຍຊື່ເຄື່ອງ ໝາຍ ແລະສະຖານທີ່ອື່ນໆທີ່ Favicon ປາກົດຢູ່ຕິດກັບ URL ຫລືຊື່ເວັບໄຊທ໌ຂອງທ່ານ.
ໂລໂກ້ໃສ່ການຕື່ມຂໍ້ມູນແຂງ
ສະບັບນີ້ຖືກ ນຳ ໃຊ້ໃນບັນດາຕາຕະລາງທີ່ຄ້າຍຄືຕາຂ່າຍໄຟຟ້າແລະເມນູທາງລັດທີ່ browser ຫຼືອຸປະກອນເຮັດ ໜ້າ ກາກພື້ນຫລັງ, ເພື່ອບັນລຸຄວາມເປັນເອກະພາບໃນສະພາບການ.
cheatsheet ຂະຫນາດ Favicon
ດັ່ງທີ່ໄດ້ກ່າວມາກ່ອນ, ສະພາບການທີ່ແຕກຕ່າງກັນຮຽກຮ້ອງໃຫ້ມີ favicons ຂະ ໜາດ ທີ່ແຕກຕ່າງກັນ. ຂ້າງລຸ່ມນີ້ທ່ານສາມາດເຫັນ ຄຳ ແນະ ນຳ ທີ່ວ່ອງໄວກ່ຽວກັບຮູບແບບແລະຂະ ໜາດ ທີ່ແຕກຕ່າງກັນທີ່ທ່ານ ຈຳ ເປັນຕ້ອງສະ ໜອງ ເພື່ອໃຫ້ກວມເອົາທຸກໆກໍລະນີການ ນຳ ໃຊ້ຫຼັກ.
ກ່ອນຫນ້ານີ້ favicons ຕ້ອງໄດ້ຮັບການສະຫນອງໃນຮູບແບບ ICO. ມື້ນີ້ມັນບໍ່ເປັນຫຍັງທີ່ຈະສະ ໜອງ ເອກະສານໃນຮູບແບບ PNG (ຍົກເວັ້ນຮູບສັນຍາລັກຂອງ Safari Pinned Tab ເຊິ່ງຄວນຈະໃຫ້ເປັນ SVG).
ຖ້າທ່ານຕ້ອງການວິທີທີ່ງ່າຍຕໍ່ການອອກແບບແລະສົ່ງອອກທຸກຂະ ໜາດ ຂອງ favicon, ໃຫ້ເບິ່ງທີ່ແມ່ແບບ favicon ຢູ່ທີ່ Apply Pixels.
ຕອນນີ້ລອງພິຈາລະນາເບິ່ງທີ່ລະອຽດກ່ຽວກັບຂໍ້ ກຳ ນົດການ ນຳ ໃຊ້ທີ່ແຕກຕ່າງກັນ.
ໂປແກຼມທ່ອງເວັບທີ່ມັກ
ວິທີການສ້າງໂປແກຼມທ່ອງເວັບຄອມພິວເຕີ້
ເລີ່ມຕົ້ນດ້ວຍ Favicon ທີ່ກົງໄປກົງມາທີ່ສຸດທີ່ທ່ານຕ້ອງການສ້າງ: favicons ແບບ ທຳ ມະດາ ສຳ ລັບ browser browser ແບບເກົ່າ. ປະເພດຂອງ favicon ນີ້ເຮັດວຽກໄດ້ດີທີ່ສຸດໃນພື້ນຖານທີ່ໂປ່ງໃສ, ຍ້ອນວ່າມັນມັກຈະປາກົດຢູ່ໃນແຖບ URL ແລະໃນລາຍຊື່ເຄື່ອງ ໝາຍ.
ທ່ານ ຈຳ ເປັນຕ້ອງສະ ໜອງ Favicon ຊະນິດນີ້ເປັນສາມຂະ ໜາດ, ທັງ ໝົດ ຮູບແບບ PNG ກັບ a ພື້ນຫລັງໂປ່ງໃສ.
- 16x16
- ຂະ ໜາດ 32x32
- 48x48
ຈາກຫນາກແອບເປີ
ວິທີການສ້າງໂປແກຼມ Apple Touch favicons
iOS ຂອງ Apple ໃຊ້ Apple Touch Iconsເພື່ອເປັນຕົວແທນຂອງເວັບໄຊທ໌ທີ່ຖືກບັນທຶກໄວ້ໃນ ໜ້າ ຈໍເຮືອນຂອງ iOS ເປັນການ ໝາຍ. ນີ້ ໝາຍ ຄວາມວ່າໄອຄອນ Apple Touch ຈະຖືກມົນກັບ ໜ້າ ກາກຂອງຮູບສັນຍາລັກຂອງແອັບ app iOS.
ມັນຍັງຈະຖືກສະແດງຕໍ່ກັບພື້ນຫລັງໃດກໍ່ຕາມທີ່ຜູ້ໃຊ້ໄດ້ເລືອກ ສຳ ລັບ ໜ້າ ຈໍເຮືອນຂອງພວກເຂົາ. ດ້ວຍຄວາມຄິດນີ້, Apple Touch Icon ຂອງທ່ານຄວນຈະມີ ພື້ນຖານການຕື່ມຂໍ້ມູນແຂງ ແບບ.
Apple favicons ຄວນໄດ້ຮັບການສະຫນອງໃນ ຮູບແບບ PNG. ທ່ານສາມາດ ໜີ ໄປໄດ້ດ້ວຍການໃຫ້ ຂະ ໜາດ 180x180 ໄອຄອນ Apple Touch ເຊິ່ງຈະສາມາດປັບຂະ ໜາດ ອັດຕະໂນມັດ ສຳ ລັບຂະ ໜາດ iPhone ແລະ iPad ຕ່າງໆ. ນີ້ຈະເຮັດວຽກໄດ້ດີໃນກໍລະນີຫຼາຍທີ່ສຸດ.
ຖ້າບໍ່, ທ່ານສາມາດສະ ໜອງ ຂະ ໜາດ ເພີ່ມເຕີມ ສຳ ລັບອຸປະກອນ Apple ທີ່ແຕກຕ່າງກັນ:
- ຂະ ໜາດ 60x60
- ຂະ ໜາດ 76x76
- ຂະ ໜາດ 120x120
- ຂະ ໜາດ 152x152
- ຂະ ໜາດ 180x180
link rel = "apple-touch-icon" ຂະຫນາດ = "60x60" href = "/ apple-touch-icon-60x60.png"> link rel = "ແອບເປີ້ນ - ແຕະ - ໄອຄອນ" ຂະ ໜາດ = "76x76" href = "/ ແອບເປີ້ນ -touch-icon-76x76.png "> link rel =" apple-touch-icon "ຂະ ໜາດ =" 120x120 "href =" / apple-touch-icon- 120x120.png "> link rel =" apple-touch-icon " ຂະ ໜາດ = "152x152" href = "/ apple-touch-icon- 152x152.png"> link rel = "apple-touch-icon" ຂະ ໜາດ = "180x180" href = "/ apple-touch-icon- 180x180.png">
Android, Chrome ແລະ Opera
ວິທີການສ້າງ Favicon ສຳ ລັບ Android, Chrome ແລະ Opera
Android, Chrome ແລະ Opera ໃຊ້ android-chrome-192x192.png ແລະ android-chrome-512x512.png ທີ່ Google ແນະ ນຳ.
ນັບຕັ້ງແຕ່ການແນະ ນຳ ໄອຄອນປັບຕົວໃນ Android, ເວບໄຊທ໌ທີ່ເພີ່ມເຂົ້າໃນ ໜ້າ ຈໍເຮືອນຂອງ Android ຈະເຮັດ ໜ້າ ກາກການອອກແບບ 192x192, ສະນັ້ນຮູບສັນຍາລັກຈະມີຮູບຮ່າງຫລັງຈາກຮູບແບບ ໜ້າ ກາກທີ່ຜູ້ໃຊ້ມັກ. ນີ້ອາດຈະເປັນກະຮອກ, ຮູບຊົງມົນ, ຮູບສີ່ຫລ່ຽມມົນ, ຮູບສີ່ຫລ່ຽມມົນຫລືຮູບຊົງດອກໄມ້.
ທ່ານຕ້ອງການສ້າງ a PNG favicon ກັບ ພື້ນຖານແຂງ, ທີ່ 192x192 ແລະ ຂະ ໜາດ 512x512.
ປະຕິບັດ favicons ເຫຼົ່ານີ້ໂດຍການເພີ່ມ a manifest.json ຍື່ນເຂົ້າເວັບໄຊທ໌້ຂອງທ່ານແລະເຊື່ອມໂຍງກັບມັນພາຍໃນແທັກ:
link rel = "manifest" href = "/ manifest.json">
ນີ້ແມ່ນລະຫັດ ສຳ ລັບ manifest.json ແຟ້ມ:
{"ຊື່": "", "short_name": "", "ຮູບສັນຍາລັກ": [{"src": "/ android-chrome- 192x192.png", "ຂະ ໜາດ": "192x192", "ປະເພດ": "ຮູບພາບ / png "}, {" src ":" / android- chrome-512x512.png "," ຂະ ໜາດ ":" 512x512 "," ປະເພດ ":" ຮູບພາບ / png "}]," theme_color ":" #ffffff ", "background_color": "#ffffff", "display": "standalone"}
Safari
ວິທີການສ້າງ Favicon ສຳ ລັບແທັບທີ່ຖືກ pinned ຂອງ Safari
ນີ້ແມ່ນຄີກ ໜຶ່ງ ທີ່ອອກ, ແລະມັນແມ່ນສິ່ງດຽວທີ່ຕ້ອງການໃຫ້ ຮູບແບບ vector ເປັນ ເອກະສານ SVG. ມັນສະແດງເປັນຮູບສັນຍາລັກແຖວຮູບນ້ອຍໃນເວລາທີ່ຜູ້ໃຊ້ pins ແຖບກັບປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ Safari.
Favicon ນີ້ຕ້ອງເປັນເອກະສານ SVG ສີ ດຳ 100% ພ້ອມດ້ວຍ a ພື້ນຫລັງໂປ່ງໃສ. SVG ສາມາດເປັນພຽງຊັ້ນດຽວເທົ່ານັ້ນ, ແລະ Safari ແມ່ນຮຽກຮ້ອງໃຫ້ມີ viewBox ຄຸນລັກສະນະຂອງ SVG ທີ່ຈະຖືກຕັ້ງໃຫ້ເປັນ "0 0 16 16’.
link rel = "mask-icon" href = "your_icon.svg">
ປະເພດອື່ນໆທີ່ມັກ
ມີບາງຂະ ໜາດ ແລະຮູບແບບ favicon ທີ່ບໍ່ໄດ້ລວມເຂົ້າໃນບົດຄວາມນີ້ຕົວຢ່າງ. Google TV, Chrome Web Store ແລະ iOS 7 Apple Touch Icons. ຍ້ອນຫຍັງ? ເນື່ອງຈາກວ່າພວກເຂົາຖືກປະຕິເສດຫຼືຍ້ອນວ່າພວກເຂົາບໍ່ຄ່ອຍມີຄວາມກ່ຽວຂ້ອງກັບນັກພັດທະນາເວັບໂດຍສະເລ່ຍ.
ໂດຍທົ່ວໄປ, ນັກພັດທະນາແລະນັກອອກແບບຄວນພະຍາຍາມສະ ໜັບ ສະ ໜູນ ອຸປະກອນແລະລະບົບປະຕິບັດການທີ່ກ້ວາງຂວາງເທົ່າທີ່ເປັນໄປໄດ້, ແຕ່ບາງຄັ້ງມັນກໍ່ບໍ່ມີຄວາມ ໝາຍ ຫຍັງເລີຍ. ແຕ່, ຖ້າທ່ານຕ້ອງການເບິ່ງບັນຊີຮູບພາບ favicon ທີ່ສົມບູນຕື່ມອີກ, ໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ເບິ່ງເອກະສານ cheat favicon ນີ້ຢູ່ໃນ GitHub.
