Как да сложим фавикон на сайта си и защо ни трябва

Защо е толкова важно да сложим фавикон на сайта си? Може ли този прост детайл да промени нещата?

Какво е фавиконът?

Фавиконът е елемент, който участва в представянето на нашата марка в мрежата. Това е много малка икона, която придружава сайта или блога ни в различни ситуации. Терминът favicon произлиза от сливането на favorites и icon, защото този елемент всъщност в миналото е бил използван само от браузъра на Microsoft за разпознаване на уебсайтове, поставени в лентата с отметките (favorites).

Еволюцията на favicon продължава с приемането му от всички останали браузъри. Форматът favicon е стандартизиран от World Wide Web Consortium (W3C) в спецификациите HTML 4.01, публикувани през декември 1999 г. Малкото изображение става стандарт, който се вмъква в тага head на уебсайта с атрибута rel.

Често тази много малка графика, обикновено част от стратегията за логото ни, е оставена като последната дейност преди пускането на сайта на бял свят. Разбираемо е, още повече, че да сложим фавикон на сайта си можем и след като сайтът е започнал да действа. Имаме по-важни дела, над които да се съсредоточим преди това – структурата, оптимизацията, мобилната версия на сайта и т.н.

Фавиконът обаче трябва да се постави, дори и по-късно. Не чакай много. С него представяш своята марка на няколко пъти. Този малък графичен файл показва идентичността на твоя проект.

Защо трябва да сложим фавикон и къде се появява?

Неговата основна функция позволява незабавно да се разпознае сайта. Дали е в лентата с отметките, в serp (резултатите при търсене по ключова дума или израз) на търсачката или по време на сърфиране из интернет мрежата, няма значение

Първото място, където можеш да видиш фавикона, е разделът на браузъра. Ако като мен си свикнал да отваряш много табове в браузъра си, бързо забелязваш, че има сайтове с ярко открояващи се графики над адресната лента и други, които са без специален символ. Как можеш бързо да откриеш сайта, който ти трябва в момента, между отворените много табове, ако не по неговия символ, марка – фавикона.

Този елемент маркира сайтовете в мобилния serp на Google: той се показва в търсенията, близо до фрагментите с описанията на съдържанието на публикацията или сайта. Очевидно е, че този символ се превръща в интересен елемент от гледна точка на увеличаване на CTR (click-through rate – колко често хората, които виждат рекламата ти, кликват върху нея), точно като мета описанието.

Google въвежда някои забележими промени в начина, по който показва резултатите от мобилното търсене, предназначени да подчертаят по-добре източника зад всяка връзка. Новият дизайн на търсенето ще позволи на Google да добави още полезни визуализации. Подчертаването на източника на информация има много смисъл, особено що се отнася до опасенията за фалшиви източници на новини.

Тези икони на сайтовете се показват и в Google Discover на смартфона, който позволява да се екстраполират най-интересните новини за конкретен потребител.

Но това не спира дотук. Някои други уеб услуги и търсачки (като DuckDuckGo) също използват фавикони при показването на сайтовете в резултатите.

Указанията на Google за фавикона

Това са указанията за Google за фавикона на твоя сайт, в случай че си ги пропуснал:

• Файлът на фавикона и началната страница трябва да могат да бъдат обхождани от Google (т.е. не могат да бъдат блокирани за Google).
• Фавиконът трябва да представлява визуално марката на уебсайта ти, за да помогне на потребителите бързо да го идентифицират.
• Изображението му трябва да бъде кратно на квадрата на 48px, например: 48 x 48px, 96 x 96px, 144 x 144px и т.н. SVG файловете, разбира се, нямат определен размер. Поддържа се всеки валиден формат. Google ще промени размера на изображението ти на 16 x 16px за използване в резултатите от търсенето, затова се увери, че изглежда добре на тази резолюция. Забележка: не предоставяй 16x16px фавикон.
• URL адресът на фавикона трябва да е стабилен (не променяй често URL адреса).
• Google няма да показва никакви фавикони, които смята за неподходящи, включително порнография или символи на омраза (например свастики). Ако този тип изображения се появят, Google ще ги заменя с икона по подразбиране.

Съвет: Използвай следния URL адрес, за да визуализираш какво ще избере Google като твоя икона в serp: https://www.google.com/s2/favicons?sz=16&domain=https://youtube.com. Замени youtube.com със своя собствен домейн + поддомейн.

Размер и разширение на файла

Преди да създадеш икона за разпознаване на твоя уеб проект, трябва да помниш, че има стандарти, които трябва да се спазват. Фавиконът е графика с точни размери.

Стандартният размер е 16 × 16px.

Според стандарта Microsoft може да бъде и 24 × 24, 32 × 32, 64 × 64 пиксела в зависимост от ситуацията, в която се намира

Адресна лента: 16 × 16.

Нов раздел (таб) : 32 × 32px.

Браузърна лента: 24 × 24px.

Какъв вид файл трябва да използвам? За да е видим на всички браузъри, дори и в Internet Explorer, трябва да се използва разширение ICO, предназначено за малки изображения. Но може да се приложи PNG и JPG без много проблеми.

Как да създадем ефикасен фавикон

Най-напред трябва да се изясни идеята: какво да поставиш като фавикон? Предлагам да използваш логото си или част от него. Аз така направих. Създадох си лого за блога с мисълта да ползвам част от него като фавикон. В различен случай можеш да заложиш на лична снимка или буква, която те характеризира.

За да създадеш и оразмериш графичния файл, може да се използват различни инструменти: Photoshop, Gimp, онлайн инструменти Pixlr, Befunky, Ribbit и др. Ако файлът не е запазен в ICO формат, и имаш намерение да го използваш в такъв формат, има онлайн инструменти за преобразуване на  JPG или PNG, в ICO.

Безплатни онлайн генератори на икони

Има голямо удобство: съществуват няколко безплатни онлайн генератора на икони. Качваш файла и го получаваш с необходимото разширение.

Това са:

• icoconverter.com
• favicon-generator.org
• image.online-convert.com/convert-to-ico
• favicon.cc – рисуване с пиксели, после се изтегля директно във формат .ico и с размери 16 × 16px
• realfavicongenerator.net
• toolset.mrwebmaster.it/grafica/favicon.html# – с този могат да се рисуват в пиксели директно онлайн фавикони.

(adsbygoogle = window.adsbygoogle || []).push({});

Как да добавим фавикон на сайта

За да добавиш този файл има няколко решения. Много теми позволяват да поставиш лесно иконата с определени размери на сайта си.

Преди време единственото решение беше включването на .ICO в корена (root) на сайта.

Днес има различни начини.

Добавяне на файла в редактора на WordPress

Има специален HTML tag, за да укажеш местоположението на файла в уеб сървъра. Тагът се поставя в head на HTML файла със синтаксис:

<link rel = "icon" href = "http: // [path] /favicon.ico" />

По този начин всяко изображение с правилни размери (16 × 16 или 32 × 32, но също и 48 × 48 пиксела, ако е ICO) може да се използва като фавикон; алтернативно на ICO формат, форматите GIF и PNG от всякакъв размер също могат да бъдат използвани. Освен това, чрез използване на потенциала на GIF формат е възможно да се създават анимирани фавикони, дори ако те се поддържат само от някои браузъри.

За да използваш GIF или PNG формати, необходимият код е:

<link rel = "icon" href = "http: // [path] /favicon.gif" type = "image.gif" />

или:

<link rel = "icon" href = "http: // [path] /favicon.png" type = "image.png" />

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

Поставяне на фавикон чрез възможностите на WordPress

Първо създай иконата си. Трябва да бъде квадратно изображение със страна най-малко 512 пиксела. Добавянето му към сайта е много просто:

Отвори Таблото и иди във Външен вид –> Настройки. Панелът за персонализиране ти позволява да промениш някои аспекти на сайта и да видиш визуализацията в реално време. Кликни върху Идентичност на сайта, в долната част на страничната лента ще видиш раздел, наречен Икона на сайта. Качи създадената по-рано икона в сайта си, като кликнеш върху Избор на изображение. Имаш възможност да изрежеш изображението. Ако не, остави всичко, каквото е, и кликни върху Прескочи изрязването. След като тази стъпка бъде завършена, ще видиш визуализацията на фавикона и иконата, използвани от приложенията.

Вмъкване на Favicon с помощта на HTML код

Използването на HTML за вмъкване на фавикон не е сложно.

Качи файла .ico в корена root на сайта си. Не го поставяй в папка, в противен случай няма да работи. Отиди сега в редактора на WordPress от Външен вид –> Редактор на темите и отвори файла header.php (заглавието на темата), намери реда преди </head> и добави този низ:

<link rel="shortcut icon" href="<php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

Запази файла на header.php и отвори (или актуализирай) произволна страница от сайта си. Фавиконът ще се появи на мястото си.

Добавяне на фавикон чрез плъгин

Съществуват и плъгини за добавяне на този символ на сайта. Но като се има предвид, че самата платформа WordPress и повечето от модерните теми дават възможност за добавяне на фавикон, не виждам причината да се добавя плъгин.

Действия при актуализиране на фавикон

Когато промениш малкото изображение, потребителят вижда незабавно промяната.

Google, от друга страна, се нуждае от време, защото той отново трябва да сканира сайта ти.

Съвет: Препоръчително е, да поискаш незабавна проверка на сайта с инструмент за проверка на URL в Google Search Console.

Виж тук: Как да ускорим индексиране на нова публикация в Google

Заключение

Един сайт, дали е наистина професионален. се разбира и от фавикона.

Сега, когато Google я включва в резултатите от търсенето, малката графика става все по-важна. Съобщаваш веднага своя бранд, не е нещо банално и не е за пренебрегване.

Автор на основното изображение: Photo by Domenico Loia on Unsplash.

Източници за първото изображение Pngtree.com и Pixabay.com.