Как да сложим фавикон (favicon) на сайта си

Как да сложим favicon

Преди няколко дни моят читател Петър ми писа с въпрос по темата фавикон (favicon). Затова в тази статия ще опиша какво е фавикон, как да си го направим и как да го качим на своя сайт, базиран на WordPress. Целият процес няма да ви отнеме повече от десетина минути.

Как да сложим фавикон (favicon) на WordPress-сайта си

 

Какво е фавикон (favicon)?

Favicon (фавикон) в WordPressФавиконът е малка картинка, която се появява до заглавието на сайта в браузъра. Тя помага на редовните ви посетители да разпознават сайта и му придава идентичност. Въобще сайтът ви ще изглежда по-професионално, ако си имате фавикон.

Защо ни трябва?

Освен, че по-горните точки, фавиконът е и удобство за посетителите на сайта ви. Това се демонстрира от следното изображение:favicon2

Повечето хора имат много на брой едновременно отворени табове (раздели) в браузъра си. В този случай браузърът скрива заглавието на сайта и показва само картинката. Фавиконът помага на потребителите да разпознаят сайта ви бързо и да включат раздела, на който искат да отидат.

Как да си направим фавикон?

Фавиконът е обикновена картинка. Тя е квадратна и трябва да бъде с размери 32х32 или 16х16 пиксела. Може да я създадете с всяка програма за обработка на изображения – Photoshop, Gimp, Paint.NET и т.н. Аз ще ви покажа как да го направите с Pixlr. Ако в възможно, ползвайте за favicon логото си. В повечето случай, логото е прекалено голямо за фавикон. Затова изберете някаква част от логото си или го напаснете за малкия размер. Например фавиконът на Apple е прословутата ябълка, а на Google – бяло „g” на син фон. Запазете файла във PNG-формат. Ползвам този формат, защото поддържа прозрачен фон.

Форматът .ICO

Повечето модерни браузъри в днешно време поддържат .PNG и .GIF като формати за фавикон, но стари версии на Internet Explorer – не. Затова е по-добре да конвертирате своя .PNG файл в .ICO формат. Можете да го направите на този сайт. Повечето програми за обработка на изображение не поддържат директно запазване на изображение в .ICO-формата (с изключение на Gimp).

Да качим фавикона на своя WordPress-сайт!

Много от темите за WordPress (особено платените) дават възможност за качване на фавикон директно от настройките на темата. Възползвайте се от това, ако е възможно.

Ръчно качване на фавикона

1) Ако по-горната опция не е възможна, можете да качите фавикона си ръчно. Качете го директно в главната директория на сайта си. Можете да го направите през FTP или през файловия мениджър на хостинга си. Убедете се, че сте именували файла си правилно: favicon.ico

2) Незадължително, за напреднали ентусиасти: за да осигурите 100% съвместимост с всякакви екзотични или стари браузъри следва да въведете следния код в header.php на темата  си:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Можете да го направите като редактирате директно файла, но той ще бъде презаписан при евентуална актуализация на темата. Затова е по-добре да се ползва „тема-дете“ (child theme). Друг по-прост вариант е да ползвате плъгина Insert Headers and Footers, за да вкарате кода.

11 коментара за “Как да сложим фавикон (favicon) на сайта си”

  1. Любомир е супер питаш го нещо той ти отговаря с цял видео урок.
    Ех ако всички компютърни специалисти бяха толкова отзивчиви.

    1. Любо Николов

      Здравей, Петре! Радвам се, че видеото и статията са ти били полезни.

  2. Николай Колев

    Любо, съветите ти са безценни за собственици на сайтове без специализирани умения по уеб дизайн!

  3. Аксиния

    Здравейте,
    Не зная дали е удобно да Ви безпокоя, но имам един проблем с рекламите на Google Adsense и не мога да се справя. Излиза ми червен надпис „Рекламните Ви елементи не показват реклами, тъй като не се потвърдили адреса си (ПИН кода). Кликнете тук, за да потвърдите адреса си, след като сте получили по пощата своя ПИН.“.
    До момента нямам никаква картичка с ПИН за да го потвърдя. Писах им на тези с поддръжката, а те ми върнаха отговор с препратка към помощното меню. Аз поне не можах да намеря как да се справя с проблема. Бихте ли ми помогнали как да постъпя?
    Предварително благодаря.
    Поздрави!

    1. Любо Николов

      Здравей, Аксиния! Нямам опит с Adsense. Във всеки случай те съветвам да не се занимаваш с него, освен ако нямаш сайт с огромен трафик. Изкарват се стотинки на клик, но ще имаш много малко кликове с малко трафик. По-добре е да продаваш собствен продукт или да взимаш комисионна продавайки продукта на някой друг.

  4. Димитър Цанков

    Браво, добър урок. Само да кажа WordPress, има разширения, които го правят автоматично. Просто избираш картината натискаш на „ок“ и всичко е готово! (разботи, пробвал съм го) Понеже аз не използвам WordPress, не мога да кажа точно името на разширението, но напишете favicon и ще Ви излязат. Мисля, че този начин е по-удачен за начинаещи.

    1. Любо Николов

      Има разширения, които ти позволяват да качиш favicon-a от таблото на WordPress. Самият favicon разбира се все още трябва да си го направиш сам. За препоръчване е да ползваме колкото може по-малко разширения, за да не забавяме сайта си.

  5. Благодаря за полезната статия.
    Бих искал да те помоля, ако имаш възможност да споделиш как се прави промяна на footer-а на различните теми. Аз съм с дъщерна тема на Omega, но няма никаква информация как да се сложат връзки, контактна информация и пр.
    Ще бъда много благодарен. 🙂

    1. Любо Николов

      Ако няма възмжоност да се слагат джаджи във футъра, трябва да се променя кода на темата. За безплатна поддръжка е най-добре да се обърнеш към автора на темата.

  6. Здравей,супер си! Въпросът ми може да е малко тъп, но не разбирам много от тези неща, а имам голямо желание. Така и попаднах тук, мъчейки се да следвам всяка твоя стъпка, но се запънах на това с фавикон-а. Как точно да стигна до този контрол панел,изобщо с тази поща в гугъл…? Имам регистрация в gmail от телефона, но не знам дали това ми помага изобщо. Въпросът ми е, как да кача ръчно фавикон в уордпрес от контрол панела на хостинга? Не намирам контрол панел! /извинявам се, но не ми е ясно/

Leave a Comment

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Scroll to Top