Как создать значок сайта - Favicon!

Что такое favicon? Вы слышите это слово первый раз?..гыгы…не пугайтесь , я не ругаюсь!))

Фавикон – это маленькая такая иконка, вы их уже точно встречали, крошечное  символичное изображение, в строке браузера, значок сайта, сбоку  от основной ссылки! Это то что вас выделяет!  Это то что Вас отличает, Ваш так сказать герб! И это то , на что очень положительно реагируют поисковики, типа яндекса и гугла!

Его можно сделать себе индивидуально! Самостоятельно! Об этом я недавно узнала впервые и решила тоже себе сделать.  Чеж, раньше у любого графского рода был свой символ, а мы чтож, лысые???

Можно конечно пойти простым путем и заказать его у профессионалов. Возможно кому то именно этот вариант и нужен, особенно если Вы крупная компания и у Вас есть свой сайт.

Ну моя то цель прицепить его всего лишь к своему блогу.
Для этого, можно конечно чуть помучиться и сделать его из изображения. Но!

Но мы не ищем легких путей, и я его решила нарисовать сама!
Итак, как создать favicon самостоятельно?

Итак, есть такой сайтик Favicon.cc , на нем можно нарисовать себе фавикончик) Есть конечно и рускоязычная версия этого сайта, но я рекомендую этот , потому что на нем больше функций.

Ну- с, приступаем.
Только прежде чем рисовать опять встает вопрос – а ЧТО рисовать? Ведь этож должно быть символьное изображение, чего то того что характеризует именно вас, оно должно быть уникальным!

Конечно если у вас есть "ник" типа – зайчик, слоненочек, кактус.. вам просто.. а у кого нет такого ярко выраженного предметного указательства? Что делать? Инициалы?  Тоже вариант.

Итак, я без ярко выраженной идеи иду на указанный выше сайт. Смотрим:

-  конешно изначально лучше зарегистрироваться на нем. Но можно это сделать и потом. А можно и не делать. Я регистрировалась потом. Зато теперь я всегда могу войти туда и востановить свой созданный фавикон.

 - открывается ссылка "Создать фавикон" (Create new favicon) - жму




-  рядом  образовывается поле - желтый квадрат в который разлинован сеточкой
- справа от желтого поля наблюдаем кисть и выбор нужного цвета

- щелкаем по полю цветов и вбираем любой понравившийся цвет
- потом  в желтом поле  рисуем по квадратикам, и ...

Прямо скажем у меня выходит пока какая то ерунда… рисовать квадратиками это нелегкий труд.. ых...

Посмотрела там же на сайте примеры других дизайнеров. Тоже скажем прямо не всегда удачные варианты.. вернее удачных единички.. взгрустнула..

Итак, начнем заново.

Выберем хотя бы цвет попристальнее. Сходила на свой блог, прикинула что там будет смотреться...
Еще раз смотрю на желтое поле ...Маленький какой то он….Квадратик, где фавикончик рисовать... 

После часа мучения и корпения в попытках изобразить там что-то вразумительное возникла мысль:  - Фу эти квадратики, пойду в программку рисовалку- Paint ! Надо только учесть что потом это будет мелким совсем! Ведь размер фавикончика будет всего 16x16 пикселей.

Читаем советы бывалых: фавикон будет размером 16x16 пикселей. Ожидать что в таком виде можно изобразить что-то сколько-нибудь сложное не приходится. Например, что бы изобразить хоть сколько-нибудь узнаваемо человеческое лицо, надо начинать с размера картинки 48x48.

Даа..тут в Paint фантазию можно проявить резвее!

Там же можно свое изображение уменьшить до маленького размерчика и посмотреть что будет.. Ох, я разошлась...!!!!... Ну вот, сделала что мне наравится:)

Сохраняем и идем обратно на сайт Фавикона.
Тут уже надо нажать на другую кнопку - Импорт.

Выбираем, вставляем....

НО!!! После вставки моего рисунка из Paint на сайт Фавикон. сс у меня получилось не очень … :(  ..квадратики съелись и картинка исказилась :( Совсем некрасиво...

Пришлось вернуться на сайт фавикона к рисованию в квадратиках…. Опять выбираем создать - выбор цвета-...
Еще одна попытка ...и- и- и....После некоторого времени ковыряния у меня стало даже очень получаться!

Я умею! Класс! Вполне симпатично!

Тут как в вышивании крестиком...Открою свой секретик- чтоб получалось что то объемное надо квадратики закрашивать в разного тона цвет. Ну отодвиньтесь от экрана подальше, взгляните что выходит?? .. как на эскизе вышивке должно быть.. например, один темно- зеленый, а рядом посветлее зеленый... понимаю что тут не разгонишься, квадратов мало..но... включите ФАНТАЗИЮ!

И еще, читаем советы бывалых:  правило при создании иконок сайтов одно —следует изображать один, хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Лучше всего для иконки сайта подходит логотип компании или столь же простое изображение

И еще! Я нашла анимацию… Там пониже...под желтым полем "use Animation".

Жмем.

Тут можно поиграться.
Рисуем одно изображение. Потом жмем - "Appended new frame".
Рисуем следующее изображение. Опять жмем "Appended new"... и так несколько можно слайдов сделать!
В окне "Frame 1 of 1"  можно выбрать длительность просмотра каждого слайда.
Так же неудачные слайды можно удалить кнопкоой "Delete Frame".

Посмотреть свое создание можно в окне ниже желтого поля:

Ооо… не оторвешь меня теперь…. У меня получилось создать аж несколько моих фавикончиков)

Целый день убила, такую красивую анимацию сделала!
Далее, с помощью кнопки Download Favicon  сохраняем свой фавикончик к себе на компутер. Получается такой файлик с расширением ico. Он почти не занимает места совсем, поэтому его и вставляют на свой блог или сайт.

Итак, вот оно, МОЁ создание))) :

Хоть здесь можно анимашку показать!
Права на нее зарегистрированы!

Итак, друзья, Вы уже поняли - идем на сайт и фантазируем, фантазируем..но не сильно...
Как вставить его к себе на сайт или блог, это уже другая тема.

И в заключение, про  анимацию фавикона, открою один секрет: ну ради общего развития можно конешно поразвлекаться и сделать фавик анимированный, НО!... Браузеры, за редким исключением, Вашу анимацию не воспримут.  Т.е. в строке браузера, перед Вашей ссылкой, будет показыватся только первый слайд. И  вапще, все это изображение ну очень  крошечное!!!
И делайте простую фигуру, ОДИН хорошо узнаваемый предмет, с четкими границами и контрастным фоном!

Итак, друзья, сегодня Вы узнали как создать свой favicon! 
Успехов и новых свершений!