GitHub - aaurelions/doomicon: Doom gameplay in browser favicon.

3 min read Original article ↗

Favicon Doom 16x16

doom

🎮 What is Favicon Doom?

Favicon Doom is a retro-style first-person shooter inspired by the classic Doom games, but with a twist: the game only appears in your browser tab's favicon icon. The main browser window remains completely blank/white, while all the action happens in that tiny 16x16 pixel space.

đŸŽ¯ How to Play

Controls

  • WASD or Arrow Keys: Move around
  • Mouse: Aim (look around)
  • Left Click: Shoot demons

Objective

Eliminate all demonic creatures roaming the dungeon. Your health, remaining demons, and ammo count are displayed in the browser tab title.

✨ Features

  • Favicon-Only Gameplay: The entire game runs in a 16x16 pixel favicon
  • Retro Pixel Art: Authentic 16-bit style graphics scaled up for the tiny format
  • Classic Doom Mechanics: Raycasting 3D rendering, sprite enemies, first-person perspective
  • Dynamic HUD: Health, ammo, and enemy count displayed in browser title
  • Atmospheric Lighting: Walls darken with distance for depth
  • Responsive Controls: Mouse look and keyboard movement
  • Multiple Wall Types: Brown stone, blue brick, and green mossy stone walls

🏗ī¸ Technical Implementation

This game uses pure HTML5 Canvas and JavaScript with no external dependencies:

  • Raycasting Engine: Custom 3D rendering algorithm for walls and depth
  • Sprite System: Animated demon enemies with hit effects and death animations
  • Favicon Rendering: Real-time canvas-to-favicon conversion
  • Collision Detection: Precise player movement and wall collision
  • Dynamic Title Updates: Game status in browser tab title

🚀 How to Run

Open in Browser: Navigate to https://aaurelions.github.io/doomicon/

🎨 Visual Design

Environment

  • Walls: Three distinct wall types with shading for depth
  • Floor/Ceiling: Textured floor and ceiling with atmospheric colors
  • Lighting: Distance-based brightness falloff

Demons

  • Appearance: Dark red bodies with glowing orange eyes, curved black horns, and menacing mouths
  • Behavior: AI-controlled movement with collision detection
  • Visual Effects: Hit flash effects and shrinking death animation

HUD

  • Title Bar: Dynamic updates showing:
    • ❤ī¸ Health percentage
    • 😈 Remaining demon count
    • đŸ”Ģ Ammo count
    • Game status (YOU WIN!/GAME OVER)

🕹ī¸ Game States

  • Menu: White screen with control instructions in title
  • Playing: Active gameplay with status in title
  • Game Over: Win/lose message in title

đŸŽ¯ Unique Concept

This game explores the boundaries of web gaming by fitting an entire 3D FPS experience into a 16×16 pixel favicon. Every frame of gameplay is compressed and rendered in real-time to the browser tab icon, creating a completely novel gaming experience that challenges traditional interface design.

🛠ī¸ Browser Compatibility

Works in modern browsers that support:

  • HTML5 Canvas
  • Dynamic favicon updates
  • Pointer Lock API (for mouse look)

📝 License

This is a demonstration of creative web development techniques. Feel free to study and learn from the code!

Experience gaming in the smallest possible space! 🎮đŸ”Ĩ