Как создать свой фавикон (иконка в адресной строке)

Одной из составляющей успешности продвижения форума является его дизайн.
- В каких цветах оформить форум?
kazymyr

Как создать свой фавикон (иконка в адресной строке)

kazymyr 07 май 2009, 18:24 Сообщение

Пишу эту статью для новичков, которые недавно создали сайт/форум и хотят поставить на него красивый фавикон.

Итак, эту процедуру зделать достаточно легко (напишу пошагово). Если у вас есть картинка размером 32х32, формата GIF, JPEG или PNG (порекоммендовал бы PNG, т.к. если его поставить в адресную строку, то он будет на прозрачном фоне, а GIF и JPEG будут на белом), сохраняем её в нужном для вас формате в Paint.NET, PhotoShop и других ==> читаем эту статью дальше.
Шаг 2.
Тут есть два варианта создания фавикона: http://favicon.4admins.ru и программа AveIconifier2 (с помощью которой можно сделать отличную иконку), сначала напишу как сделать фавикон на http://favicon.4admins.ru
У вас есть иконка размерами 32х32 в сохранённом в нужном для вас формате. Заходим по адресу http://favicon.4admins.ru, нажимаем "Обзор" ==> Закачиваем заготовку ==> "Создать favicon". Откроется следующее окошко, нужно скачать созданную только что иконку:

Изображение


Теперь нужно вытянуть из архива заархивированную папку и выбрать нужную для вас иконку (их будет две - одна с анимацией, другая в формате "ico", опять-же посоветовал бы формат "ico", но выбирайте на ваш вкус)
Как создать иконку с помощью AveIconifier2:
После установления программы на ваш компьютер включаем её. В ней будет два окна - первое для формата "PNG", другое - для созданной иконки, всё, что вам нужно это перенести заготовку для иконки в формате "PNG" в правое окошко, а с левого окошка перенести иконку в формате "ico" на Рабочий стол или в нужное вам место. Хочу заметить, что предварительно нажав на левое окно правой кнопкой мыши выбрать размеры иконки (16х16). Иконка готова.
Шаг 3.
Заходим на свой сайт/форум ==> Админ раздел (если это форум на движке phpbb) ==> Картинки и логотипы ==> Закачиваем туда иконку (в формате "ico") и копируем её адрес ==> Стили ==> Шаблоны ==> [Ваш стиль] ==> overral_header.html . В самом верху перед <head> Вставляем следующий код:

Код: Выделить всё

<link rel="SHORTCUT ICON" href="ССЫЛКА НА ВАШУ ИКОНКУ">

где "ССЫЛКА НА ВАШУ ИКОНКУ" - это тот адрес, который вы должны были скопировать в разделе "Картинки и логотипы".
Если вы всё сделали правильно, то могу вас поздравить!
Вопросы можно задавать в этой теме.

© kazumur
Последний раз редактировалось kazymyr 23 июн 2009, 15:01, всего редактировалось 1 раз.
Изображение

Аватара пользователя
Alvaro

Re: Как создать свой фавикон (иконка в адресной строке)

Alvaro 13 май 2009, 09:47 Сообщение

Как раз сегодня искал как это сделать .СПАСИБО БОЛЬШОЕ
Изображение


Региша

Re: Как создать свой фавикон (иконка в адресной строке)

Региша 06 дек 2009, 01:25 Сообщение

kazumur писал(а):(порекоммендовал бы PNG, т.к. если его поставить в адресную строку, то он будет на прозрачном фоне, а GIF и JPEG будут на белом),

У меня не получился прозрачный фон, :( Хотя изображение в PNG :unknown Что я сделала не так? http://www.zh-z.ru Сердце в белом квадратике плохо смотрится :( Или это просто не правильно подобранная картинка? Помогите, пожалуйста!
Форум-профилакторий для тех кто желает жить здоровым!
"Жив-Здоров"!
http://zh-z.ru

Bukovka_

Re: Как создать свой фавикон (иконка в адресной строке)

Bukovka_ 06 дек 2009, 12:40 Сообщение

Региша
Возможно я ошибаюсь, но по-моему иконка должна быть в формате "ico" или "gif". :unknown

Региша

Re: Как создать свой фавикон (иконка в адресной строке)

Региша 06 дек 2009, 16:13 Сообщение

Bukovka_ писал(а):иконка должна быть в формате "ico"

у меня в архиве в формате "ico" только сиреневая бумажка с красными буквами, под названием "значок" Я ее скачала и установила, она и установилась, как бумажка сиреневая.. :shock: , Я на вкладке "Иконки сайта"... такую вижу, стоит на месте фавикона....А остальные картинки, числом 3, что были в архиве, все в других форматах. :unknown
Форум-профилакторий для тех кто желает жить здоровым!
"Жив-Здоров"!
http://zh-z.ru

GoDFaTHeR

Re: Как создать свой фавикон (иконка в адресной строке)

GoDFaTHeR 06 дек 2009, 23:33 Сообщение

png тоже поддерживается... возможно у вас просто не сохранился прозрачный фон ( для этого надо в fotoshope сохранять)
например наша иконка storage/up_4admins_ru/images/preview_32x32.png
имеете прозрачный фон...
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

kazymyr

Re: Как создать свой фавикон (иконка в адресной строке)

kazymyr 07 дек 2009, 18:53 Сообщение

Можно ещё делать размер 32х32 пикс., всё-равно он изменится в адресной строке на 16х16. Также можно .png переделать в .ico , но качество рисунка не изменится.
http://alldesign.if.ua/images/ranks/all ... avicon.ico - Изображение
Изображение



Похожие темы

Вернуться в «Web дизайн | Юзабилити»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость