Как сделать фавикон для сайта, онлайн фавикон для сайта
Всем привет! Сегодня расскажу и покажу, как разными способами можно сделать фавикон, с помощью онлайн сервисов, или самому, используя фотошоп, а также рассмотрим, как фавикон установить на сайт или блог.
Итак, для начала давайте разберемся что такое фавикон (favicon)?
favicon — это ваш значок веб-сайта или веб-страницы, который отображается в браузере перед названием сайта. У меня на блоге, это выглядит вот так.
В основном, для фавикона используется размер 16×16 пикселей, и формат у него ICO.
Как сделать фавикон? Я покажу несколько способов, вот что вы узнаете с это статьи:
— Как сделать фавикон онлайн
— Как сделать фавикон из картинки
— Как сделать фавикон в фотошопе
— Как установить фавикон на сайт
Теперь разберем все эти пункты по очереди.
Онлайн фавикон для сайта
Я буду использовать такой сервис как favicon.cc, переходим по данной ссылке и видим вот какое окно.
Затем с лева мы видим, меню данного сервиса, который предоставляет нам услуги, создать новую Favicon,
импорт изображения, и так далее. В данном случае мы можем как сами рисовать фавикон для своего сайта, так и загрузить картинку и отредактировать её.
Если вы решили сами рисовать, то пожалуйста, по центру не большое окно с квадратиками, наводим на него и вперед рисуйте по квадратах, я в пример нарисую человечка. Вот что у меня получилось.
И ниже смотрим, как будет выглядеть мой человечек в браузере, если понравилось ваше творение то нажимаем в низу «Скачать Favicon» и все готово, осталось только его добавить на сайт и вуаля, ну а как добавить на сайт читайте ниже.
Как сделать фавикон из картинки ?
На этом же сайте favicon.cc, нажимаем «Импорт изображения» жмем.
Выбираем файл не больше 5 МВ и жмем «Загрузить»
Все готово и красиво, осталось скачать и загрузить. Также здесь есть функция использовать анимации, то есть, можно сделать фавикон в анимации, я сейчас показывать не буду как это делать, вы сами можете потом разобраться там не сложно.
Как сделать фавикон в фотошопе ?
Для начала нужно чтобы у вас была на компьютере программа Adobe Photoshop, если её нет то в поиске пропишите и скачайте. Если есть у вас то, заходим в фотошоп, нажимаем «Файл/Создать» и настраиваем все как у меня на картинке, и жмем Ок.
Затем с помощью клавиши «Ctrl» и «+» делаем наш созданный файл ближе, чтобы было все хорошо видно.
Затем можно загрузить какую то картинку или опять же, самому нарисовать, и сохранить её.
Я не буду показывать как это сделать через плагин «ICOFormat» по скольку он у многих не активируется, но вы можете попробовать, если у вас он активируется, то хорошо, после того как сделали фавикон, нажимаете «Файл/Сохранить как» и выбираете формат «ICO» при этом назвать картинку нужно favicon.
А для тех у кого плагин не активируется, то сохраняем нашу картинку в формате «PNG», и просто загрузаем её на сайте favicon.cc, как я показал в примере выше, то есть, Как сделать фавикон из картинк.
Как установить фавикон на сайт?
Ну и перейдем к последнему и самому важному пункту, как установить фавикон на сайт?
После того, как вы использовали один из пунктов, перечисленных выше, и у вас готовый favicon.ico, вам необходимо загрузить его на ваш сайт, как это сделать?
Заходим в панель управления вашим хостингом, и в корень вашего сайта закидываем наш favicon.ico, где находится файл index.php.
Затем, идем в панель управлением сайтом, в раздел Внешний вид/Редактор, ищем файл header.php, который называется «Заголовок», и между тегами <head> </head> вставляем данный код.
1 | <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> |
Фавикон может появится не сразу а через какое то время, так что не волнуйтесь.
Всем спасибо за внимание, до скорой встречи пока !
С уважением Евгений Смецкий
20 комментариев
А я готовыми пользуюсь*( Наверн я ламер
У тебя дизайн похож на А. Борисов, конечно, он отличаться,, но элементы есть. В общем, очень красивый. Сам делал или кому-то заказывал.?
Спасибо. Делал сам, но буду скоро менять, хочу что-то уникальное и по светлее.
А шаблон, где брал? Или тоже сам делал?
Да сам делал )
Полезная статья получилась Евгений.
А дизайн действительно на Борисова похож.
Первый свой фавикон делал через сервис favicon.cc. Нынешний нарисовал в фотошопе. У меня есть подборка видео про создание фавикона.
Круто 😉
Да, дизайн блога похож на блог Александра Борисова!) Ты заказывал или сам делал?
Делал сам, но это пока временный шаблон!! Я вот как раз сейчас занимаюсь дизайном, титульную сделал, осталось шаблон в целом менять !! Вообще осталось не много.
Нынешний шаблон очень классный! Титульный видел, тоже очень крутой!) Будем тогда ждать изменения вида блога. Сам люблю с этим экспериментировать, хоть сам и не рисую шаблоны.
Мне тоже нравится, когда что-то меняется, преобразовывается. Фавикон вывожу при помощи плагина, хотя понимаю, что это смешно. Раньше закидывал в корень, рисованный, потом почему-то не смог этого сделать. Пришел к плагину и все. Надеюсь от него лишней нагрузки не будет.
Раньше тоже был плагин. Нагрузка небольшая, если вы не яркий противник плагинов, то можно использовать, он не такой весомый как, к примеру, плагин pop окна.
Нет я не противник плагина. Но вот все-таки в фотошопе хочу сделать фавикон, такой будет уникальный и привлекательный.У автора этого блога, фавикон очень даже ничего. Такой нравится. У меня ракета вверх, тоже хорош.
Важна оригинальность, а если не уникален, то главное, чтобы другие сайты не видели с такой же иконкой сторонние ресурсы.
По моему скромному мнению статья является не полной — точнее не описано как подключать GIF и другие форматы изображений для FAVICON. Может дополните, Евгений?
Ок
Классный шаблон сайта. Класика.
Пыталась я в начале сама нарисовать, такая каша получилась. 😀
Бросила это дело, нашла маленькую иконку, чуть ее подредактировала под себя, и вставила в этот сайт, он мне ее уменьшил, и все гуд, работает прекрасно.)
Я тоже Диана пробовал и у меня ничего путнего не получилось, погуглил малость и нашел уже готовую.
Я себе тоже сделал онлайн. Названия сайта не помню. Всё быстро получилось. А на favicon пробовал так картинка так картинка в два раза больше весит.