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

Имало едно време фавиконите можеха да се създават само във формат .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 фавиконата не е адаптирана за мобилни устройства, така че се използва първата буква на домейна.

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

Икона за 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 - терминът буквално се превежда като "любима икона" - се счита за един от най-сложните елементи на съвременния уеб дизайн. Това е малко изображение, което се намира в раздела на браузъра, в лента за търсенеи други места и играе важна роля в персонализирането на сайта.

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

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

Какво е фавикон и защо е необходим?

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

Кликнете, за да увеличите снимката.

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

Второ , 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 и др.

Но създаването на по-малки favicons не спира дотук: често е необходимо допълнително редактиране на ниво пиксел. Можете също да добавите алфа канал, ако сметнете за добре. Ако преди това създаваше затруднения, сега почти всички браузъри поддържат прозрачност във фавиконите.

Формати на фавикони

Преди, когато се поддържаха само файлове Windows формат ICO, бихме могли да спестим време, като запазим favicon 16x16 като GIF и му дадем разширението .ico. Тази техника работи безупречно! Но сега този метод не е необходим, тъй като инструменти за създаване на ICO файлове могат лесно да бъдат намерени в Интернет. Освен това и сега се използват за фавикони, но най-често срещаните все още са само следните две.

ICO

Дланта принадлежи на ICO формата. За разлика от PNG файловете, ICO файловете могат да идват в различни разделителни способности и битови дълбочини (което е чудесно за Windows). Internet Explorer използва favicons различни размери(например икони от 32 пиксела за панела Windows задачи 7), и следователно в този случай ICO форматът е единствената опция.

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

Има и други опции:

– GIF и анимираните GIF формати нямат никакви предимства освен съвместимостта с много стари браузъри.
– JPG формат не се препоръчва, дори ако изображението е под формата на снимка. На този формат липсва яснотата на PNG и единственото му предимство е по-плавните преходи между цветовете - нюанс, който е напълно незабележим в много малко изображение.
– SVG може да стане отличен вариантСамо ако повече браузъри поддържат favicons в този формат. Засега има само съвместимост с Opera.
– Има и така наречения „подформат“ на PNG – APNG (анимиран PNG), който се поддържа от Firefox и Opera. Въпреки това, осъществимостта на използването му остава под въпрос. Анимирани фавикони могат да разсейват и дори дразнят потребителя.

Създайте онлайн favicon – инструменти и онлайн услуги

Избрахме за вас най-полезните услуги, които ще ви помогнат да създадете онлайн favicon.

Логотизер

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

Как да създадете фавикон с помощта на онлайн генераторЛоготизер

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

Първо, трябва да изберете форма за favicon. Има много от тях, повече от 50. Съветваме ви да изберете прости и неусложнени форми, за да направите favicon лесен за възприемане и запомняне.

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

Под блока „Форма“ има колекция от форми (символи). Няма много от тях, жалко е, че не можете да качите свои собствени опции; но изборът все още е доста интересен.

Променете цвета, размера, местоположението на фигурите! С една дума, експериментирайте, за щастие услугата ви позволява да направите това.

След като формата е избрана, можете да добавите свой собствен текст. Както писах по-рано, по-добре е да използвате 1 или 2 букви, не повече.

Има богат избор от шрифтове. Това определено е плюс. Както при формите, можете да промените цвета, размера и разположението на текста.

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

След като създаде фавикон, услугата ще предложи да го запази. Регистрирайте акаунт (през 2017 г. няма начин без регистрация) и след това можете да изтегляте файлове срещу малко плащане - 199 рубли.

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

След плащане, потребителят веднага получава 10 favicons с различни размери за всички устройства, необходими днес (икона на Apple touch, икони на приложения на Microsoft и други).

Самият файл favicon.ico е многоразмерен и съдържа икони с 4 размера в 1 файл (16px, 24px, 32px, 64px). Съответно, ако добавите сайта към отметките на браузъра си или отворите хронологията, ще можете да видите иконите различни размери, но те ще се показват ясно и без замъгляване.

Като цяло обслужването е добро. Просто, удобно, нищо излишно.

RealFaviconGenerator.net

е по-прост генератор на фавикони, който ви позволява да създавате фавикони за всяка платформа. Освен това можете да тествате favicon на ресурса. Въведете URL адреса на сайта си и ще видите как изглежда иконата ви във всеки браузър и всеки операционна система. Real Favicon Generator също ще ви каже как да поправите недостатъците и да направите своя favicon още по-добър.

Favicon.by

Favicon.byе друг безплатен и лесен за използване генератор на favicon, който конвертира PNG, JPG и GIF файлове във формат .ico. Качете изображение от вашия компютър, изберете размер (16x16px или 32x32px) и щракнете върху бутона „Създаване“. За да запазите получения favicon на уебсайта си, следвайте инструкциите.

Услугата също така дава възможност да рисувате лого пиксел по пиксел, но, честно казано, не всеки може да направи това. Аз например не можах. Ето колко съм крив :)

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

Можете да добавите фавикон към вашия сайт, като направите няколко промени в 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" />

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

Как да добавите Favicon в WordPress и други платформи

Ако вашият ресурс е базиран на WordPress или друга CMS, тогава добавянето на favicon към сайта е много лесно. Като цяло алгоритъмът за добавяне на фавикон за различни платформи ще бъде един и същ.
1. Трябва да отидете на конзолата на сайта.
2. Намерете секцията „Дизайн“ или „Външен вид“.

3. Отидете в секцията „Настройки на темата“ и намерете там „Favicon“.

4. Качете favicon от вашия компютър.

5. Запазете и обновете страницата.

Как да създадете по-сложни фавикони

Тази статия обсъжда прости и бързи начини за създаване на favicons, които са съвместими с почти всеки браузър и операционна система. Но когато става въпрос за уеб дизайн и разработка, небето е границата. Ако искате да научите как да правите по-сложни favicons, сензорни икони за началните екрани на iOS, икони за Metro интерфейса в Windows, икони за Google TV и много повече, препоръчвам ви да разгледате тези материали: фавикон измамен лист. Съдържа пълна информация по темата и предоставя добри източници. Това е страхотна възможност за онези дизайнери и разработчици (включително и аз), които постоянно търсят да разширят познанията си.

С Favico.js можете да създавате динамични favicons с числа.

Може да се нуждаете и от динамична фавикона, която има икона с променящ се номер. За да създадете такива favicons, препоръчвам да използвате услугата favico.js, наличен в Github. Динамичните favicons все още не са съвместими с всички браузъри. Но за онези браузъри, които ги поддържат, тези икони могат да бъдат интересно и полезно допълнение.

Ако искате да добавите друг съвет към тази статия или имате въпрос, моля, оставете коментар по-долу!

Здравейте, скъпи читатели на сайта на блога. Разговорът в днешната статия ще бъде за така наречените икони Favicon.ico. Ще разберем какво е favicon, защо трябва да го инсталирате на уебсайта си и как сами да създадете икона с необходимия размер.

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

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

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

Как да създадете Favicon онлайн и къде можете да изтеглите колекция от тях

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

1. Faviсon.cc— доста удобен онлайн генератор на favicon. Използвайки го, можете например да създадете своя собствена икона от нулата (напълно изключителна), като я рисувате пиксел по пиксел. За да направите това, ще трябва да кликнете върху бутона „Създаване на нов Favcon“ от лявата страна на прозореца на услугата.

   

   В центъра на страницата на генератора има област, където всеки квадрат е пиксел от вашата бъдеща фавикона. Вашата задача е да боядисате тези квадрати с различни цветове. За да оцветите един квадрат с цвят, трябва да поставите отметка в квадратчето от дясната страна на сервизния прозорец в полето „Избор на цвят“, да изберете желания цвят от намиращата се там палитра и да кликнете върху желания квадрат. За да премахнете неправилно оцветяване, поставете отметка в квадратчето „прозрачен“ и щракнете върху квадрата, в резултат на което той ще стане безцветен (прозрачен).

   За да преместите пиксел през платното на генератора, ще трябва да поставите отметка в квадратчето „преместване“. Можете да видите резултата от работата си в реален мащаб в областта „Преглед“ под платното. Ако Favicon, който сте създали, ви подхожда, щракнете върху бутона „Изтегляне“, за да го запишете на вашия компютър. В резултат на това ще получите графичен файл, който след това можете да изтеглите и качите на хостинг сървъра.

   Сега знаете как да направите мини лого за вашия уебсайт от нулата. Но ако нямате графични таланти, тогава можете да използвате услугата за онлайн генератор качете всяко изображение за бъдещия favicon, който ще служи като заготовка. Картината може да бъде абсолютно всякакъв размер и формат. За да качите файла с иконата в онлайн услугата, ще трябва да кликнете върху бутона „Импортиране на изображение“ от лявата страна на прозореца на услугата.

   

   В прозореца, който се отваря, щракнете върху бутона „Преглед“ и намерете подходящо изображение на вашия компютър. След това изберете какво да правите със съотношението на картината, когато я конвертирате в 16 на 16 (квадрат). Това е вярно, ако изображението, което качвате, не е квадратно. В този случай са възможни две опции: оставете съотношението непроменено (Запазете размерите) или преобразувайте изображението в квадратен изглед (икона Свиване до квадрат). Във втория случай изображението на бъдещия favicon ще бъде изкривено по една от осите.

   За да качите в онлайн генератора и да конвертирате вашето изображение, ще трябва да кликнете върху бутона „Качване“. Favicon.ico, създаден от него, ще може да се редактира по същия начин като този, който сте нарисували. Когато приключите работата по вашия шедьовър, щракнете върху бутона „Изтегляне“, за да го изтеглите на вашия компютър.

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

2. Favicon.ru- някога тази услуга беше много по-проста от описания по-горе онлайн генератор, но напоследък стана почти негов аналог, но само на руски език. Favicon.ru ви позволява не само да конвертирате всяко изображение, което имате (на вашия компютър или в интернет) в ICO формат с размер 16 на 16 пиксела, но също така ви позволява да го нарисувате от нулата, пиксел по пиксел.

   

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

3. Logaster.ruе онлайн генератор на лога, но освен лога, създава и фавикон. За разлика от всички други услуги, не е необходимо да рисувате дизайн на фавикон или да го конвертирате от лого.

   

   За да създадете фавикон, първо трябва да въведете името на сайта или фирмата и да изберете вида дейност. Услугата ще предлага няколко десетки готови за използване шаблони за фавикони. Можете да прочетете повече за това как да създадете фавикон. След като създадете Favicon.ico, можете да изтеглите файла на вашия компютър в ICO или PNG формат.

След това всичко, което трябва да направите, е да кликнете върху бутона „Създаване“. На страницата, която се отваря, ще видите връзка за изтегляне на получения фавикон.

Селекция от онлайн генератори, колекции и галерии от фавикони

Ако по някаква причина не сте харесали генератора на favicon, описан по-горе, тогава мога да ви предложа да опитате късмета си в един от следните безплатни онлайн услуги:

1. FaviconGenerator - позволява ви да конвертирате всяко изображение, изтеглено от вашия компютър, в желания формат на favicon (можете да качвате снимки).
2. AntiFavicon е доста интересен генератор на Favicon. На него можете създайте фавикон с надпис. Ще трябва да въведете текста на надписа в полетата „Текст отгоре“ и „Текст отдолу“ и да коригирате цветовата схема в областта „Цветове“.
3. FavIcon от Pics е друга проста онлайн услуга - посочвате пътя до картината на вашия компютър, конвертирате и изтегляте получения файл в ICO и GIF формат.
4. Iconj - забележителното е, че можете или да изтеглите създадената икона, или да я оставите в услугата и да получите връзка към този файл
5. DeGraeve е доста мощен Favicon Generator, подобен по функционалност на прегледания преди това Favicon.cc. Тук също можете да направите всичко или от нулата, или да качите изображение, което по-късно да бъде коригирано и изтеглено в ICO формат с подходящ размер.
6. Генератор - позволява ви както да генерирате favicon от качено изображение, така и да го създадете от нулата в специален редактор.
7. Онлайн редактор на икони favicon.ico – добре, той донякъде прави всичко – създаване на фавикони от нулата и модифициране на съществуващо изображение.
8. Онлайн Favicon е много функционален инструмент за създаване и редактиране на мини лога
9. Безплатен генератор на Favicon - в случай, че нищо от горния списък не ви подхожда.
10. Генератор на Favicon - просто и с вкус...

Ако не ви е грижа за ексклузивността на вашето мини-лого за сайта и не можете да се занимавате с редактори и генератори, тогава можете да изберете подходяща икона за себе си на сайтове, където те са стотинка дузина. В края на краищата, всъщност, абсолютно всяка икона с размери 16 на 16 пиксела, която можете да изтеглите от интернет или да намерите в дълбините на вашия компютър, ще ни подхожда.

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

Ако нямате желание или възможност (не сте художник и никога не сте били), тогава най-лесният начин би бил да опитате да търсите в галерии с колекции от безплатни favicons:

1. Iconj е доста голяма колекция от икони, проектирани от други хора и предоставени на обществеността
2. Favicon.cc - 55 хиляди различни опции за всички случаи. Има и анимирани favicons, които ще се виждат само в браузъра FireFox.
3. Галерията Favicon - още няколко икони, които отговарят на размера

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

Как да инсталирате Favicon на уебсайт и да посочите пътя до него

Вашият браузър и роботът за търсене на Yandex ще потърсете favicon предимно в основната папка на вашия сайт. Затова можете просто да се свържете със сайта чрез FTP и да качите вашия файл Favicon.ico в основната му директория (обикновено папките public_htm или htdocs) (по-добре е да напишете името му с малки букви). Сега отворете ресурса си в някой браузър и вижте дали иконата в раздела се е променила. Променил ли се е? не? Е, всичко е наред.

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

Отворете изходния код на всяка страница от вашия сайт. За да видите нейния изходен код, просто щракнете с десния бутон върху страницата и изберете съответния елемент от контекстното меню (например „Изходен код“ в старата Opera или „Изходен код на страница“ в Mazila Firefox или „Преглед на кода на страница“ в Google Chrome или „Преглед на HTML кода“ в IE) или натиснете клавишната комбинация Ctrl+U. Сега погледнете в горната част на кода на страницата за ред, който указва пътя до favicon.ico.

Може да изглежда така:

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

IN Joomla Favicon обикновено се намира в папката с шаблона, който използвате (пътят до него в Joomla 1.5 беше записан във файла index.php от директорията на същия шаблон, но в Joomla 3 всичко стана малко по-сложно). Тези. За да промените favicon в Joomla, всичко, което трябва да направите, е да следвате този път и да качите файла favicon.ico там и да отговорите положително на въпроса за замяната:

/templates/folder_with_the_design_template/favicon.ico

Favicon файл в WordPressпо подразбиране може да е и в папката с темата, която използвате (пътят до нея също е зададен там):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

Като цяло, ако искате задайте или променете пътя до вашата фавиконка, който ще бъде разбран както от браузърите, така и от робота за търсене на Yandex, тогава ще трябва да го напишете в съответния шаблонен файл за Joomla, WordPress или друг двигател, между отварящия и затварящия тагове ГЛАВА, следните редове код:

В кой шаблонен файл трябва да бъдат записани тези редове зависи от двигателя на вашия сайт. Например в в WordPressтрябва да отворите файла header.php за редактиране: wp-content/themes/Folder_with_your_theme_design. Отворете header.php в редактора и в самото начало намерете отварящия Html HEAD таг. На произволно място след него, но преди затварящия HEAD, напишете един от горните редове код, указващ пътя до вашия графичен файл с мини-лого.

Как да инсталирате анимиран favicon? По принцип точно същото като обикновения. Единствената разлика ще бъде кодът, вмъкнат в шаблона на вашия уебсайт, с който посочвате на браузърите и робота за търсене на Yandex пътя до желания графичен файл. Факт е, че анимираният Favicon ще има GIF разширение и следователно в редовете на кода ще трябва да напишете нещо подобно:

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

Успех на теб! Ще се видим скоро на страниците на сайта на блога

Може да се интересувате

Онлайн FTP клиент Net2ftp и Google Alerts - полезни услуги за уеб администратори
Анализ на уебсайтове в безплатни онлайн услуги Pr-cy, Cy-pr, Be1, Xseo и др
Икони, баджове, фонове, картинки и лога за сайта (онлайн услуги IconFinder, Freepik, PSDGraphics и други)
Ползваемост – как да направите уебсайта си удобен за посетителите и да се опитате да ги накарате да четат вашите статии възможно най-дълго
MegaIndex Tools - набор от инструменти за уеб администратори и оптимизатори
Как да проверите съвместимостта на различни браузъри на оформлението на уебсайт в Browsershots и да настроите изпращане на ping, когато се появят нови материали
Http - какво е това, как да видите заглавките и да проверите кода за отговор на сървъра, какво означават кодовете 200, 301, 302, 404 и 500?
Crossposting - какво е това и как да го направите правилно

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

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

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

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

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

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

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

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

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

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

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

Структура: Фавиконата е малка икона, която се използва за визуално идентифициране на вашия сайт в отметките, а също и това, което виждате до името на вашия сайт или страница в разделите на браузъра. Обикновено favicon е квадрат с размери 16x16 пиксела във формат favicon.ico. В тази статия ще обясним от каква „база“ се нуждаете, за да започнете, ще ви помогнем да създадете фавикон с помощта на графични редактори и ще говорим за начини да добавите фавикон към вашия сайт. Какво ви трябва, за да започнете?

1. Вашето лого трябва да е поне 512x512 пиксела (трябва да е квадратно);
2. .PNG формат на изображението;
3. Графичен редактор Adobe Photoshop или GIMP.

Създайте favicon с помощта на Adobe Photoshop

Favicon на прозрачен фон:

Фавикон на фон с корпоративен цвят:

Създаване на favicon с помощта на GIMP - GNU Image Manipulation Program

Предимства на използването на .ICO пред .PNG или .GIF

1. Съвместимост: Всички браузъри, включително IE 5.0, поддържат формата .ico.
2. Избягване на сървърни грешки 404: Всички съвременни браузъри (тествани с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) винаги ще изискват файла favicon.ico, така че е по-добре винаги да имате файл favicon.ico.
3. Един .ico файл може да съдържа повече от една икона, така че не е необходимо да създавате множество файлове за икони с размери 16x16 и 48x48 пиксела.

Конвертирайте .PNG в .ICO с помощта на онлайн конвертори

Как да инсталирате favicon на WordPress?