كيف تضيف أيقونة الهويّة Favicon إلى موقع تديره
 |
| Favicon |
سنتعلم في هذا الدرس كيفية ترسيخ هويّة بصرية قوية لموقعك عبر تصميم أيقونة الهوية “fav icon” واستخدامها في ووردبريس، ليراها الزائر إلى موقعك بمجرد وصوله، وإبراز الموقع وسط زحام ألسنة المواقع التي لديه في المتصفح عن يمين موقعك وشماله، وسنتعرّف أيضًا كيف ننقل نفس الهوية البصرية عبر الأجهزة المختلفة التي قد يزورك منها المستخدمون.
 |
| Favicon |
شقّت أيقونات الهويّة طريقها بصورة رسمية لأول مرة في متصفح ميكروسوفت “إنترنت إكسبلورر” إصدار 5، في عام 1999، أي حين كان الإنترنت في أيام طفولته، وقد اعتمدتها W3C (اتحاد الويب العالمي) في غضون بضعة أشهر، واستخدمها مطورو الويب من حينها.
وتدعم أغلب متصفحات الويب الآن صيغ الصور الحديثة التي يمكن إخراج أيقونة الهوية بها، مثل png – gif – svg، إضافة إلى صيغة ico القديمة، وسنمر سريعًا على أشهرهم سريعًا فيما يلي:
لماذا؟
ببساطة لأن الصيغ الأحدث مثل PNG وGIF غير مدعومة من بعض المتصفحات القديمة، ولأن المكان الذي تبحث فيه المتصفحات عن أيقونة الهوية للموقع يختلف بشكل كبير من متصفح لآخر، وهناك احتمال لحدوث خطأ 404 إن لم يجد المتصفح أيقونة الهوية في المكان الافتراضي الذي يبحث فيه.
كما أن صيغة ICO تسمح بحفظ أكثر من صورة في نفس الملف، كأنها حاوية لمجموعة صور، وهذا يفيدنا في حفظ عدة نسخ من أيقونة الهوية بأكثر من كثافة نقطية في ملف واحد -مثلًا 16*16 و32*32 و48*48 كما تنصح مايكروسوفت-، كي يقرر المتصفح أي صورة أفضل للعرض حال فتح الموقع من جهاز بعينه.
ذلك أن نسخة 16*16 مثلًا لن تكفي وحدها، فهي لا تناسب العرض في شريط المهام أو على سطح المكتب للمستخدم مثلًا وإن كانت مناسبة تمامًا للعرض في لسان المتصفح، فحينها يكون وجود أكثر من نسخة في مصلحة هوية الموقع البصرية.
 |
| Favicon |
ورغم أن صيغة ICO تدعم شفافية قناة ألفا 8-بت “8bit alpha channel transparency”، إلا أن إيجاد برامج لتصميم الصورة وإظهار تأثير الشفافية من الصعوبة بمكان.
ICO متاحة كخيار احتياطي في مجلد الجذر للموقع.
وبهذا فإنك تضمن تغطية أكبر قدر ممكن من إصدارات المتصفحات التي قد يدخل منها المستخدمون إلى موقعك مع تقليل احتمال ظهور خطأ 404.
لا شك أن أغلب حركة الويب تأتي من أجهزة محمولة سواء كانت هواتف أو حواسيب لوحية، لذا يجب ألا تهمل ذلك أثناء تصميم أيقونة الهوية. لكن تلك الأجهزة متشعبة ومتنوعة أكثر من المتصفحات نفسه،ا حين نفكر في مقاسات الصورة المناسبة وأحجام الشاشات وأنظمة تشغيل تلك الأجهزة أيضًا، فليس هناك حل واحد يناسبهم جميعًا. وحينها يجب أن يكون لديك نسخ بصيغة PNG، ونسخ لأيقونات Apple Touch، وأخرى لرسوميات Windows 8 Tile Graphics، وهكذا ..
كي تغطي كافة النسخ المحتملة لأيقونة الهوية لموقعك أو هويتك البصرية بشكل عام.
إننا ننصح باستخدام برامج تصميم احترافية لإنشاء هويتك البصرية بشكل عام ولأيقونة الهوية في حالتنا هذه، وسنستخدم برنامج PhotoShop CS6 من شركة أدوبي لهذا الدليل، لكن لديك خيارات مجانية مثل GIMP أيضًا، وستجد الخيارات متشابهة نوعًا ما.
- حمّل إضافة ICO Format الخاصة ببرنامج فوتوشوب، والتي سنحفظ صورتنا بامتداد ico من خلالها.
- داخل فوتوشوب، اضغط File، ثم New، ثم أنشئ صورة بأبعاد 512*512 بكسل، بكثافة نقطية قدرها 72 بكسل/بوصة.
- صمم أيقونتك داخل مساحة الصورة الفارغة التي أنشأناها قبل قليل.
- حين يكون تصميمك جاهزًا، اضغط Image، ثم Image Size.
- تأكد من تنشيط خيار Constrain Proportions واضبط أبعاد الصورة على 16*16 بكسل.
- استخدم فلتر Unsharp Mask لتقليل التشويش في الأيقونة.
- اضغط File ثم حفظ باسم، واحفظ تصميمك بامتداد ICO.
- سجّل دخولك إلى لوحة إدارة ووردبريس.
- اضغط على Appearence (مظهر)، ثم Customize (تخصيص).
- اضغط على Site Identity أو (هوية الموقع) إن كنت تستخدم النسخة العربية من ووردبريس.
- اضغط على Select file (اختر ملفًا) في الجزء الذي تجد مكتوبًا فيه Site Icon (أيقونة الموقع)، واختر أيقونة الهوية التي صممتها.
- ستظهر أيقونة الهوية الآن تحت ترويسة Site Icon في Site Identity، اضغط Save and Publish (حفظ ونشر).
أما بخصوص تغيير الرمز المفضل Favicon فى مدونة بلوجر :
ادخل على موقع بلوجر ومن ثم الاعدادات
بعد ما تختار الاعدادات انزل لأسفل قليلا ومن ثم اختار الرمز المفضل
- أضف كلا الصيغتين ICO وPNG لتغطية أكبر قدر ممكن من المتصفحات الموجودة الآن.
- اطلع على الدليل الجامع لأيقونات الهوية كي تستهدف أكبر شريحة ممكنة من الأجهزة المحمولة (أو حالات الاستخدام عمومًا).
- استغل أدوات مثل Favicon.cc كي تخرج أكثر من حجم لأيقونتك في ملف واحد بكفاءة ويسر.
- استخدم خاصية Site Icon في ووردبريس 4.3+ كي تريح رأسك من عناء تثبيتها بالطريقة التقليدية في الإصدارات القديمة، لكن الإصدار القديم متوفر إن شئت.
كلمات دلالية
favicon generator,favicon size,favicon.ico,favicon html,favicon meaning,favicon image,favicon examples,favicon icon,favicon squarespace,favicon angular,favicon api,favicon astra theme,favicon and logo,favicon add,favicon as svg,favicon as png,favicon app,a favicon png,favicon_a_eupayfgghqiai7k9sol6lg2.ico,favicon a wordpress,favicon a html,add a favicon html,create a favicon online,add a favicon,create a favicon in canva,favicon best practices,favicon bootstrap,favicon blurry,favicon best practices 2021,favicon base64,favicon browser,favicon big cartel,favicon by realfavicongenerator,b favicon blue,favicon code,favicon css,favicon changer,favicon creator,favicon checker,favicon converter,favicon code html,favicon canva,add favicon cpanel,favicon c'est quoi,favicon c quoi,favicon dimensions,favicon definition,favicon dimensions 2021,favicon design,favicon download,favicon dark mode,favicon download from website,favicon dimensions squarespace,récupérer favicon d'un site,télécharger favicon d'un site,enregistrer favicon d'un site,le favicon d'un site,favicon editor,favicon emoji,favicon extension,favicon error,favicon extractor,favicon elementor,favicon examples html,favicon e-shop,change favicon email,favicon email,favicon e-commerce,o'que e favicon,cos e favicon,que e favicon,kakvo e favicon,favicon format,favicon free,favicon file type,favicon file,favicon finder,favicon file format,favicon from svg,favicon flask,icon for favicon,favicon google,favicon generator 32x32,favicon google sites,favicon github,favicon gif,favicon generator free,favicon gatsby,g favicon fixer,g favicon icons,favicon html code,favicon how to,favicon html5,favicon how to make,favicon hubspot,favicon header,favicon head,favicon ico,favicon image size,favicon in html,favicon ideas,favicon image shopify,favicon icon size,favicon i wordpress,favicon i icon,npm i favicons,i hate your favicon,i dont like favicon,cosa sono i favicon,favicon javascript,favicon jekyll,favicon jpg,favicon joomla,favicon js,favicon jpg or png,favicon png html,bluej favicon,favicon kajabi,favicon kartra,favicon kit,favicon kawaii,favicon kya hai,favicon keycloak,favicon key,favicon keepass,k čemu slouží favicon,favicon link,favicon logo,favicon library,favicon location,favicon list,favicon link tag,favicon logo size,favicon lookup,favicon maker,favicon meta,favicon mdn,favicon max size,favicon mockup,favicon mime type,favicon missing,m&s favicon,blue m favicon,favicon not showing up,favicon not showing,favicon not working,favicon not updating,favicon not found,favicon next js,favicon not showing up localhost,favicon not showing in safari,favicon n'apparait pas,favicon on squarespace,favicon on shopify,favicon on wix,favicon on wordpress,favicon on website,favicon optimization,favicon on canva,favicon on google sites,o favicon é,favicon o matic,o favicon icon,favicon o que é,o que favicon,como mudar o favicon html,o q é favicon,o ícone ou favicon,favicon pronunciation,favicon png,favicon pixel size,favicon photoshop,favicon png size,favicon path,favicon pixel dimensions,favicon preview,favicon que es,favicon question mark,favicon quasar,favicon quality,favicon quiz,favicon qr code,favicon question,favicon query parameter,q es un favicon,favicon react,favicon resolution,favicon requirements,favicon recommended size,favicon rails,favicon records,favicon react app,favicon rel,favicon r shiny,favicon r markdown,favicon rstudio,red r favicon,favicon size 2021,favicon shopify,favicon svg,favicon specs,favicon search,favicon size wordpress,s favicon blue,letter s favicon,omeka s favicon,browser favicon,favicon tester,favicon tag,favicon tracking,favicon template,favicon to png,favicon transparent background,favicon tutorial,favicon text,t shirt favicon,t-mobile favicon,favicon url,favicon unbounce,favicon url clickfunnels,favicon usage,favicon url finder,favicon unicode,favicon use,favicon update in wordpress,favicon viewer,favicon vue,favicon and icon,favicon video,favicon vector,favicon vs svg,favicon virus,v favicon image,favicon v=2,favicon wordpress,favicon wix,favicon w3schools,favicon website,favicon what is,favicon webflow,favicon wordpress change,favicon weebly,favicon with html,favicon with google,favicon w joomla,favicon w wynikach wyszukiwania,favicon w joomla 3,favicon x-icon,favicon xampp,favicon xenforo,favicon x theme,favicon xara web designer,favicon xss,favicon xml,x-icon favicon,jupiter x favicon,favicon setting x theme,vert.x favicon,x theme favicon not working,favicon image/x-icon,x-icon editor favicon,favicon youtube,favicon yapma,favicon yootheme,favicon yoast,favicon yoga,favicon yii2 change,favicon yelp,favicon yin yang,favicon zendesk,favicon zip,favicon zoom,favicon zencart,favicon zeta producer,favicon značenje,zabbix favicon,dragon ball z favicon,favicon 000webhost,favicon_0,change favicon 000webhost,add favicon 000webhost,favicon trackid=sp-006,webhost000 favicon,favicon.ico 000webhost,/icons/icons/favicon-32x32.png,favicon 16x16,favicon 16x16 or 32x32,favicon 192,favicon 128x128,favicon 16x16 generator,favicon 180x180,favicon 100x100,favicon 16px,favicon 1.exe,favicon_1.ico,magento 1 favicon,1&1 favicon,1&1 favicon generator,yii 1 favicon,bitbug favicon (1).ico,1&1 ionos favicon,favicon 2021,favicon 256x256,favicon 200,favicon 2020,favicon 200 mg,favicon 204,200 /favicon.ico,favicon 2,magento 2 favicon,magento 2 favicon change,png 2 favicon,magento 2 favicon not showing,magento 2 favicon size,magento 2 favicon path,favicon 32x32,favicon 32x32 or 16x16,favicon 301,favicon 32x32 download,favicon-32x32.png,favicon 302,favicon 3dcart,favicon 304,favicon 3,vue 3 favicon,joomla 3 favicon change,bootstrap 3 glyphicons,django 3 favicon,codeigniter 3 favicon,grails 3 favicon,python 3 favicon,favicon 404,favicon 404 flask,favicon 403 forbidden,favicon 48x48,favicon 400 tablet,favicon 400 tablet uses,favicon 404 nginx,favicon 403 error,favicon 4,bootstrap 4 favicon,codeigniter 4 favicon,webpack 4 favicon,ionic 4 favicon,cakephp 4 favicon,spring 4 favicon,vue cli 4 favicon,favicon 512x512,favicon 500 error,favicon 503,favicon 500,favicon 502,favicon 512px,favicon html 5,favicon.ico 503 (service unavailable),html 5 favicon,webpack 5 favicon,bootstrap 5 favicon,html 5 favicon code,wordpress 5 favicon,ionic 5 favicon,gantry 5 favicon,rails 5 favicon,favicon 64x64,favicon 64 bit,favicon rails 6,base64 favicon,favicon aem 6.5,favicon aem 6.4,laravel 6 favicon,angular 6 favicon not showing,rails 6 favicon,angular 6 favicon,shopware 6 favicon,otrs 6 favicon,shopware 6 favicon ändern,favicon squarespace 7.1,favicon laravel 7,favicon drupal 7,favicon angular 7,favicon vaadin 7,liferay 7.2 favicon,drupal 7 favicon.ico not found,prophoto 7 favicon,drupal 7 favicon,laravel 7 favicon,angular 7 favicon,liferay 7 favicon change,windows 7 favicon location,jboss eap 7 favicon,favicon 800,8 bit favicon,8080/favicon.ico,8080/favicon.ico 404,8000/favicon.ico,8 ball favicon,8bit favicon generator,favicon drupal 8,drupal 8 favicon,laravel 8 favicon,angular 8 favicon,drupal 8 favicon not showing,drupal 8 favicon theme,vaadin 8 favicon,drupal 8 favicon.ico,umbraco 8 favicon,favicon 96x96,favicon-96x96.png,9 favicon,99 favicon,favicon generator 96x96,favicon angular 9,favicon drupal 9,favicon kentico 9,angular 9 favicon,drupal 9 favicon,tomcat 9 favicon,kentico 9 favicon,typo3 9 favicon,typo3 9 favicon einbinden
