Икона уеб сайт - важна част от вашия сайт. Често обаче прословутия уеб иконата ние мислим в последния момент и поставете линията на линк маркер, всички с икони на опцията. Понякога счита за достатъчно да се сложи файл на уеб икона в главната директория на сайта, тъй като модерен браузър в състояние самостоятелно да намери и свържете икона. И понякога ние забравяме за уеб иконата прави.
Уеб икона за десктоп
Нека започнем с обичайните неща. Почти всички версии на браузърите за компютри, базирани на формат 16 х 16 икони. 32 × 32 × 48 и 48 във формата, или .png .ico (за по-старите версии на IE само .ico).
Уеб икона за Android
- 36 х 36 - за екрани с фактор 0,75 плътност
- 48 х 48 - за екрани с плътност съотношение 1
- 72 х 72 - за екрани с фактор плътност 1,5
- 96 х 96 - за екрани с стягане фактор 2
- 144 х 144 - за екрани с плътност съотношение 3
- 192 х 192 - за екрани с стягане фактор 4
Android вижда иконите в .png формат. както и въз основа на manifest.json файл, който може да съдържа няколко различни козметични параметри. При липсата на опции икони за Android, системата разчита на иконата на ябълка докосване-икона.
Favicon за мобилни устройства на Apple
Както и в Android, Apple устройства имат различен PPI на различни устройства, включително така наречените ретина дисплеи. За различни версии на разделителна способност на екрана и версии на операционната, тъй като има няколко различни опции икони:
- 57 × 57 - за iPhone, без дисплей ретината и ЗИ 6.0 и по-долу
- 60 х 60 - за iPhone, без показване ретина и IOS 7.0
- 72 х 72 - за IPAD, без показване ретина и ЗИ 6.0 и под
- 76 х 76 - за IPAD, без показване ретина и IOS 7.0
- 114 × 144 - за iPhone с дисплей ретината и ЗИ 6.0 и по-долу
- 120 х 120 - за iPhone с ретината дисплей и IOS 7.0
- 144 × 144 - за Ipad с дисплей ретината и IOS 6.0 и по-долу
- 152 х 152 - за IPAD с ретината дисплей и IOS 7.0
- 180 × 180 - за 6 iPhone Plus с IOS 8.0
Друга икона на сайта
- IE10 за Windows 8 изисква цвят на фона
- IE11 за Windows 8 и 10 отнема малко по-различни опции за икони, както и настройките на базата на browserconfig.xml на XML файл
- Safari за Mac OS X Ел Капитан изисква икона SVG за фиксирани раздели
- 96 × 96 - за Google TV
- 228 × 228 - за Opera Coast
Как да конфигурирате и да се свържете цялото това разнообразие?
Логично е да се предположи, че за свързване на цялото това разнообразие икона на сайта ще изисква много усилия. Какво е основателен въпрос: Има ли инструмент за автоматизиране на този процес? И, разбира се, че съществува. За тези, които са в неговия дизайн на предната част използва задача мениджъри като Grunt и Gulp, има специални приставки (за тях за кратко в края на статията). Ние също така да използвате онлайн решение, което ще позволи на удобно персонализирате всички параметри и веднага да видите резултата.
Онлайн генератор позволява въз основа на само един от вашите снимки (желания размер на изходния код на най-малко 260 × 260), за да създадете икона за вашия сайт за всички видове браузъри и устройства.
След изтеглянето на иконите ще видите страница, където можем да персонализирате нашия велик икона подробности за всяка платформа, и веднага да видите резултата.
раздела Настройки IOS, ние можем да укажете цвят на фона на иконите, а също така да посочат размера на иконите на отстъп във вътрешността на района. Специален раздел картина позволява изтеглянето на друга версия на иконата за определен тип устройство (подобно на Android, Windows и Mac OS)
При настройките на Android е малко по-интересно. Възможно е в IOS версии укажете цвят на фона и пълнеж, също имат възможност да прозрачен фон с сянка на компанията всички стандартни икони на операционната система. Възможно е да се уточни конкретно име на приложение. В раздела Опции можем да посочите URL адрес, който ще запази нашата молба.
За фиксирани раздели в Safari 9 под Mac OS X Ел Капитан е с нова версия с иконите на SVG.
На теракота система Windows малко по-сложно. След това задайте цвета на фона е строго необходимо, и цвета на логото в повечето случаи най-добре е да изберете бял цвят.
Крайните глобалните настройки могат да бъдат направени в последния прозорец с опции. Тук можете да укажете пътя до директорията, където лежат всички файлове, генерирани за нашия уеб икона, изберете степента на компресия, за да се спести място, изберете мащабиране алгоритъм, и т.н.
Въвеждането на шаблон
След завъртане на настройките за нашите нужди, ние можем най-накрая да генерира икони. В прозореца, който се появява, ще видите няколко опции за свързване на икони. За да се свържете иконите свойски в HTML файл, предложеният архива, просто да изтеглите и вмъкнете специално генериран код между маркерите на главата на вашия сайт.
След това можете да тествате функционалността на уеб икона тук.
Код за координационни мениджъри Grunt и Gulp
Сега, ние разбираме принципите на поколение уеб иконата за показване на вашия сайт на различни устройства, ние можем да се автоматизира процеса с помощта на диспечера на задачите. Достатъчно е да се грижат за поколението на раздела Grunt и Gulp. В зависимост от това, което използвате, и да учи предложения кодекс в детайли, за да продължите да го използвате в проектите си и автоматизиране на процеса на производство, без да се прибягва до онлайн ресурс.
В нашите проекти ние използваме Gulp
1. инсталират приставката глътка-реално уеб иконата
2. Поставете кода на вашата gulpfile.json
3. Поставете TODO: Път към господаря си картина по пътя към изходния код, от който ще се генерира икони. Например, активи / снимки / master_picture.png
4. Поставете TODO: Път до директорията, където да се съхраняват иконите по пътя към директорията, където времето за производство ще се основава на иконите. Например, дистрибуция / изображения / икони
5. Поставете TODO: Списък на HTML файлове, където да си инжектират уеб иконата надценки по пътя към файла, в който ще бъде включен изпълнението на уеб икона на кода. Например, [ 'дист / *. Html "," дист / Разни / *. Html']
6. Поставете TODO: Път до директорията, където да съхранява HTML файлове по пътя до директорията, в която се съхраняват вашите HTML файлове.
7. Създаване на командните икони
8. Интегриране на икони в шаблона
заключение
Тези на пръв поглед обикновени действия ще позволят на вашия сайт да изглежда на всички устройства още по-адаптивно.
Послепис още няколко екстри
Ако искате да научите как да видите на уеб иконата на вашия сайт търсачки Yandex и Google, можете да се възползвате от специалните услуги:
Къде mydomain.com - на домейна на сайта.
Почти всеки сайт има секция с коментари и форма за тяхното писане. На необходимостта от такъв раздел е написан на умни книги, посветени на дизайна на Интернет ресурси, като каза, че тъй като можете да получите обратна връзка от потребители. Това е само тази обратна връзка е обратната страна.
Почти всяка фирма, продукт, и още повече, че се изисква използване на копирайтъри агенцията. Няма значение дали това е позицията на копирайтър, мениджър на съдържанието, PR-специалист или просто мениджър, често едно са - писане на текстове. Въпреки очевидната си простота, добро писане на различни текстове, които не се дава на всеки.
Много започват копирайтъри се страхуват да отидат директно на агенцията. Те не са сигурни, че те могат да се справят с натоварването и да е подходящо за поста, така че по съвет на старшите колеги, изпратени на борсата. Самата идея за такъв обмен вдъхновяващи: работите на свободна практика, за изграждане на свободен график, не е свързана с мястото си. Но розови очила падне след първия ред или просто математическо упражнение.
Свързани статии