Универсален начин за създаване на фавикони. Създаване на Favicon онлайн Създаване на Favicon

Faviconе икона на уебсайт или страница под формата на малка икона с размер 16x16 пиксела (или по-голям). Потребителят може да види favicon под формата на малко изображение в адресната лента на браузъра вляво от връзката към отворен сайт, близо до името на сайта в отметки и раздели, в резултатите от някои търсачки, директории, услуги за отметки и т.н.

Едно време favicons можеха да се създават само във формат .ico, тъй като той се поддържаше само от стария браузър Internet Explorer. Оттук идва името favicon (съкратено от английската дума FAVорити ИКОНА– „икона за любими“). „Любими“ беше името, дадено на отметките в браузъра IE.

Днес иконите за уебсайтове и страници могат да бъдат създадени в много други формати, включително jpg, png, gif и, разбира се, добрата стара икона.

Защо се нуждаете от фавикон?

Инсталирането на такива икони ви позволява да ускорите визуалното търсене на желания раздел, особено ако има много от тях отворени. Виждането на разпознаваема картина е много по-лесно и по-бързо, отколкото разглеждането на заглавията на страниците.

Ето как изглеждат favicons в браузър.

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

Освен това иконата ще бъде запомнена от потребителите и след известно време ще стане разпознаваема за широка аудитория, което също ще бъде допълнителна атракция за посетителите.

На бележка. По-добре е да инсталирате favicon на вече оптимизиран уеб ресурс.

Например, търсачката Yandex има специални роботи YandexFavicons, които индексират favicons. Те посещават сайтове, за да събират и актуализират значки приблизително веднъж месечно.

В тази връзка рядко се случват актуализации, след които си струва да проверите за променена или нова икона за сайта. Следователно, след инсталиране на ново изображение, промените в дисплея на вашия относителен ресурс трябва да изчакат поне две седмици (това е минимумът).

След като търсачката намери иконата, ще трябва да я конвертира в PNG формат (ако е направена в ICO формат). След това можете да намерите favicon на вашия ресурс на адреса (използвайки Yandex като пример): http://favicon.yandex.net/favicon/URL-адрес-на-вашия-сайт.

Как да създадете фавикон за уебсайт?

Не е достатъчно да направите favicon само за шоу. Ако искате да се превърне в допълнителен източник за привличане на посетители, важно е да знаете как да създадете правилно икона на сайта.

Каталози и услуги за създаване на фавикони

Можете сами да направите икона за уебсайт или една от страниците му, особено ако сте удобни с Photoshop и други подобни програми. Ако нямате нито уменията, нито времето, нито желанието, днес има изобилие от специални удобни услуги за генериране на favicons и галерии, които предлагат готови икони за вашите проекти:

И това не са всички генератори и каталози, така че модерен уеб администратор може лесно да намери favicon, който му харесва.

Външен вид на иконата

Стандартният размер на favicon е 16x16 пиксела. Има и размери 24x24, 32x32, 48x48 и 64x64. Трябва да разберете, че иконата на сайта е неговото лице, от което до известна степен зависи трафикът. Следователно е необходимо да се подходи разумно към създаването на фавикон. Ето няколко правила за това как трябва да изглежда една икона, за да привлече вниманието на потребителите:

• Стил отговарящ на тематиката на сайта.Изображението трябва да бъде доминирано от същите цветове и елементи, които се използват в дизайна на интернет ресурса или неговото лого. Всъщност това е основната задача на фавикона – да кореспондира със сайта.
• Лесно за разбиране.Не трябва да рисувате изобилие от елементи и да ги извайвате един върху друг. Потребителят, гледайки иконата, трябва да разбере какво е изобразено върху нея, а не да се опитва да разгадае вашето „скрито значение“. Разумният минимализъм е ключът към успеха.
• Запомнящо се изображение.Тази точка е тясно свързана с предишните две. Темата и простотата на favicon ще гарантират, че потребителите ще го запомнят по-бързо и по-лесно. Опитайте се да използвате изображение, което, когато човек го погледне, може да го опише с някаква дума. Например, същата търсачка "Yandex" подходи идеално към този проблем и сега, когато видите логото под формата на буквата "I", веднага ще си спомните тази търсачка.

Инсталиране на фавикон

След като създадете favicon, той трябва да бъде инсталиран на сайта. Много е лесно да направите това:

1. Качете изображението favicon.ico в основната папка на вашия уебсайт;
2. Напишете следния код в HTML кода на самия сайт, в мета тага head:

Кодът на favicon трябва да се намира между таговете. Общоприето е, че при кодиране се използва възможно най-високо в кода.

Показване на Favicon на мобилно устройство

Favicon за мобилни сайтовеизползва като основна икона на вашия сайт. Когато отворите сайт на мобилен телефон, тази фавикона се показва на главния екран за бърз достъп в браузъра. Вашият сайт може да бъде добавен към главния екран на телефона и мобилната favicon също е включена тук.


Както можете да видите на екранната снимка по-горе, във VKontakte и Avito фавиконата не е адаптирана за мобилни устройства, така че се използва първата буква на домейна.

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

Икона за iOS

За да може favicon да се показва на iOS устройства и в браузъра Safari, трябва да напишете следния код:

Android

За устройства, работещи на Android, пишем:

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

Съдържанието му:

( "name": "%title%", "icons": [ ( "src": "\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png ", "density": "0.75"), ("src": "\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density" : "1.0" ), ( "src": "\/android-chrome-72x72.png", "размери": "72x72", "тип": "изображение\/png", "плътност": "1.5" ) , ( "src": "\/android-chrome-96x96.png", "размери": "96x96", "тип": "изображение\/png", "плътност": "2.0" ), ( "src" : "\/android-chrome-144x144.png", "sizes": "144x144", "type": "image\/png", "density": "3.0" ), ( "src": "\/android -chrome-192x192.png", "размери": "192x192", "тип": "изображение\/png", "плътност": "4.0" ) ] )

Но това не е всичко.В новите версии на Android (започващи с Lollipop) вашият браузър може да бъде преоцветен, за да съответства на цвета на интерфейса на сайта.


За да направите такава функция, напишете ред и задайте цвета си:

Windows Phone

Не забравяйте и favicon в Windows Phone:

За по-разширени настройки на иконите в Windows Phone можете да използвате следните стойности:

#8A2BE2

Самият конфигурационен файл:

Услуги за генериране и проверка на favicon

digitalagencyrankings.com

Въведете адреса на уебсайта си и получете анализ.


Не пренебрегвайте настройката на вашия favicon за мобилни устройства. Не забравяйте, че това е удобно за вашите посетители, за тях е лесно да видят вашия сайт в браузъра и да отидат на него.

Заключение

Днес почти всички браузъри поддържат favicons. Иконата на всеки сайт е уникална и правилното й създаване ще предаде цялата същност на сайта и ще увеличи честотата на кликване на вашия сайт в резултатите от търсенето.

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

Favicon generator - ще ви помогне да конвертирате и редактирате всяко изображение, превръщайки го във favicon за сайта. Днес е статия за най-добрия генератор на favicon за уебсайтове днес.

В днешно време е трудно да си представим уебсайт, който няма favicon. Favicon е икона, която се намира в адресната лента на браузъра или в заглавието на прозореца (в зависимост от браузъра) и която отличава отворения сайт/раздел от много други. Първоначално тези икони бяха разработени в IE, за да подчертаят даден сайт в списъка с отметки на браузъра (в IE тези отметки се наричаха Favorites) и оттам идва и името Favicon - икона за любими.

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

Има много услуги, които ви позволяват да генерирате favicons от снимки (това може да е лого или специално проектирана илюстрация). Но повечето от тях имат проблеми с прозрачността.

Проблеми с прозрачността с услугата за генериране на фавикони

За по-голяма яснота представяме илюстрацията „Как различните генератори на favicon обработват прозрачност и намаляване на размера на изображението.“

В това сравнение използвахме резултатите, получени от услугите favicon.cc и favicon-generator.org. Честно казано, доскоро ние самите използвахме услугата favicon.cc, но наскоро беше намерен отличен заместител - генератор на favicon № 1.

Най-добрият генератор на favicon - www.xiconeditor.com

Подобно на favicon.cc, този генератор на favicon има собствен вграден онлайн редактор на икони, но предимството му е отличната работа с прозрачност.

Съвсем очевидно е, че има разлика в качеството на прозрачност (очевидно разликата е в качеството на промяна на размера на зареденото изображение).

В допълнение, xiconeditor.com има още едно предимство - отлична система за предварителен преглед на favicon, която ви позволява да видите резултата в различни образи, без да изтегляте генерирания favicon. Техният преглед е много по-информативен от favicon.cc.

Поздрави, скъпи посетители на моя блог. Днес съм подготвил за вас селекция от 10 услуги, които ще ви помогнат да направите фавикон онлайн. И също така в края на статията подчертах 5-те най-удобни сайта според мен.

Като начало си струва да разберете какво е favicon? Мисля, че много от вас са запознати с тази концепция, но ще ви кажа отново. С една дума, това е иконата на вашия сайт. Когато търсите в Yandex, видяхте малка икона 16x16 до сайта, така че това е favicon. Може да се види и в адресната лента и в отметките в някои браузъри.

Тази малка снимка е преди всичко вашата марка. Хората ще разпознаят вашия сайт по него. Следователно, той трябва да бъде оригинален и запомнящ се, така че да бъде незабавно видим в търсенията на Yandex. Трудно е да нарисувате такава малка икона сами и онлайн услугите идват на помощ, които ще ви помогнат да направите favicon от снимка. Нека да разгледаме някои от тях по ред и да идентифицираме техните силни и слаби страни.

• Удобен за използване.
• Възможно е да направите фавикон от снимка или да го нарисувате сами.
• Можете да поръчате от професионалисти.
• Преглед на получения резултат.
• Мисля, че няма, всичко необходимо го има в сайта, мога само да подчертая, че няма галерия с готови икони.

1. 
   

   • Можете да създадете такъв от картина или да го нарисувате сами.
   • След генерирането се показва пример за връзка за добавяне към сайта.
   • Всичко е на английски.
   • Грозен дизайн.
   • Невъзможно е да изрежете изображение, когато го създавате.

2. 3 www.Chami.com

3. 
   

   • Красив удобен за потребителя интерфейс.
   • Възможно е да направите фавикон от снимка или да го нарисувате сами.
   • Голяма палитра от цветове за рисуване.
   • Без визуализация.
   • Всичко е на английски.
   • Няма галерия с готови икони.

4. 
   

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

5. 
   

   • Удобен красив интерфейс.
   • Нищо допълнително.
   • Възможно е да го нарисувате сами или да го генерирате от картина.
   • Има галерия с готови икони.
   • Можете да запазите размера на иконата, когато я създавате, или да я компресирате.
   • Преглед.
   • Можете да направите анимирана икона.
   • Огромен брой цветове за боядисване.
   • Всичко е на английски.

6. 
   

   • Има избор от размери на икони 16×16 и 32×32.
   • Няма допълнителни функции, само създаване на фавикон от изображение.
   • Без визуализация.

7. 
   

   • Преглед.
   • Голяма колекция от готови икони.
   • Има възможност за изрязване на изображението.
   • Всичко е на английски.
   • Има грешки в сайта.
   • Неудобен интерфейс.

8. 
   

   • Можете да изберете размер на иконата от 16×16, 32×32, 48×48 и 64×64.
   • Всичко е на английски.

9. 
   

   • Нищо допълнително.
   • Възможно е да изберете размера на иконата.
   • Можете да го нарисувате сами или да направите фавикон онлайн от снимка.
   • Няма опция за изрязване на изображението.
   • Без визуализация.

Представих ви само 10 онлайн услуги, въпреки че има много повече. Според мен тези са най-популярните сред всички. Ако използвате други, напишете ги в коментарите, аз и други читатели ще се интересуват да научат за тях.

И сега, както обещах, ТОП 5 удобни и висококачествени услуги, според мен.

Това са моите топ пет. Искам да знам коя услуга ще поставите на първо място и коя последна? Ще се радвам да чуя отговори в коментарите.

P.S. Ако все още не сте измислили фавикон за себе си, не забравяйте да разгледате уебсайта Faviconka.ru. В него ще намерите повече от 2000 готови икони за всеки вкус. Надявам се, че статията ви е била полезна и сте намерили своята услуга за създаване на фавикон онлайн.

Честно казано, наистина харесвам favicon. Имам дълбока, еднакво целомъдрена платонична любов към него. Това не означава, че разказвам на моите колеги уебмастъри истории за това как промених favicon и трафикът се е увеличил с 10% (макар че чакайте... може би това се случи), но означава, че когато favicon на новия ми сайт се появи в Yandex index, самият сайт започва да ми изглежда малко по-SDL.

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

Favicon (Favicon – съкращение от „любима икона“) е изображение, което се показва в адресната лента на браузъра преди адреса, в раздела, съответстващ на прозореца с отворената страница на сайта, както и при добавяне на ресурс към раздели любими. Тези изображения могат да помогнат на потребителя да запомни по-добре марката или компанията и да увеличат разпознаваемостта на сайта. Често намалено или леко променено изображение на лого на компания или марка се използва като фавикон.

Ползи от използването на favicon

Използването на favicon носи ползи във времето. Например, разгледайте тези опции:

• Когато потребителят отвори много раздели в браузъра, той може веднага да определи на кой от тях е сайтът, дори ако текстът с името вече не се показва;
• В резултатите от търсенето на Yandex фавиконата се показва вляво от сайта или неговата страница, което привлича вниманието на посетителите и го отличава от другите;
• Картината се помни добре и остава в паметта - в резултат на това сайтът става по-разпознаваем и привлекателен за потребителите.

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

Функции на Yandex, работещи с favicons

Търсачката Yandex е една от малкото, които подчертават favicons на сайтове и ги показват при изграждането на списък с резултати от търсенето. За целта специален бот периодично индексира сайтове и актуализира информацията за наличието на favicons.

Преди това актуализациите на favicon се случваха веднъж на всеки няколко месеца. Сега, през 2018 г., Yandex ги индексира много по-енергично и на някои от новите ми сайтове favicon се появява в рамките на няколко дни.

За да проверите дали Yandex показва favicon, можете да намерите вашия портал в списъка за търсене и да видите дали иконата се вижда отляво на него. Можете също така да въведете следната конструкция в адресната лента: за Yandex - http://favicon.yandex.net/favicon/www.site.ru (където вместо www.site.ru трябва да въведете домейна на вашия сайт ). Правилно създаден Favicon ще се покаже на черен фон и това означава, че Yandex го вижда.

Ако фавиконата не се вижда, това може да се дължи на следните причини:

• Размерът на изображението не отговаря на необходимия размер: 16x16 пиксела;
• Форматът на изображението не е същият - трябва да е ico, jpeg или png (първата опция е по-предпочитана за Yandex);
• Картината е размазана или не е уникална - понякога поради тези причини търсачката блокира иконите;
• Yandex актуализира системата - след известно време всичко трябва да се коригира;
• Сайтът се намира по-далеч от стотната позиция в резултатите от търсенето - в този случай фавиконата също може да не се показва.

След като проверите картината според тези критерии, трябва да коригирате недостатъците. Ако след това иконата не се показва, можете да се свържете с поддръжката на Yandex.

За да се показва favicon в Yandex.Direct, той трябва да бъде правилно проектиран и разположен на правилното място в сайта. След това роботът за търсене на Yandex ще го индексира и ще започне да го показва в резултатите от търсенето. Това обикновено се случва 2-4 седмици след публикуването на сайта с промените. Няма нужда да уведомявате или да молите Yandex да публикува favicon, това ще се случи автоматично след изтичане на определено време, след като се появи на портала.

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

Ако искате да създадете ico файл от голямо изображение във формат, например png, тогава би било добра идея първо да инсталирате Adobe Photoshop. След това се инсталира ICO плъгинът за Photoshop (потърсете плъгина за вашата версия на FS в търсачката). Когато е инсталиран, копираме желания файл ICOFormat.8bi (за 32-битов) или ICOFormat64.8bi (за 64-битов) в един от следните пътища:

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 бита)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats

Ако няма папка „Plug-ins“ или „File Formats“, тогава трябва да я създадете. Сега в диалоговия прозорец за запазване можете да изберете формата на ico. Размерите на създадените икони могат да бъдат кратни на 8 (16×16, 24×24, 32×32 и т.н., но най-надеждно е да изберете 16×16).

След това изображението, което трябва да стане favicon, се отваря във Photoshop. Щракнете върху „Изображение – Размер на изображението“ и размерът на изображението се променя на 16x16 пиксела. След това натиснете „Файл – Запиши като“ и изберете ICO формата (името на файла трябва да е favicon.ico).

Аз самият наскоро конвертирах изображения в ico формат без Photoshop. Използване на услугата https://realfavicongenerator.net/.

След известно време фавиконата ще се появи на сайта.

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

Yandex плаши маниаците на favicon

Когато проектирате икона, имайте предвид, че изображението трябва да бъде ясно и ясно видимо, въпреки малкия формат. Затова е по-добре да използвате възможно най-малко отделни предмети и да не използвате много цветове. Можете да разгледате фавиконите на конкурентите и да помислите как можете да се откроите от тях.

Услуги

Има и специални програми и ресурси за създаване на икони, сред които са популярни следните:

• favicon.cc - най-простият редактор ще ви позволи да създадете просто изображение, принципът на работа е малко като Paint. Цветовете също се избират и се прави рисунка, като се щракне върху пикселните квадратчета, които трябва да бъдат боядисани. Има инструмент за корекция. Създаденото изображение може също да бъде запазено на вашия компютър като готово изображение на фавикон. Докато работите, в долната част на екрана можете да видите предварителния резултат във вида, в който ще бъде показан в браузъра. Ресурсът предлага и голям избор от готови икони;
• favicon.ru – тук е по-добре да създадете favicons от готови изображения. Картината се изтегля от компютъра, обработва се от системата и се конвертира във файл favicon.ico, който след това може да бъде изтеглен;
• iconj и audit4web са бази данни, където можете да намерите готови favicons.

Има и такава услуга:

Можете да се обърнете към дизайнер за разработване на изображението, но това ще струва значително повече.

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

В днешния урок ще ви разкажа за Икони на Favicon (favicon). ще ти покажа как да направите favicon.ico за уебсайт(или за блог, няма значение) и ще ви покажа как е възможно вмъкнете favicon.

Със сигурност мнозина все още не знаят за какво „чудо“ говоря. Най-просто казано, Favicon е картина (икона), която се появява в браузъра преди адреса на сайта. Ще ви покажа Favicon на моя блог:

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

План на урока:

1. Създаване на Favicon от нулата.
2. Създаване на фавикон от готово изображение.
3. Услуги с готови икони за сайта.
4. Прикачване на получената икона към сайта.

Как да създадете Favicon от нулата

Има една много удобна услуга. Има адрес favicon.cc. Тази услуга за изграждане на favicon изглежда така:

– Да, тази услуга има и готови favicons.

Как да направите Favicon за уебсайт

След като сме създали favicon, трябва да го „прикрепим“ към сайта. За да направите това, трябва да направите следното:

Както можете да видите, всичко „падна“ правилно. Надявам се и ти да нямаш проблеми. Ако имате въпроси, моля, задайте ги на