Favicon - терминът, буквално преведен като "любима икона" - се счита за един от най-трудните елементи на съвременния уеб дизайн. Това е малко изображение, което се появява в раздела на браузъра, лентата за търсене и на други места и играе важна роля в персонализирането на вашия сайт.
Поради нестандартния формат и малкия размер, създаването на favicon може да бъде трудно, както от техническа, така и от дизайнерска гледна точка.
Осигуряването на съвместимост на фавиконата с различни браузъри е също толкова трудна задача.
В тази статия ще научите как да направите фавикона - ще дадем съвети за дизайн и услуги за създаване на фавикона и как да добавите фавикона към вашия сайт.
Какво е фавикон и защо е необходим
Въпреки факта, че фавиконът е много малък графичен обект, той е изключително важен в дизайна на сайта и като цяло.
Кликнете, за да увеличите снимката.
Първо, favicon прави вашия сайт по-персонализиран и съвместим с други графични елементи като лого.
Второ , фавиконата прави вашия сайт да се откроява от другите уеб ресурси в списъка с резултати от търсенето. Сайт без тази мини-икона ще изглежда скучен и ще загуби от конкурентите. Накратко, фавиконата е просто „задължителна“ за сайтовете.
Трето Favicon позволява на потребителя да намери вашия сайт по-бързо в директорията с отметки или други икони на работния плот.
Създаване на дизайн на фавикона
Favicon трябва да улови същността и марката в малък знак с размер на емотикон. Опростена версия на фирменото лого е добро решение, но имайте предвид, че пълноценно лого с текст и търговски марки не е подходящо за тази цел.
Тези уебсайтове използват графиката на тяхната марка (или поне нещо подобно на нея).
Не използвайте текст
Избягвайте да използвате текст, защото малкият размер на фавиконата ще направи надписите нечетими. Поставете 1, максимум 2 букви върху иконата - например първите в името на вашата компания или уеб ресурс; в този случай те все още могат да бъдат разграничени.
Пикселиране на фавиконата
Фавиконите са толкова малки, че всеки пиксел има значение. Често, когато намалите мащаба до лого в пълен размер, изображението е замъглено.
Това е фрагмент от логото на Facebook в пълен размер, след като е намален до 32x32. Лесно е да се види, че изображението "плува" около краищата. За да избегнете този дефект, трябва да направите редактиране на ниво пиксел.
Когато работя с икони, предпочитам да използвам програми за редактиране на растерни изображения (като Photoshop или Pixelmator). Първо, намалявам логото в пълен размер до 64x64 пиксела, тъй като това е най-големият фавикон, който ще ми трябва. Работата е много старателна, може да отнеме час или дори два, но резултатът е просто отличен.
Ако нямате време и умения за подобни операции, по-добре използвайте онлайн услуги като напр Logotizer.ru
Размер на фавикона
С икона 64x64 създавам 32x32, 24x24 и 16x16 пиксела по същия начин. Всеки от тях има свое предназначение:
- 64 × 64 - "Списък за четене" в Safari и Windows
- 24 × 24 - Закрепени сайтове в IE9.
- 32 × 32 - За екрани с висока разделителна способност.
- 16x16 - Обикновено се използва в браузъри като IE, Safari, Chrome и др.
Но създаването на по-малки фавикони не се ограничава до: често се изисква допълнително редактиране на ниво пиксел. Можете също да добавите алфа канал, ако сметнете за добре. Ако по-рано това създаваше трудности, сега почти всички браузъри поддържат прозрачност в фавиконите.
Формати за фавикони
По-рано, когато се поддържаха само ICO файлове на Windows, можехме да спестим време, като запазим фавикона 16x16 във формат GIF и му дадем разширението .ico. Тази техника работи безупречно! Но сега този метод вече не е необходим, тъй като инструментите за създаване на ICO файлове могат лесно да бъдат намерени в Интернет. Освен това сега и се използват за фавикони, но най-често срещаните все още са само следните две.
ICO
Дланта принадлежи към ICO формата. За разлика от PNG файловете, ICO файловете могат да имат различни разделителни способности и битови дълбочини (което е чудесно за Windows). Internet Explorer използва фавикони с различни размери (например 32-пикселови икони за лентата на задачите на Windows 7) и следователно в този случай ICO форматът е единствената опция.
PNG файловете са много удобни, защото нямате нужда от специални инструменти, за да ги създадете. Този формат поддържа алфа канала и ви позволява да създавате най-малките файлове. Може би единственият недостатък на PNG формата е, че той не се поддържа в Internet Explorer.
Има и други опции:
- GIF и анимираните GIF формати нямат никакви предимства, освен съвместимост с много стари браузъри.
- Не се препоръчва използването на JPG формат, дори ако изображението е под формата на снимка. На този формат липсва яснотата на PNG, а единственото предимство е по-плавните преходи между цветовете – нюанс, който е напълно невидим в много малко изображение.
- SVG може да бъде чудесен вариант, ако повече браузъри поддържат този формат фавикони. Междувременно има само съвместимост с Opera.
- Съществува и така нареченият "подформат" PNG - APNG (анимиран PNG), който се поддържа във Firefox и Opera. Въпреки това, осъществимостта на използването му остава под въпрос. Анимиран фавикон може да разсейва и дори дразни потребителя.
Създайте favicon онлайн - инструменти и онлайн услуги
Подбрахме за вас най-полезните услуги, които ще ви помогнат да създадете фавикона онлайн.
Логотизер
Logotizer е нова, проста и удобна услуга за създаване на фавикона и лого за вашия уеб сайт.
С този онлайн конструктор можете да създадете фавикона от нулата. Услугата е насочена към начинаещи, така че няма да е трудно да се разработи добър дизайн.
Как да създадете фавикона с онлайн генератора на логотизер
Основната работна зона е отляво. Вдясно можете да видите как ще изглежда фавиконата на различни медии – раздел на браузъра, лента на задачите на компютъра или екран на смартфон. Много удобен и интуитивен.
Първо, трябва да изберете формата за фавиконата. Те са много, повече от 50. Съветваме ви да изберете прости и неусложнени форми, за да направите фавикона лесен за разбиране и запомняне.
На този етап също така дефинирате цвета на фигурата, която става като фон на фавиконата, и избирате рамката. Вижте кой цвят доминира във вашето лого (ако има такъв), кои цветове са основните на вашия сайт. Именно в този диапазон препоръчваме да създадете дизайн на фавикона.
Под блока "Форма" има колекция от форми (символи). Не са толкова много от тях, жалко, че не можете да качите опциите си; но изборът все още е доста интересен.
Променете цвета, размера, позицията на формите! С една дума, експериментирайте, за щастие услугата ви позволява да направите това.
След като формата е избрана, можете да добавите свой собствен текст. Както писах по-рано, по-добре е да използвате 1 или 2 букви, не повече.
Има богат избор от шрифтове. Това определено е плюс. Както при формите, можете да промените цвета, размера, позицията на текста.
Ако решите, че някакъв слой фавикон временно ви пречи или изобщо не е необходим, можете просто да го скриете.
След като създаде фавикона, услугата ще предложи да го запази. Регистрирайте акаунт (през 2017 г. няма начин да се регистрирате без регистрация) и след това можете да изтегляте файлове срещу малко плащане - 199 рубли.
Сайтът съдържа и малка инструкция как да добавите фавикона към сайта, така че не би трябвало да имате проблеми с добавянето на фавикона към сайта. Подобни препоръки са предоставени и по-нататък в тази статия.
След плащане, потребителят веднага получава 10 фавикона с различни размери за всички необходими днес устройства (икона на Apple touch, икони на Microsoft Application и други).
Самият файл favicon.ico е многоразмерен и съдържа икони с 4 размера в 1 файл (16px, 24px, 32px, 64px). Съответно, ако добавите сайт към отметките на браузъра си или отворите история, можете да видите икони с различни размери, но те ще се показват ясно и без размазване.
Като цяло обслужването е добро. Просто, удобно, нищо повече.
RealFaviconGenerator.net
Това е по-прост генератор на фавикони, който ви позволява да създавате фавикони за всяка платформа. Освен това можете да тествате фавиконата на ресурса. Въведете URL адреса на вашия уебсайт и ще видите как изглежда вашата фавикона във всеки браузър и всяка операционна система. Real Favicon Generator също ще ви покаже как да коригирате недостатъците и да направите своя фавикон още по-добър.
Favicon.by
Favicon.byТова е друг безплатен и лесен за използване генератор на фавикони, който преобразува PNG, JPG и GIF файлове във формат .ico. Качете изображение от вашия компютър, изберете размер (16x16px или 32x32px) и щракнете върху бутона "Създаване". За да запазите получената фавикона на вашия сайт, следвайте инструкциите.
Услугата също така дава възможност за рисуване на лого пиксел по пиксел, но, честно казано, не всеки може да го направи. Аз например не можах. Ето че съм толкова крив :)
Как да добавите фавикона към вашия сайт
Можете да добавите фавикона към вашия сайт, като направите няколко редакции в HTML кода на страницата на сайта.
Стъпка 1: Качете файла „favicon.ico“ на вашия хостинг сървър.
За да направите това, отидете на вашия FTP сървър, като използвате тази връзка:
ftp: // [защитен с имейл]
Въведете вашето потребителско име и парола. Те могат да бъдат получени от административния панел на вашата хостинг компания.
Качете фавикон файловете в главната директория. Основната директория обикновено се нарича "public_html" или "www".
Стъпка 2: Добавете фавикона към HTML.
С отворен прозорец на FTP сървъра, изтеглете файла “index.html” или “header.php”.
След това трябва да изтеглите кода. Кодът за изтегляне зависи от вашия уебсайт.
Ако вашият сайт е HTML, намерете областта HEAD във вашия файл index.html и поставете следния код:
Ако вашият сайт е WordPress, намерете областта HEAD във вашия header.php файл и поставете следния код:
/favicon.ico "/>
Браузърите могат да използват тези кодове, за да намерят вашите фавикони.
И така, инсталирахте вашата favicon!
Как да добавите фавикона към WordPress и други платформи
Ако вашият ресурс е базиран на WordPress или друг CMS, тогава добавянето на фавикона към вашия сайт е много лесно. Като цяло алгоритъмът за добавяне на фавикона ще бъде един и същ за различните платформи.
1. Трябва да отидете на конзолата на сайта.
2. Намерете секцията "Дизайн" или "Външен вид".
3. Отидете в секцията „Настройки на темата“ и намерете там „Favicon“.
4. Изтеглете фавиконата от вашия компютър.
5. Запазете и опреснете страницата.
Как да създадете по-сложни фавикони
Тази статия обхваща прости и бързи начини за създаване на фавикони, които са съвместими с почти всеки браузър и операционна система. Но когато става въпрос за уеб дизайн и разработка, няма граници за съвършенство. Ако искате да научите как да правите по-сложни фавикони, икони за докосване за начални екрани на iOS, икони за интерфейса на Metro на Windows, икони за Google TV и други, препоръчвам ви да се запознаете с тези материали: фавикон cheat sheet... Той съдържа пълна информация по темата и предоставя добри източници. Това е чудесен вариант за онези дизайнери и разработчици (включително и аз), които постоянно се стремят да разширят знанията си.
С Favico.js можете да създавате динамични цифрови фавикони.
Може да се нуждаете и от динамична фавикона, която има икона с променящ се номер. За да създадете такива фавикони, ви съветвам да използвате услугата favico.jsдостъпно на Github. Докато динамичните фавикони не са съвместими с всички браузъри. Но за тези браузъри, които ги поддържат, тези икони могат да бъдат интересно и полезно допълнение.
Ако искате да актуализирате тази статия с друг съвет или да зададете въпрос, оставете коментари по-долу!
Как да създадете фавикона за уебсайт - съвети и услугиактуализирано: 7 февруари 2018 г. от автора: админ
Здравейте скъпи приятели! Днес ще пиша за това как да си направя фавикона за уебсайт или блог. Освен това ще разгледам 2 начина за създаване на фавикона. Ще научите как да направите икона на фавикона във Photoshop и с помощта на онлайн услуга ;-).
Преди да продължите да четете тази статия, също ви съветвам да се запознаете с други полезни публикации, които ще подобрят вашия ресурс: "",?"," ".
Сега да се върнем към темата на публикацията. Ако сайтът няма фавикона, значи губи много. Първо, фавиконата може да увеличи трафика от Yandex. Попитайте как? Много просто. Факт е, че Yandex, до заглавието на заглавието, показва и фавиконата на сайта. И ако заглавията и описанията на два ресурса са приблизително еднакви, но единият ще има фавикона, а другият няма, тогава посетителят най-вероятно ще отиде до ресурса с фавикона.
Е, и второ, такава малка икона е в състояние да различи вашия ресурс от другите. Следователно фавиконата трябва да бъде ярка и запомняща се. Нека го опитаме така и да го създадем.
Как да направите фавикона за уебсайт от нулата
За да създам фавикона, ще използвам услугата. Той е много лесен за използване. Първо, трябва да посочите цвета, който ще използвате, когато създавате своя фавикон. За да направите това, задайте нюанса и наситеността.
След като сте избрали цвят, започваме да рисуваме фавиконата. Ако сте нарисували нещо неправилно, то може да бъде изтрито. За да направите това, поставете отметка в квадратчето до прозрачния инструмент.
Така че направих такъв фавикон за няколко минути ;-).
В долната част има визуализация и винаги можете да видите какво получавате. След като нарисувате фавиконата, ще трябва да я изтеглите на компютъра си. За да направите това, просто кликнете върху бутона "изтегляне на фавикона".
Как да си направим фавикона за уеб сайт от готово изображение
Можете да направите фавикона от всяко изображение. Това може да е вашата снимка, лого на уебсайт или нещо друго. За да направите това, трябва да отворите програмата Photoshop и да качите там изображението, което искате да преобразувате в фавиконата. Щракнете върху "Файл" - "Отваряне".
След това трябва да изрежете изображението, така че да стане квадратно. За да направя това, избирам инструмента за изрязване, очертавам частта, която искам да запазя, и натискам Enter.
След това трябва да намалите изображенията до 16 px. За да направите това, изберете от лентата с инструменти Изображения - Размер на изображението.
Задайте ширината и височината на 16 px и щракнете върху "OK".
Ако знаете как да използвате програмата Photoshop, можете лесно да направите фавикона за сайт с нула. За да направите това, създайте нов файл с ширина и височина 16 px, след това нарисувайте всичко там и запазете този файл в iso формат.
В Интернет също има много услуги, където можете да изтеглите фавикона за вашия сайт. Ето най-популярните от тях:
- www.audit4web.ru/info/favicon
- www.favicon.cc – вече позната услуга
- www.iconj.com
- www.favicon.co.uk/gallery.php
- thefavicongallery.com
- favicon-gallery.ru/gallery
Как да направите фавикона за wordpress
След като сте направили или изтеглили фавиконата, трябва по някакъв начин да я прецакате в сайта. Сега ще ви покажа как да направите това на wordpress двигателя.
Първо, трябва да качите икона на хоста на този адрес: wp-content / теми / имена на теми / изображения /
След това отидете на Контролен панел - Външен вид - Редактор, отворете файла header.php и добавете следния код там, преди тага "/ head":
В този код трябва да промените:
- сайт - въведете вашия домейн;
- BusinessBlog - въведете имената на вашата тема;
- favicon.ico - въведете името на вашата икона, която сте качили на хостинга.
Сега запазете промените си и вижте какво получавате:
Може да се окаже, че след актуализиране на сайта няма да видите никакви промени. Това се дължи на факта, че браузърът зарежда вашия сайт не от сървъра, а от кеша. Следователно, имате нужда.
И ако имате плъгин за кеширане на вашия сайт, например Super Cache, изтрийте кеша и там.
След това обновете страницата отново и проверете за фавикони. Сега определено трябва да се появи, ако сте регистрирали правилно пътя до него на хостинга.
Да, и още нещо. Yandex няма да покаже иконата в резултатите от търсенето веднага. Трябва да изчакате малко роботът да индексира отново вашия сайт.
Е, сега всичко това се отнася до въпроса как да направите фавикона ико за сайта. Сбогом на всички.
Онлайн редакторите на икони не се приемат сериозно от мнозина, но всъщност такива инструменти значително улесняват работния процес. Само с няколко щраквания могат да ви спестят часове търсене, прегледи или саморазвитие. Освен това няма смисъл да се използват пълноценни, когато има специални услуги с изострени функции за тези специфични задачи.
Сайтове за редактиране на икони като тези са много ефективни. Те ви позволяват да:
- лесно и бързо създаване на нови материали;
- да придаде завършен вид на съществуващите разработки;
- запишете резултата в различни формати (SVG, ICO & PNG);
- създаване на икони за.
В тази статия избрахме пет от най-добрите онлайн безплатни редактори на икони и се опитахме да създадем набор във всеки от тях за сравнение.
IconsFlow
IconsFlow.com - векторни икони + редактор, който ви позволява да създавате персонализирани набори и да ги експортирате с високо качество (SVG, ICO & PNG). Основното предимство на услугата е наличието на два редактора:
- основният, в който се избират палитрата, стилът, ефектите;
- редактор на формуляри, където можете да промените текущата форма или да нарисувате нова.
Ако вече сте създали икони в Illustrator, просто заредете SVG файловете и експериментирайте с различни фонове. IconsFlow има определени ограничения, когато става въпрос за безплатна употреба, така че не забравяйте да ги проверите, преди да започнете. За начинаещи потребители има уроци и раздел за помощ, освен това има възможност за работа в редактора на икони на руски език.
Изглед на векторен редактор на IconsFlow:
Примери за работа:
Плоски икони
С FlatIcons.net можете да създадете своя собствена плоска икона (плосък стил) на базата на готови шаблони. Задайте размерите, изберете картината и основния фон (кръгове, пръстени, правоъгълници), променете цвета. Този редактор на икони е безплатен, но има два недостатъка:
- Първо, можете да изтегляте само PNG файлове.
- Второ, трябва да създадете всеки обект поотделно, т.к невъзможно е да се разработи цял набор наведнъж.
Въпреки факта, че пикът на популярност вече е отминал, много хора ги използват в своите дизайни. Като пример, разработчиците ви позволяват да изтеглите безплатен набор от социални плоски икони. Резултатът от работата в редактора FlatIcons:
Генератор на икони за стартиране
Проектът Launcher Icon Generator е безплатен и смятаме, че е по-подходящ за напреднали потребители. Този онлайн редактор на икони ви позволява да качвате изображения / клипарт и да добавяте текст. Можете да изтеглите една по една икона в 5 размера (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
Набор от графики на Material Design от GitHub се използва като основен клип арт. Услугата съдържа такива настройки като: отстъпи, форма, цвят на фона или прозрачност, мащабиране + допълнителни ефекти. Резултат:
Android Material Icon Generator е друг инструмент за създаване на плоски икони. Особеността на услугата определено е ефектът на дългата сянка. Ако имате нужда от такива решения, този редактор на икони ще бъде идеалната опция.
Започнете, като изберете снимка от галерията, след това определете цвета, формата на фона (кръг или квадрат), дължината на сянката, наситеността, избледняването - и вашата икона е готова. Всичко е изключително просто. За лична употреба, сайтът е напълно безплатен.
След изтегляне в архивния файл ще намерите 6 PNG с различни размери и векторен SVG файл. В Illustrator иконата на SVG ще бъде замъглена, но за щастие изглежда добре в браузъра. В крайна сметка получавате нещо като:
Сайтът Simunity е генератор, базиран на HTML5, където можете да създадете икона и след това да копирате кода, за да го покажете във вашите уеб проекти. Като изходни материали се използват икони от Font Awesome, за които се избират различни параметри: цвят, рамка, размер и стил на сенките.
Тази услуга е полезна, ако трябва бързо да създадете прости оригинални икони за вашия уебсайт. Резултатът от използването на Simunity:
Обща сума. Обсъдените по-горе онлайн редактори на икони са отлични инструменти за оптимизиране на работата на дизайнерите. Няма смисъл да изтегляте каквито и да е програми, когато всичко може да се направи лесно и бързо в мрежата. От тази колекция може би можем да подчертаем IconsFlow. Той съдържа възможно най-много функции: галерия с икони, качване на SVG, вграждане на код, визуализация, създаване на свои собствени шаблони, PNG, ICO и SVG експорт, преоразмеряване, модерни стилове и вграден векторен редактор. Освен това, това е единственият безплатен редактор на икони на руски език, ако това е важно за вас.
Ако знаете други подобни услуги, изпратете вашите опции в коментарите.
В този урок се разглежда създаването на Favicon, ще разберете за какво е тази икона и ще получите препоръки как да подобрите външния й вид и привлекателност.
Освен това ще разгледаме процеса на създаване и добавяне на фавикона за сайта.
Favicon- това е малка икона, която можете да видите в адресната лента на браузъра и в разделите на отворените страници, както и при добавяне на сайт към отметките на браузъра, тази икона също се добавя там.
Освен това търсачката на Yandex показва иконата Favicon в резултатите от търсенето до вашия сайт. Вашата задача е да накарате тази икона да се откроява, да се запомни, да хване окото на фона на други икони в резултатите от търсенето и също така да има някои асоциации с вашия сайт. Красиво проектирана и привличаща вниманието Favicon икона може значително да увеличи броя на посещенията на вашия сайт в сравнение с тези, които нямат инсталиран или изглеждат непривлекателни.
Ето някои насоки, които трябва да имате предвид, когато създавате Favicon.
#1. Значката трябва да е лесно разпознаваема и да има асоциации с вашия сайт или нишата, към която принадлежи вашият сайт. Като икона можете да използвате лого или символ, който е свързан с вашия сайт. Освен това можете да използвате цветовата схема, в която е създаден вашият уебсайт или лого.
#2. Не използвайте стандартни икони. Много, след като създадат сайт на определен CMS, оставят иконата, нищо, без да променят. В резултат на това резултатите от търсачката може да съдържат не един сайт с такава икона, а много. Това ще направи вашия сайт изпъкнал, така че използвайте само уникалните икони на Favicon, създадени специално за вашия сайт. Това включва и ситуацията, когато се използват икони от различни колекции или интерфейсни елементи на други сайтове. Не забравяйте, че имате нужда от уникална фавикона, за да се откроите.
#3. Опитайте се да използвате по-ярки и светли цветове, когато създавате вашата икона, като правило те привличат повече внимание.
#4. Не използвайте анимирани икони. Първо, анимацията не се поддържа от всички браузъри, и второ, вниманието на посетителя трябва да бъде фокусирано върху съдържанието, а не върху иконата.
Сега нека разгледаме директно процеса на създаване на Favicon. Има много услуги за това. Те обаче са по-подходящи за тези, които вече имат готова икона, която са изтръгнали някъде или са взели от някаква колекция. Но както казах по-горе, иконата трябва да е уникална, така че тук ще разгледам процеса на създаването й с помощта на Photoshop, като използвам примера на сайта на сайта.
Създайте предварително зададена фавикона във Photoshop
#1. Създайте нов документ във Photoshop, размер 64 * 64px, за това отидете в менюто "Файл" >> "Ново..." или натиснете клавишната комбинация Ctrl + N. По принцип самата икона трябва да бъде 16 * 16px, но е по-добре първо да я създадете със същия размер и след това да я намалите до необходимия размер.
#2. В моя случай нямам никакво лого за сайта, затова реших да използвам символа "W", с който започва адреса на сайта, както и цветовете, които преобладават в горната част на сайта са синьо и жълто. Затова зададох стойността на цвета на # 6A91D0 и с помощта на инструмента за запълване (G) зададох предварително създадения документ на син.
#3. След това избрах Type Tool (T) и добавих W и му дадох следната стойност на цвета # FAC31D.
За да накарам символа да се откроява по-силно на синия фон, добавих 2 пиксела черен контур към него. За да направите това, отидете на елемента от менюто Слой >> Стил на слоя >> Строк, изберете цвят и размер за щриха.
След това трябва да обедините слоевете, за това трябва да отидете в елемента от менюто Слой >> Обединяване видимоили натиснете клавишната комбинация Shift + Ctrl + E.
За да направя линиите гладки без засечки, добавих размазване. За да направите това, отидете на елемента от менюто "Филтър" >> "Размазване" >> "Размазване по Гаус ..."и задайте радиуса на 0,3 пиксела.
Поставете вашия символ или изображение така, че да заема възможно най-много място, защото ако е малък, тогава няма да се забележи с размер на иконата 16 * 16.
#4. Сега трябва да преоразмерите иконата. За да направите това, отидете в менюто Изображение >> Размер на изображениетои задайте размера на 16 * 16px.
#5. Остава да запазите иконата. Favicon трябва да има името favicon и разширението .ico. Факт е, че по подразбиране Photoshop не записва изображения във формат .ico. Следователно, запазете го във формат .png, за това отидете на елемента от менюто "Файл" >> "Запазване като ..." и изберете PNG от падащия списък.
Преобразуване на изображение във формат .ICO
След това го преобразуваме във формат .ico с помощта на услугата. Отидете на тази услуга и използвайте бутона "Преглед", за да изберете предварително запазения PNG файл и след това щракнете върху бутона "Създаване на favicon.ico".
След това на заредената страница ще се появи връзката "Изтеглете favicon.ico!". като щракнете върху която можете да запазите готовата икона на Favicon на вашия компютър.
Сега е време да добавите Favicon към вашия сайт, така че да се показва на всичките му страници. За да направите това, поставете иконата в главната папка на вашия сайт. Ако вашият сайт вече е хостван, тази папка обикновено се нарича "public_html". След това във всяка страница на вашия сайт, преди затварящия маркердобавете следните редове:
Но тези редове трябва да се добавят към всяка страница, ако имате HTML сайт. Но тъй като най-вероятно вашият сайт е създаден на базата на някакъв CMS, тогава ще бъде достатъчно да добавите тези редове към основния файл на вашата тема, който използвате за сайта.
Ако използвате WordPress, отидете на wp-content / themes / folder-with-your-theme / намерете в него и отворете файла header.php, след което поставете необходимите редове и запазете файла.
Ако използвате Joomla, отидете на шаблоните / folder-with-your-theme / и отворете файла index.php, поставете необходимите редове и запазете.
Някои теми в WordPress и Joomla може вече да имат свои собствени пътища към файла favicon.ico, в този случай ги изтрийте и ги заменете със свои собствени.
Ако използвате друга CMS, направете всичко по аналогия.
В разделите на страницата и в адресната лента на браузъра вашата икона ще се покаже незабавно, като за резултатите от търсенето в Yandex, тук е необходимо време, за да намери специален робот за търсене на Yandex вашата икона, след което тя ще се появи в търсенето резултати.
Материал, подготвен по проекта:
Неразделна част от съвременните уебсайтове е Favicon, който ви позволява бързо да идентифицирате конкретен ресурс в списъка с раздели на браузъра. Също така е трудно да си представим компютърна програма без собствен уникален етикет. В същото време сайтовете и софтуерът в този случай са обединени от не съвсем очевиден детайл - и двамата използват икони във формат ICO.
Тези малки изображения могат да бъдат създадени както със специални програми, така и с помощта на онлайн услуги. Между другото, именно последните са много по-популярни за такива цели и ние ще разгледаме редица такива ресурси с вас в тази статия.
Графиката не е най-популярната категория уеб услуги, но когато става въпрос за генериране на икони, определено има от какво да избирате. Според принципа на работа такива ресурси могат да бъдат разделени на тези, в които сами рисувате картина, и сайтове, които ви позволяват да конвертирате вече готово изображение в ICO. Но по принцип всички генератори на икони предлагат и двете.
Метод 1: X-Icon Editor
Тази услуга е най-функционалното решение за създаване на ICO изображения. Уеб приложението ви позволява ръчно да нарисувате иконата в детайли или да използвате готово изображение. Основното предимство на инструмента е възможността за експортиране на изображения с резолюция до 64x64.
Така че, ако трябва да създадете цял набор от един и същи тип икони с различни размери, няма да намерите нищо по-добро от X-Icon Editor за тези цели.
Метод 2: Favicon.ru
Ако трябва да генерирате фавикона 16x16 за уебсайт, рускоезичната онлайн услуга Favicon.ru също може да бъде отличен инструмент. Както в случая с предишното решение, тук можете или сами да нарисувате икона, като оцветявате всеки пиксел поотделно, или да създадете фавикона от готова картина.
В резултат на това на вашия компютър се записва файл с разширение ICO, което е изображение с размери 16 × 16 пиксела. Услугата е идеална за тези, които просто трябва да преобразуват изображение в малка икона. Въпреки това, изобщо не е забранено да се показва въображение във Favicon.ru.
Метод 3: Favicon.cc
Подобен на предишния както по име, така и по принцип на действие, но още по-усъвършенстван генератор на икони. В допълнение към създаването на обикновени изображения 16x16, услугата улеснява рисуването на анимиран favicon.ico за вашия уебсайт. Освен това ресурсът съдържа хиляди персонализирани икони, достъпни за безплатно изтегляне.
Ако англоезичният интерфейс не ви притеснява, тогава няма абсолютно никакви аргументи в полза на работата с предишната услуга. В допълнение към факта, че Favicon.cc може да генерира анимирани икони, ресурсът също така правилно разпознава прозрачността в импортираните изображения, от която, за съжаление, е лишен рускоезичният аналог.
Метод 4: Favicon.by
Друга версия на генератора на фавикони за уебсайтове. Възможно е да създадете икона от нулата или въз основа на конкретно изображение. Сред разликите може да се отдели функцията за импортиране на изображения от уеб ресурси на трети страни и доста стилен, сбит интерфейс.
Като цяло няма разлики в работата с услугите, които вече бяха обсъдени в тази статия, но ресурсът Favicon.by се справя много по-добре с конвертирането на изображения в ICO и това е доста лесно да се забележи.
Метод 5: Онлайн конвертиране
Вероятно вече познавате този сайт като почти всеяден онлайн конвертор на файлове. Но не всеки знае, че това е един от най-добрите инструменти за конвертиране на всяко изображение в ICO. На изхода можете да получите икони с разделителна способност до 256 × 256 пиксела.
Както можете да видите, създаването на ICO икона с помощта на уебсайта Online-Convert изобщо не е трудно и това се прави само с няколко щраквания на мишката.
