Как да създадете favicon за сайта: полезни съвети и услуги

1. Как да създадем favicon
2. Как да направим favicon в Photoshop
3. Как да запазите favicon
4. Как да вмъкнем сайт за favicon
5. Как да заменим favicon
6. Как да създадем по-сложни favicons

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

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

Как да създадем favicon

Да започнем с дизайна на Favicon. Добрият дизайн, въпреки своята компактност, трябва да отразява същността на вашия сайт и да бъде органична част от корпоративната идентичност. Обикновено иконата е графичен знак (икона) на фирма, а не цяло лого (икона, текст и слоган).

Като favicon, тези уебсайтове използват своите икони (или изображения близо до тях).

Текстът на favicon не трябва да се използва, тъй като този текст ще бъде нечетим поради малкия размер на изображението. Единствените изключения от това правило са световно известните текстови знаци, които автоматично се асоциират с определена марка. Например, онлайн ресурсът Уикипедия остави върху иконата си главна буква "W", а Facebook - буквата "F".

На тези знаци има букви, които са силно свързани с определена марка. Например, Facebook използва своя графичен знак. Също така имайте предвид, че пикселите са видими на изображението на Disney. Това е така, защото на екрана е взето на Retina дисплей, който е съвместим с 16 × 16 икони, докато уеб сайтовете използват 32 × 32 икони.

Тъй като favicons са малки изображения, всеки пиксел играе важна роля. Понякога след намаляване на логото отделните пиксели стават видими, поради което изображението става „замъглено“. За да постигнете яснота, трябва да редактирате иконата на ниво пиксел.

За да избегнете това, трябва да промените размера на логото, използвайки специални редактори като Photoshop или GIMP. Първо трябва да намалите размера на изображението до 64x64 пиксела (това е най-големият формат за снимки). След това трябва да редактирате всеки пиксел, като използвате инструмента "Молив", докато изображението стане ясно. Това е труден процес, но резултатът си заслужава. Когато favicon 64x64 е готов, трябва да направите същата работа с изображение от 16 × 16, 24 × 24 и 32 × 32 пиксела. Толкова много размери трябва да се показват правилно във всички браузъри и притурки:

• 64x64 - отметки на браузъра Safari;
• 32x32 - дисплеи с висока резолюция (Retina);
• 24x24 - отметки Internet Explorer и MicroSoft Edge;
• 16x16 - Google Chrome и други браузъри.

Как да направим favicon в Photoshop

Първо трябва да създадете няколко платна с горните размери.

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

Как да запазите favicon

Създавайки икони с различни размери, запазете всеки от тях като прозрачен PNG файл (24 бита). В Photoshop можете да използвате функцията Запис за уеб, достъпна в менюто Файл. След това трябва да обедините всички PNG файлове в един ICO файл. Можете да използвате едновременно PNG файлове и ICO файлове, но често дори Safari и Chrome предпочитат само ICO формата. По мое мнение е по-лесно да се създаде един ICO файл. ICO форматът не е много често срещан, но за щастие има редица инструменти, които могат да ви помогнат да конвертирате вашите файлове в този формат. За тази цел предпочитам да използвам X-икона редактор , Това е безплатна онлайн услуга, която незабавно преобразува изтеглените изображения в един ICO файл, след което можете да го изтеглите. Това не е нищо сложно, просто следвайте инструкциите на сайта. Ако смятате, че сте отчаян човек, можете да експериментирате с пикселния редактор на тази услуга и да нарисувате себе си. (Въпреки че предпочитам да редактирам favicons в по-професионален редактор, например в Photoshop).

С качването на вашите PNG изображения в редактора на икони на X ще получите един ICO файл на изхода.

Как да вмъкнем сайт за favicon

Така че вече имате ICO файл. Сега трябва да го добавите към уебсайта. Преименувайте файла на favicon.ico и го поставете в главната папка на уебсайта си (където се съхраняват index.html файлът и другите стандартни файлове). След успешното добавяне можете да го видите на вашия сайт .com / favicon.ico. Почти всички браузъри търсят файла favicon.ico в главната папка. Затова е важно да изтеглите favicon в тази папка. За съвместимост с различни браузъри е по-добре да не се добавят никакви HTML елементи или връзки, които да показват местоположението му. Този трик работи за всички браузъри, до IE6. Също така, ако имате WordPress сайт, то в много теми можете да добавите favicon в настройките на темата. Този метод може също да се използва.

Как да заменим favicon

По някаква необяснима причина браузърите го добавят в кеша. Следователно, когато качвате нов ICO файл, браузърът може да продължи да показва стария ви Favicon. Какво да направите в този случай? Можете да добавите временен HTML файл, който показва местоположението на новия ви Favicon. Също в края на URL адреса трябва да добавите кратък низ за заявка:

<link rel = "икона за бърз достъп" href = "твой сайт .com / favicon.ico? v = 2> />

Така че браузърът ще си помисли, че това е уникален URL адрес и следователно ще бъде принуден да покаже нова икона. След като актуализирате favicon, този HTML код може да бъде напълно премахнат. Ако трябва да направите промени в favicon, използвайте същата техника, като всеки път увеличавате числото след “v” в низа на заявката. По този начин браузърът всеки път ще възприема този URL като уникален и ще покаже новата си версия. И не забравяйте да изтриете HTML кода след успешна актуализация.

Как да създадем по-сложни favicons

В тази статия исках да опиша универсален и лесен начин за създаване на символи, които да работят на почти всяка платформа. Но в уеб дизайна и развитието няма граници за съвършенство. Ако искате да научите как да създавате по-сложни икони, можете да опитате да използвате услугата favico.js , Тя ви позволява да създавате динамични изображения с различни числа. Благодарение на тази икона можете да видите броя на непрочетените съобщения, дори когато съответният раздел не е активен. Ако искате да създадете анимирани favicons онлайн, можете да опитате с помощта на favicon генератор favicon.cc ,

Повече онлайн генератори можете да намерите тук ,

Ако искате да споделите вашите съвети за създаване на favicons или да зададете въпрос, аз ви очаквам в коментарите!